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):

enter image description here

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..

Oliver · Accepted Answer · 2012-01-12 12:28:36Z

3

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.

edited Jan 12, 2012 at 12:28

answered Jan 12, 2012 at 12:22

Oliver

11.7k18 gold badges76 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aleja_Vigo Over a year ago

I just pointed the missing quotes, this answer explains better why you need the quotes

Aleja_Vigo · Accepted Answer · 2012-01-12 12:23:55Z

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 " ' ) +

answered Jan 12, 2012 at 12:23

Aleja_Vigo

9807 silver badges12 bronze badges

Collectives™ on Stack Overflow

Html Dynamic Content With Ajax

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related