jQuery AJAX polling for JSON response, handling based on AJAX result or JSON content jQuery AJAX polling for JSON response, handling based on AJAX result or JSON content ajax ajax

jQuery AJAX polling for JSON response, handling based on AJAX result or JSON content


You could use a simple timeout to recursively call ajax_request.

success: function(xhr_data) {  console.log(xhr_data);  if (xhr_data.status == 'pending') {    setTimeout(function() { ajax_request(); }, 15000); // wait 15 seconds than call ajax request again  } else {    success(xhr_data);  }}

Stick a counter check around that line and you've got a max number of polls.

if (xhr_data.status == 'pending') {  if (cnt < 6) {    cnt++;    setTimeout(function() { ajax_request(); }, 15000); // wait 15 seconds than call ajax request again  }}

You don't need to do anything in your error function unless you want to put an alert up or something. the simple fact that it error will prevent the success function from being called and possibly triggering another poll.


thank you very much for the function. It is a little bit buggy, but here is the fix. roosteronacid's answer doesn't stop after reaching the 100%, because there is wrong usage of the clearInterval function.

Here is a working function:

$(function (){    var statusElement = $("#status");    // this function will run each 1000 ms until stopped with clearInterval()    var i = setInterval(function ()    {        $.ajax(        {            success: function (json)            {                // progress from 1-100                statusElement.text(json.progress + "%");                // when the worker process is done (reached 100%), stop execution                if (json.progress == 100) clearInterval(i);            },            error: function ()            {                // on error, stop execution                clearInterval(i);            }        });    }, 1000);});

The clearInterval() function is becomming the interval id as parameter and then everything is fine ;-)

CheersNik


Off the top of my head:

$(function (){    // reference cache to speed up the process of querying for the status element    var statusElement = $("#status");    // this function will run each 1000 ms until stopped with clearInterval()    var i = setInterval(function ()    {        $.ajax(        {            success: function (json)            {                // progress from 1-100                statusElement.text(json.progress + "%");                // when the worker process is done (reached 100%), stop execution                if (json.progress == 100) i.clearInterval();            },            error: function ()            {                // on error, stop execution                i.clearInterval();            }        });    }, 1000);});