Html Dynamic Content With Ajax

Question

I am a newbie on web development, just started learning ajax request and dynamic content creation.

I have no problem in loading and parsing data. After loading data, Dynamically I create multiple rows represent each element of array (response of ajax request):

 for(var i=0; i< dicts.length; i++){
     var dict = dicts[i];
     div_content += "<div id='row' " + 
                         "onclick='callJs("+ dict.get('itemId') +");'>" + 
                        <b>" + dict.get('name').toUpperCase()+ "</b>&nbsp;"+ 
                        dict.get('itemId') + "&nbsp;" +
                        dict.get('active_deals') + " DEAL <br/>" + 
                        dict.get('popularity') + ". POPULAR BRAND <br/>" + 
                        "<img src='resources/list_break.png' /><br/>" +
                        "</div>"; 
  }

dict.get('itemId') is Long(26 digits) as a string. When I click a row, 'callJs' function fires, but a strange issue happens. My Long as a string becomes a Long, for example :

row id -->  85511111031103236921544356 ,   
in function I see, row id -->   8551111103110325e+25   

my string turns into a Long, I cannot understand. I also checked that my parser returns right value. I think dynamically created row's click function converts string to long.

function callJs(itemId) {
     alert(itemId); // prints  8551111103110325e+25
     alert(itemId.toString()); // prints 8551111103110325e+25
}

As you see, in iterator loop, I print itemId of each row, prints right value (85511111031103236921544356):

I could not find any solution anywhere. I wanna pass the id of each row to my function.

Any solution make me so glad..

Thanks in advance..

Answer 1

In this line:

"onclick='callJs("+ dict.get('itemId') +");'>"  +

The Html generated will look like this:

"onclick='callJs(11111112222222);'>"

So, callJs is being called with an integer argument.

You need to change the line to be something like this like this:

"onclick='callJs(\""+ dict.get('itemId') +"\");'>" + 

Which will result in this HTML being generated:

"onclick='callJs("11111112222222");'>"

Here, callJs is being called with a string argument.

In general, when generating dynamic HTML, you have to ensure that the HTML formed is correct. Mostly this means checking that you have ' and " characters around data that should be interpreted as a string, and ensuring that these characters do not end up in the wrong place (For instance, in the middle of the string).

There are tools to help you with this. For instance, see firebug for firefox, or the various inbuilt tools in the other browsers.

Answer 2

I think the problem is how you construct your call. Just change this:

"onclick='callJs('"+ dict.get('itemId') +"');'>" +

Look at the quotes ( ' "+ and here " ' ) +