I am loading dynamic pages with F7 preprocessors and T7. I am having some difficulties to access product ID stored in data attribute. The thing is that I want when the user clicks a product in the product catalog; the detail page loads with details of the clicked product. But whenever I am trying this I am getting undefined for var id. here is my code:
//HTML
{{#each this}}
<div class="content-block"><!--Block Content-->
<div class="row"> <!--Block Content row-->
<div class="col-25">
<a href="show.html" class="link" data-id={{id}}>
<div class="item-media"><img src="{{product_image}}" width="100" height="100"></div>
</a>
<h3>{{product_name}}</h3>
<div class="chip">
<div class="chip-label">KES.{{price}}</div>
</div>
<p>{{product_desc}}</p>
<div class="row">
<div class="col-50">
<a href="#" class="button button-small button-fill color-blue">Add to Cart</a></div>
<div class="col-50">
<a href="#" class="button button-small button-fill color-gray">Add to Wishlist</a></div>
</div>
</div>
</div><!--End of block content row-->
</div> <!--End of block content-->
//myApp.js
switch(url)
{
case 'show.html':
var id = $$(this).attr('data-id');
//alert(id) returns undefined
//Fetch product categories and display them in list box
var serverUrl = rootUrl+'products/'+id;
$$.ajax({
url: serverUrl,
dataType: "json",
success: function (data, textStatus, jqXHR) {
var compiled = Template7.compile(content);
next(compiled(data));
},
error: function (jqXHR, textStatus, errorThrown) {
alert("ERROR: " + errorThrown)
}
});
break;
-------
}
All data is being retrieved from the server. Please assist me.