CODEWITHSUNDEEP
javascriptjquery-ui
Mayur Gupta
Mayur Gupta

Reputation: 780

unable to run parameterised method from javascript

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

Answers (3)

000
000

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

Greg Jones
Greg Jones

Reputation: 397

Your JavaScript is: NAME, PRICE, IMAGEURL

But your JQuery is: NAME, IMAGEURL, PRICE

Is that the problem?

Upvotes: 0

James Montagne
James Montagne

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

Related Questions