ronaldwafula
Tue, 23 Jan 2018 15:03:22 GMT
TML show.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>
myApp.js
var myApp = new Framework7({
template7Pages: true, // enable Template7 rendering for Ajax and Dynamic pages
animateNavBackIcon: true,
// Enabled rendering pages using Template7
template7Pages: true,
precompileTemplates: true,
preprocess: function (content, url, next) {
var rootUrl = 'http://localhost/phonestore/public/api/';
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 coming from server. Getting data-id attribute is not working in preprocess, please assist.