How do I make this setInterval() work right

[cjohnweb]

I have a PHP script that opens a port and asks the server if it is running, with PHP I echo a "Server Running" or an error - I want to access this script with JQuery/AJAX. Then on the website, I have a little box on the side of the screen that pulls the results of this script every 5 seconds or so and shows the user if the server is running.

What I am trying to accomplish is this: As the Javascript is accessing the script to see if the server is running, I want a <span> or <div> to say "Checking..." and then upon the data from the script being placed in it's own div, the "Checking..." goes away, then the process repeats.

I've got everything figured out with the HTML, Here is the JS I have so far:

<script type="text/javascript">
$(document).ready(function(){
  $.ajaxSetup({ cache: false }); // This part addresses an IE bug.  without it, IE will only load the first number and will never refresh
  setInterval(function(){
      $('#serverresultsloading').html('Checking...');
      $('#serverresults').load('ajax-calls/serverstats.php');
      $('#serverresultsloading').html(' &nbsp; ');
    }, 2000);

});
</script>

Inside of setInterval, the call to the php script works great but the message is always ' &nbsp; '. If I change the order of the lines inside setInterval to

      $('#serverresultsloading').html('Checking...');
      $('#serverresults').load('ajax-calls/serverstats.php');
      $('#serverresultsloading').html('   ');

Then after 2 seconds I see "Checking..." but it never goes away.

So how should/can I go about this to get the desired result. I've tried a number of things, such as using wait(); with no results.

Thanks for your help

[LaxLoafer]

The load method is asynchronous, is it not? Although it needs time to retrieve serverstats.php, the call itself should return almost immediately.

So how long does it take to call lines 5, 6 and 7? I suspect it's just a few milliseconds, and then your blank message displays for the remainder of two seconds.

The load method accepts a callback function as an optional parameter, which is executed after the task completes. What happens if you move line 7 to inside the callback?

[cjohnweb]

Hey LaxLoafer, Thanks for taking the time to write. I am primarily a PHP guy, so I will have to search around to figure out how to perform the call back. If I understand you properly, you are saying that I should call line 7 as a call back from line 6, right? That way it would say "Checking..." until line 6 completes. I'll check it out in a moment here.

From what I can tell, lines 5-7 happen very very fast - I don't even see the "Checking..." text on the screen it is so fast - but I have verified that it is in fact looping through.

Thanks for your input. I'll report back here in a bit.

[cjohnweb]

Alright!! It looks like using a call back on line 6 to call line 7 is working perfectly! So it looks like the issue was that every time we itterate through the loop of lines 5-7, it would just go really fast so you never would see the change. Calling like 7 AFTER line 6 is complete gives it just enough time to make it properly visable.

This is the code I now have in the header of the document:

$(document).ready(function(){
  $.ajaxSetup({ cache: false }); // This part addresses an IE bug.  without it, IE will only load the first number and will never refresh
  setInterval(function(){
      $('#serverresultsloading').html('Checking...');
      $('#serverresults').load('ajax-calls/serverstats.php', function() {
        $('#serverresultsloading').html('   ');
        });
      }, 5000);
});

Thank you Lax for the suggestion, that did the trick!

[LaxLoafer]

Exactly! Good to see you've got it working.