AJAX + jQUERY: load div instantly, then refresh every X seconds

Question

I'm using jQUERY+AJAX to refresh a couple of divs every X seconds. I'd like to know what would be the way to load these divs immediately (for the first time) after the page was loaded and then wait (for eg. 30 seconds) for every refresh. I've seen around that you name a function and then call the refresh. The truth is that I can't figure it out how to work it out with my code.

Here are my lines of code:

// <![CDATA[
    $(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() {

    //DIVs that are being loaded
    $('#item01_tobeloaded').load('items/item01.php');
    $('#item02_tobeloaded').load('items/item02.php');

 }, 30000); // the "30000" here refers to the time to refresh the div. it is in milliseconds.

    });
    // ]]>

Any help will be really appreciated :)

Thanks!

Answer 1

<script type="text/javascript">
     $(document).ready(function() {
       $("#refresh").load("refresh.php");
       var refreshId = setInterval(function() {
          $("#refresh").load('refresh.php?' + 1*new Date());
       }, 1000);
    });
</script>

This little script loads and refreshes the div 'refresh' continuously, you can adjust it to your needs by changing 1000 to whatever value you need. 1000 will refresh it every second.

This line

$(document).ready(function() {
$("#refresh").load("refresh.php");

loads yor content on document ready, afterwards you can stick with your code