Run ajax for a fixed time if proper response is not received

Question

function submitForm(){
    var urlid = document.getElementById("actionUrl").value;
    jQuery.support.cors = true;

    setTimeout(function(){
      $.ajax({
        url:urlid,
        type : "GET",
        crossDomain : true,
        data:transId,
        success:function(data)
        {
            alert(data);
        },

        error: function (xhr, ajaxOptions, thrownError)
        {
            console.log(thrownError);
            alert(xhr.status);
            alert(ajaxOptions);
            alert(thrownError);
        }
        });
    },1000);
};

I have an ajax call that receives one among the three responses 'true', 'false' or 'pending' from the controller. The ajax should terminate if the response is 'true' or 'false' . If the response is 'pending' the ajax should poll the controller for another 20 seconds. I should be able to pass the response to a different javascript function. Is it possible to do this in ajax/jquery ? I am new to this technology.

Answer 1

Basically extending Michael's answer

function checkData (data) {
  if (data == 'true')         // do something
  else if (data == 'false')   // do something else
  else if (data == 'pending') {
    if ( !pollServer.stopPoll ) {
      ajaxPoll = setTimeout(pollServer, 1000);
    } else {
      // polled long enough
    }
  }
}

function pollServer() {
  $.ajax({
    url:         pollServer.urlid,
    type:        "GET",
    crossDomain: true,
    data:        transId,
    success:     checkData
    error:       // error function
  });
}

function submitForm(){
  var urlid = document.getElementById("actionUrl").value;
  jQuery.support.cors = true;
  pollServer.urlid = urlid;
  pollServer.stopPoll = false;
  ajaxPoll = setTimeout(pollServer, 1000);
  setTimeout(function() {
    pollServer.stopPoll = true;
  }, 20000);
}

Answer 2

var ajaxtimeout = setTimeout(function(){...}

setTimeout(function() { clearTimeout(ajaxtimeout); }, 20000);

Oh, also you'll have to call .abort() on your request object, but I'm too lazy to rewrite your code :)

Answer 3

Something like this ought to do it:

function checkData (data) {
  if (data == 'true')         // do something
  else if (data == 'false')   // do something else
  else if (data == 'pending') {
    setTimeout(pollServer, 20000);
  }
}

function pollServer() {
   var urlid = document.getElementById("actionUrl").value;
   $.ajax({
    url:         urlid,
    type:        "GET",
    crossDomain: true,
    data:        transId,
    success:     checkData
    error:       // error function
  });
}

function submitForm(){
   jQuery.support.cors = true;
   pollServer();
}

Answer 4

there is a built in jQuery ajax timeout property, please use this: http://api.jquery.com/jQuery.ajax/

timeout
Type: Number
Set a timeout (in milliseconds) for the request.

example here: Determine if $.ajax error is a timeout

Answer 5

    function aftersuccess(data)
    {
        if(data=="success"){
            document.getElementById("demo2").innerHTML = data;
            }
        else if(data=="false"){
            document.getElementById("demo2").innerHTML = data; }
        else{
            setTimeout(submitForm,1000);
            document.getElementById("demo2").innerHTML = data;
            }
    }

    var xhr;
    var i = 0;
    var transId; 
    function submitForm(){
        jQuery.support.cors = true;
        var urlid = document.getElementById("actionUrl").value;
        transId = document.getElementById("transId").value;
        transId = 'transId='+transId;

        xhr = $.ajax({
        url:urlid,
        type : "GET",
        crossDomain : true,
        data:transId,
        success:function(data)
        {
            i = i+1;
            aftersuccess(data);
        },
        error: function (xhr, ajaxOptions, thrownError)
        {
            console.log(arguments);
            console.log(xhr.status);
            console.log(ajaxOptions);
            console.log(thrownError);
            alert(xhr.status);
            alert(ajaxOptions);
            alert(thrownError);
        }
        });

        if(i>20){
            xhr.abort();
            alert("Failed :  "+transId)
            window.location.href = "random url";
        }

};

Initialised a variable i . Each time the ajax is called it is incremented. Upon reaching a particular value , i abort the ajax call and redirect the url.

Answer 6

The setTimeOut() method is used to call a JS function after a specified amount of time.As I understand the requirement here is to keep the connection active as long as the response message is "pending".

The codes suggested above will send a new Ajax request if the response message from the server is "pending".

I'll suggest an alternative server side solution to this which worked for me in the past. You will only send back a response if the operation has succeeded or failed and configure a request timeout for that controller say (20 seconds in your case).

Hope this helps.