jquery load problem

Question

I'm having a problem where a jquery load function wipes out the dom element that it is targeted at.

popup_content.load('form.html #print_options1', function() {popup_content.fadeIn();});

when popup_content is a div targeted by jquery. A jquery load was previously used to load content into this div without problems. This time, though, the entire div just vanishes.

However, if I add a single javascript alert statement after that call, like so:

popup_content.load('form.html #print_options1', function() {popup_content.fadeIn();}); 
alert('after call');

then it works(after displaying the annnoying alert, of course). it just seems like some timing issue. has anyone encountered this kind of problem and if so, are there any solutions? any help would be appreciated! thanks!

Answer 1

Is it possible that the popup_content reference gets re-assigned? The alert() call has another effect you may not be considering, the time it takes to get rid of allows that ajax call to finish and the content to be loaded, making that function() {popup_content.fadeIn();} happen before popup_content changes. Without the alert, it'll happen sometime later...has something happened to your variable by then?

Try instead to not rely on that reference if that's the case, use this instead:

popup_content.load('form.html #print_options1', function() {
  $(this).fadeIn();
});