1

I have a div being populated through the $.load() method upon click. I then make this div append to body as a pop-up (kind of like a modal popup). On each click, the content of the div is changed.

The Problem

It so happens that the whole populating mechanism takes around 1.5 to 2 seconds. There is no problem if I click just once. But if I click another time, the div pops up with the old content and then within the next 500 milliseconds or so the new content is loaded. So the user gets to see both the old and new content which I want to avoid.

What I Tried

(1) The first thing that came to mind was to use a setTimeout() function to run after 2 seconds. 

$('div#temp').load('somepage.php'); setTimeout(function(){ html = $('div#temp').html(); }, 2000); $('div#popup').html(html).appendTo('body');

This does the work but it's not reliable. There is no guarantee that the new content will be loaded within 2 seconds. It could take 3 or more seconds too. Hardcoding a value more than 2 seconds isn't good too as it seems like eternity.

(2) The next thing I tried was to use a while loop by using the following:

var html = ''; $('div#temp').load('somepage.php'); html = $('div#temp').html(); while(html == '') { html = $('div#temp').html(); } $('div#popup').html(html).appendTo('body');

In the end this works, but for some reason it hangs the browser for a good 8-10 seconds before popping up the div

So clearly, both the alternatives have some drawback or the other. I'm hoping there might be some other way around this which I'm not aware of?

Improve this question
5
  • 1
    The reason the while loop hangs your browser is both the javascript code and your browser UI run in the same thread. In other words, if one of them has code running for a long time without giving control to the other, it will hang. What I'm not sure is how it actually worked after the hang... Commented Apr 12, 2013 at 13:13
  • Even if they didn't run in the same thread, your while loop is a "busy loop", which means it will use 100% cpu while it's active, since it keeps running the same code without sleeping or letting the browser sleep Commented Apr 12, 2013 at 13:15
  • or even letting the browser process the AJAX callback - like you, I'm mystified how that ever worked at all. Commented Apr 12, 2013 at 13:15
  • @dequis It does give me an alert box with continue/wait, debug, and stop options. On clicking continue the div pops up Commented Apr 12, 2013 at 13:23
  • 1
    @asprin ah, that explains it - the browser's "watchdog timer" gets in the way and allows the AJAX call to complete and then update the DOM, thus allowing the while loop to terminate. Commented Apr 12, 2013 at 13:26

3 Answers 3

Reset to default
2

Have you tried using the complete callback of $.load?
.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

$('div#temp').load('somepage.php',function(responseText){ $('div#popup').html(responseText).appendTo('body'); });

And if the old content is still showing before the new content you can hide the old content first. Then you would not really need a temp div to store the data.

$('div#popup').fadeOut(function(){ $('div#popup').load('somepage.php',function(){ $(this).fadeIn(); }); });
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Just a note: When you do a .load(), it will automatically fill the calling element with the response and the parse the contents into elements. Doing it again into the popup is not required. Totally preferable to use get instead for your case.
1

I suggest you popup the div only after the content has been loaded:

$.get('somepage.php', function(data) { $('div#popup').html(data).appendTo('body'); });
Improve this answer

6 Comments

I suggest he doesn't, it'll appear unresponsive and lead to the user clicking multiple times.
first rule of UI design - always give the user feedback on interaction events as soon as possible
@Alnitak - Yes, it'll be good to add something to notify the user that loading is in progress..
+1. I sometimes tend to over analyze things and pretty basic stuff elude me at such times.
@Alnitak Yep. I'm aware of that. That's why I've a loading icon added too.
|
1

It sounds like you just need to erase the contents of the popup div (and maybe put a "loading..." message into it) before you start the AJAX call.

Also, use the completion callback parameter to .load to trigger the subsequent update to the DOM.

$('#popup').html('loading...'); $.get('somepage.php', function(content) { $('#popup').html(content); });

You should never poll the DOM or otherwise put the JS interpreter into a "busy loop" - it'll make the browser unresponsive.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.