Cannot find the right <div> with selector after loading the HTML

Question

I hope I can find a solution to this one. Here it goes:

After I have submitted my form to add a message to the database, I create a <div> with the load method. After that I do some stuff in the callback function.

When the function to create the new <div> has finished, it returns to the calling function that is supposed to prepend the message to the last inserted <div>.

That's where the problem starts:

I use the selector to find $(someDiv : last), but it puts it in the wrong <div>. So, I know it has something to do with the async process.

I haven't really worked out what I could do to fix this, because now I am not working from a callback function.

If you wanna see a live example The sourcecode is clutterd with debug code in the form of alerts, but you can see what it is doing.

Answer 1

Probably the new div is not being inserted where you think it is. $(someDiv : last) is returning the wrong result because the new div isn't in someDiv, or it isn't at the end. This seems like the kind of thing that Firebug would make easy to debug.

Rather than using the "last" metaclass to select the div, here's a better idea: give the new div an ID and refer to it directly. Or give it a class when you create it, use the class to select it $(".newdiv"), and then clear the class when you're done. Or simply return the new div to the calling function, so it doesn't need to use a selector at all. Sorry, I didn't entirely understand your situation, but I think at least one of these solutions will work.

Answer 2

Did you notice that the first time the value gets added to the first item, and after that it gets added to the previously last item? That might be a clue. Oh, and I got stuck in a loop which added my message 10 times. Looks like your code has timing issues.

Edit: bringing it back to its basics would look something like this: http://kruisit.nl/so/841982/ Hope that helps.

Answer 3

Ajax calls are asynchronous, you should be using a callback function to select loaded data, for example:

$('div').load(url, data, function(data, status) {
   $(someDiv:last).dosomething();
}