SyntaxError: missing ) after argument list in jquery whilst appending

Question

I am getting this error! missing ) even through there seems nothing wrong in my jquery line.

$('.product_area').append('
 <div class="product">
   <a href="/index.php?store='+$store_username+'&view=single&product='+json[i].product_id'"><div class="product-image">
    <img src="<?php echo image_check('+json[i].product_image1+'); ?>" />
    </div>
    </a>
  <div class="product_details"><div class="product-name">
 <a class="name" href="/index.php?store='+$store_username+'&view=single&product='+json[i].product_id'">
 <span><?php echo substr('+json[i].product_name+',0,23); ?></span>
 </a>
 </div>
  <div class="product-price">
 <span class="price">@ Rs. <?php echo number_format('+json[i].product_price+',2); ?></span>/-</div>
  <div class="product-discount">
 <span class="discount">Discount: 
 <span class="color-text"><?php echo '+json[i].product_discount+' ?></span>%</span>
 </div>
 </div>
 </div>').animate({width:'toggle'},150);

I have tried to write it as clean as possible. Can anyone check! It's irritating a lot

You can't split a string over multiple lines. You need to concatenate it, or use \ at the end of the line. You're also trying to append JS data in to PHP, which will never work. The cause of your problem is a missing `+` after `json[i].product_id`. Voting to close as a typo. — Rory McCrossan, Jan 18 '17 at 14:26
http://stackoverflow.com/questions/10759426/appending-large-block-of-html-with-append — prakash tank, Jan 18 '17 at 14:27
Possible duplicate of [Appending large block of html with append()](http://stackoverflow.com/questions/10759426/appending-large-block-of-html-with-append) — , Jan 18 '17 at 14:45

Cruiser · Accepted Answer · 2017-01-18T14:41:15.747

This looks like a problem with splitting up a string over multiple lines. (Also you have a typo, as others have commented. If this is an error in your code you'll need to fix it, but if it's just a typo here on SO here's the other problem you're facing)

There are a couple of ways you could go about solving this.

1) If you can use ES6, consider using string templates with `` (backticks). This solution might look like this:

let html = `<div class="product">
           <a href="/index.php?store=${store_username}&view=single&product...`

Notice that you don't need to use + in this solution, you can just use ${var_name} and get the value of your variable. You can also split over multiple lines and be OK. I think you could also just replace the entire string in your append() method with a string template and be good.

2) Prepackage your HTML into a variable before appending it, using the += operator. Here it might look something like this:

var html = '<div class="product">';
html += '<a href="/index.php?store=';
html +=  $store_username;
html +=  '&view=single&product=';

And so on, and then you would

.append(html);

3) Finally, you can split lines with the \

... .append('<div class="product"> \
           <a href="/index.php?store= \
           '+$store_username+'&view=single&product=' ... );

score 1 · Answer 2 · answered Jan 18 '17 at 14:37

change this line

<a href="/index.php?store='+$store_username+'&view=single&product='+json[i].product_id'"><div class="product-image">

to

<a href="/index.php?store='+$store_username+'&view=single&product='+json[i].product_id+'"><div class="product-image">

skalpin · Answer 3 · 2017-01-18T14:43:41.770

How about this?

$('.product_area').append('<div class="product">\
    <a href="/index.php?store=\'+$store_username+\'&view=single&product=\'+json[i].product_id\'"><div class="product-image">\
        <img src="<?php echo image_check(\'+json[i].product_image1+\'); ?>" />\
        </div>\
        </a>\
    <div class="product_details"><div class="product-name">\
    <a class="name" href="/index.php?store=\'+$store_username+\'&view=single&product=\'+json[i].product_id\'">\
    <span><?php echo substr(\'+json[i].product_name+\',0,23); ?></span>\
    </a>\
    </div>\
    <div class="product-price">\
    <span class="price">@ Rs. <?php echo number_format(\'+json[i].product_price+\',2); ?></span>/-</div>\
    <div class="product-discount">\
    <span class="discount">Discount: \
    <span class="color-text"><?php echo \'+json[i].product_discount+\' ?>    </span>%</span>\
    </div>\
    </div>\
    </div>').animate({width:'toggle'},150);

SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data — Ali Rasheed, Jan 18 '17 at 14:40
`\'+json[i].product_price+\'` should probably not be escaped. — epascarello, Jan 18 '17 at 14:49

SyntaxError: missing ) after argument list in jquery whilst appending

3 Answers3