CODEWITHSUNDEEP
javascriptjqueryhtml
Joshua Ledgard
Joshua Ledgard

Reputation: 51

Why would .append randomly fail in jquery?

I'm using jquery to add elements to a blank list.

on the page I have:

<ul id="myList">
</ul>

and I go through a loop like this in the script that's called from a dynamically created event handler. (It's "onDrop" of a list item having been sorted with a drag operation) 

var myListItemHTML;
for (var i = 0 ; i < 5 ; i++)
{
  myListItemHTML += '<li id=listItem'+i+'>This is item number'+i+'</li>';
}

$('#myList').append(myListItemHTML);

and if I check after...

if ($('#myList li').length == 0 )
{
  alert('Going to crash now since I'm expecting list items')
}

roughly 95% of the time the list is populated, but about 5% of the time I hit my alert that's going to cause an exception later.

Has anyone run into this? Is there a callback or way to know when/if the append really happens?

Upvotes: 4

Views: 1875

Answers (4)

Ekster
Ekster

Reputation: 353

In my experience, if the script in which the prepend function is used in the -tag, it will not work because the script is loaded before the DOM is ready.

To avoid this kind frustration, is a good habit to place your javascript before the tag.

Upvotes: 1

Joshua Ledgard
Joshua Ledgard

Reputation: 51

What I've learned is that I can't trust jquery for DOM manipulation called through dynamically created events. I welcome someone to prove me wrong, but this approach:

addListItem = function (itemID, itemText)
{
   var li = document.createElement('li'); 
   li.setAttribute("id", itemID);

   var liText = document.createTextNode(itemText);
   li.appendChild(goalTextNode);

   document.getElementById('myList').appendChild(li); 

}

for (var i = 0 ; i < 5 ; i++)
{
  addListItem('listItem'+i, 'Item Text'+i);
}

will work 100% of the time and never fail.

Upvotes: 1

Chris Allen Lane
Chris Allen Lane

Reputation: 6452

This is a bit of a longshot, because I'm making an assumption about your code beyond what was posted. Here goes:

I had a problem with some code once, which worked perfectly in all Browsers except Chrome, wherein it would fail randomly and seemingly without cause.

My problem, ultimately, was that Chrome was actually executing my JavaScript too fast, and that it was throwing off some of the timing in some of the AJAX calls that were being made earlier.

My code was such that AJAX event A triggered, which then passed data to AJAX event B. In Chrome only, though, I found that event B was on occasion occurring before event A, and that was the error condition.

If I recall, I think the solution was to force one key AJAX request to be made synchronously, though that should be used with care. Please see: http://api.jquery.com/jQuery.ajaxSetup/

I hope that's not too vague to be helpful. Good luck!

Upvotes: 1

switz
switz

Reputation: 25188

var myListItemHTML;
for (var i = 0 ; i < 5 ; i++)
{
  $('#myList').append('<li id=listItem'+i+'>This is item number'+i+'</li>');
}

Try just appending inside the for loop.

if ($('#myList li').length == 0 )
{
  alert('Going to crash now since I\'m expecting list items')
}

You need a \ before the ' so it doesn't conflict.

edit: jsfiddle that shows "undefined" http://jsfiddle.net/gyEre/1/

Upvotes: 1

Related Questions