Reputation: 780
see the underlying code.
function displayProductsByCategory(a){
$.getJSON('json/newjson.json', function(data) {
$("#Product_Display_Div").empty();
$("#Product_Display_Div").append('<h1>'+a.id+'</h1>');
$.each(data[a.id], function(key, item) {
//alert("key :"+item.productPrice+"value :"+item.productName);
$("#Product_Display_Div").append('<ul class="columns"><li> <h3>'+item.productName
+'</h3><img src="'+item.ProductImageURL
+'" width="150" height="150" /><p> hello</p><p class="product_price">'+item.productPrice
+'</p><div class="info"><h2>Title</h2><p>some text</p><button onclick="doTask('+item.productName+','+item.ProductImageURL+','+item.productPrice+');" class="addtocart" >Add to Cart</button></div></li></ul>');
})
});
}
in this code the onclick attribute in the last line dosent work may be there is some problem with quotes it gives the error as: Uncaught SyntaxError: Unexpected number
can you help me out
the javascript method is:
function doTask(productName,productPrice,productImageURL)
{
alert("inside java script");
/*this.productName=productName;
this.productPrice=productPrice;
this.productImageURL=productImageURL;
var person=prompt("Please enter the quantity","1");
person=parseInt(person);
alert(person+2);
if (!isNaN( person ))
{
alert("yes its a number");
}
else
{
alert("enter the valid quantity.\nShould be a Number");
}*/
}
Upvotes: 2
Views: 61
Reputation: 27247
The problem is that you have strings that are not surrounded by quote characters. If you inspect the element, you'll see it looks like this:
onclick="doTask(foobar,/your/url,123.45);"
but it should look like this:
onclick="doTask('foobar','/your/url',123.45);"
Your code needs to change like this:
onclick="doTask(\''+item.productName+'\',\''+item.ProductImageURL+'\',\''+item.productPrice+'\');"
Here is a re-write that totally removes the problem:
function displayProductsByCategory(a){
$.getJSON('json/newjson.json', function(data) {
$("#Product_Display_Div").empty();
$("#Product_Display_Div").append('<h1>'+a.id+'</h1>');
$.each(data[a.id], function(key, item) {
var button = $('<button></button>').addClass('addtocart').data('item',item).text('Add to Cart');
//alert("key :"+item.productPrice+"value :"+item.productName);
var ul = $('<ul class="columns"><li> <h3>'+item.productName
+'</h3><img src="'+item.ProductImageURL
+'" width="150" height="150" /><p> hello</p><p class="product_price">'+item.productPrice
+'</p><div class="info"><h2>Title</h2><p>some text</p></div></li></ul>');
$(ul).find('div.info').append(button);
$("#Product_Display_Div").append(ul);
})
});
}
$("#Product_Display_Div").on('click','button.addtocart',function() {
console.log($(this).data('item')); // logs the item attached to the button. No need for parameters.
Upvotes: 1
Reputation: 397
Your JavaScript is: NAME, PRICE, IMAGEURL
But your JQuery is: NAME, IMAGEURL, PRICE
Is that the problem?
Upvotes: 0
Reputation: 78780
Presumably, productName
and productImageURL
are meant to be strings. Your code:
'<button onclick="doTask('+item.productName+','+item.ProductImageURL+','+item.productPrice+');" class="addtocart" >'
would produce something like this:
<button onclick="doTask(Product Name,http://blahblah,123);" class="addtocart" >
When you look at it like this, you can see that your strings are not quoted. Since your strings are inside of double and single quotes already, you would need to escape them.
<button onclick="doTask(\''+item.productName+'\',\''+item.ProductImageURL+'\',\''+item.productPrice+'\');" class="addtocart" >
As you can see, this is getting ugly quick. You should probably consider refactoring this so it's not all one massive string.
Also, your parameters seem to be out of order. Your method expects URL third but you pass it second.
Upvotes: 2