Hi all,
The issue I'm going to explain is I'm facing in many pages. I have a product details page as below. Based on the product id from the query string, I fetched the product details from database using Drupal.services.call(). In the HTML string replace the values and attach to the 'content's 'markup' as shown in the below code. The details are attached properly and the content shows properly.
But the tabs implemented in the HTML code is not working. And the main point is, instead of the dynamic call, if I give the dummy product details HTML in the content's markup everything working fine.
Is that some JavaScript events or css is not added/attached to the dynamic content? or My code structure have some issues?
I moved the code to call Drupal.service.call() to the 'pageinit', but still the issue is persists.
function product_detail_page() {
$(document).on('pageinit', '.product_detail', function() {
// Some of the button click functions
});
var content = {};
var nid = arg(1);
try {
Drupal.services.call({
method: 'GET',
path: 'product-display/' + nid + '.json',
success: function(result) {
var price_show = '';
var html_product_details = [
'<div class="prd-detail-prd-name">',
'<h2>' + result.title + '</h2>',
'<p>6 pcs</p>',
'</div>',
'<div class="prd-detail-price">',
'<div class="prd-detail-price-right"><p><span>₹ 30.00</span> ₹ 30.00 </p></div>',
'</div>',
'<div class="prd-detail-rating">',
'<ul data-role="nd2tabs" data-swipe="true" class="nd2Tabs">',
'<li data-tab="product" class="nd2Tabs-nav-item waves-effect waves-button waves-light waves-effect waves-button waves-light nd2Tabs-active" data-tab-active="true">About Product</li>',
'<li data-tab="benefits" class="nd2Tabs-nav-item waves-effect waves-button waves-light">Benefits</li>',
'</ul>',
'<div id="about_product" class="nd2Tabs-content-tab nd2Tab-active" data-role="nd2tab" data-tab="product">About product details</div>',
'<div id="product_benefits" data-role="nd2tab" data-tab="benefits" class="nd2Tabs-content-tab">Product benefit details</div>',
'</div>',
].join("");
$("div#product_details").append(html_product_details);
}
});
}
catch (error) {
console.log('Product details - ' + error);
}
content['my_markup'] = {
markup: ([
'<div id="product_details">',
'</div>',
].join(""))
};
return content;
}
Comments
Comment #2
Saneesh CreditAttribution: Saneesh commentedComment #3
tyler.frankenstein CreditAttribution: tyler.frankenstein commentedTry this approach instead: http://docs.drupalgap.org/7/Entities/Rendering_Entities
Essentially, any async calls need to happen in your pageshow event. Then once the entity is retrieved, build an html string, then inject it into the waiting empty div container. Use page_arguments for the dynamic id, and be sure to append the id to the container id, so each one is unique across pages.