unable to run parameterised method from javascript

Question

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");
}*/
  }

I think that you need to quote strings, Try doTask(\''+item.productName+'\',\''+item.ProductImageURL+'\','+item.productPrice+'); — jcubic
– jcubic, Commented Sep 20, 2013 at 20:32

James Montagne · Accepted Answer · 2013-09-20 20:33:42Z

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.

000 · Accepted Answer · 2013-09-20 20:40:19Z

1

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.

edited Sep 20, 2013 at 20:40

answered Sep 20, 2013 at 20:34

000

27.3k10 gold badges74 silver badges103 bronze badges

3 Comments

000 Over a year ago

No, I appended button to the div.info inside the ul.

000 Over a year ago

And I'm appending the ul object to the #product_display_div, not the ul string.

James Montagne Over a year ago

Right, my fault. I was thrown off by the re-wrapping of the javascript object. The $(ul) re-wrap is unneeded but not really an issue.

Greg Jones · Accepted Answer · 2013-09-20 20:35:16Z

0

Your JavaScript is: NAME, PRICE, IMAGEURL

But your JQuery is: NAME, IMAGEURL, PRICE

Is that the problem?

answered Sep 20, 2013 at 20:35

Greg Jones

3971 silver badge7 bronze badges

Collectives™ on Stack Overflow

unable to run parameterised method from javascript

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related