CODEWITHSUNDEEP
javascriptjquery
helloworld
helloworld

Reputation: 527

How to call this function automatically

Im using the following function to call an ajax request, and fill certain corresponding divs with the response: 

$( function() {

    $(document).ready(function() {

        var postData = "";

        $.ajax( {
            url : \'functions/ajax_api.php?\',
            type : \'post\',
            data : postData,                
            success : function( resp ) {
                $(\'#id1\').html($(\'#id1\' , resp).html());
                $(\'#id2\').html($(\'#id2\' , resp).html());
            }
        });
           return false;
    });

});

The function works fine. My question is how can I call it automatically every few seconds?

I tried using window.setTimeout(function, 3000) but I couldnt set it up correctly.

Upvotes: 1

Views: 88

Answers (3)

John S
John S

Reputation: 21482

You can use setTimeout() or setInterval, but setInterval may result in multiple simultaneous ajax calls if those calls take too long to respond. That isn't a problem if you call setTimeout() in the ajax success callback.

To use setTimeout(), first wrap your ajax call in a function. You can then add a call to setTimeout() to the ajax success callback. You also need to call the function once to start of the looping.

$(function() {
    function postData() {
        var postData = "";
        $.ajax({
            url: 'functions/ajax_api.php?',
            type: 'post',
            data: postData,                
            success: function(resp) {
                $('#id1').html($('#id1', resp).html());
                $('#id2').html($('#id2', resp).html());

                // Call postData again after 5 seconds.
                setTimeout(function() { postData(); }, 5000);
            }
        });
    }

    // Call postDate the first time to start it off.
    postData();
});

Note: With the call to setTimeout in the success callback, the cycle will break if an ajax call fails. You may want that, but if you want it to act more like setInterval, you can place the call to setTimeout in the complete callback.

Upvotes: 2

The Busy Wizard
The Busy Wizard

Reputation: 1166

Here's some example code that will do it (note that it runs the function when the document loads, and then starts the interval). You can always use clearInterval(refresh_interval) if you need to stop it.

var refresh_interval;

function update_content() {
    $.ajax({
        url : \'functions/ajax_api.php?\',
        type : \'post\',
        data : postData,                
        success : function( resp ) {
            $(\'#id1\').html($(\'#id1\' , resp).html());
            $(\'#id2\').html($(\'#id2\' , resp).html());
        }
    });
}

$(document).ready(function() {
    update_content();
    setInterval(update_content, 3000);
}

The relevant documentation for using intervals is here: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

Though you may want to look into Server Sent Events, it's probably a better solution for what you want.

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

use setInterval(); instead of .setTimeout()

Let me help you a little bit with that

var interval , setItinterval; // just a variables you can change names
interval = function(){
    // ajax code here
}

to run it .. use:

setItinterval = setInterval(interval , 3000);

to stop it .. use

clearInterval(setItinterval);

Make sure to read setInterval for more information.

For Complete answer and Last thing I want to say when using setInterval(); Its better to use visibilitychange to avoid server error , server load or something like that

document.addEventListener('visibilitychange',function(){
    if(document.visibilityState == 'visible'){
        // user view the page
    }else{
        // user not see the page
    }
});

Upvotes: 5

Related Questions