AJAX Request - Add an Additional Internal GET Request Request

Question

I have a button at the top of the table that displays a modal window to initiate a VOIP call. The ultimate goal is to call the first number on the list, and then the second number, etc. I have a job in that it displays a modal window and allows me to initiate a call to the first number in the list.

Now I need to update the script so that on a successful call, it then repeats another AJAX request in a loop every 5 seconds to check the status of the call. If the first call httpResponseText , it will return the following, which I save in the httpResponseText variable:

 Authentication accepted<br/>ActionID = Jo9oACY52cp1 

I need to analyze the value of the ActionID - in the example above it would be Jo9oACY52cp1 - and then have another GET request to get the status of the current call by passing it to ActionID as follows:

 https://www.acme.com/GetStatus.php?ActionID=$action_id 

This query returns 3 values ​​- ActionID, UID, STATUS - like this:

 xshsJ6Y2eLDC,1500806656.160,ANSWER 

I'm only interested in the third value - STATUS - and I need to continue to check the result of this query until the status is equal to IN_PROGRESS . At this point, I can turn on the Next Call button and start over.

Here is my current table and script:

 $("#startBulkContactCall").click(function() { $(this).attr('selectedRow', '1'); contactMobile = $($($('table > tbody > tr:nth-child(1) > td:nth-child(2)').children())[0]).attr('contactMobile'); contactName = $($($('table > tbody > tr:nth-child(1) > td:nth-child(2)').children())[0]).attr('contactName'); $('#callNextBulkContact').prop('disabled', true); firstURL = "<?php echo $callBackURL ;?>" + defaultCallBackNumber + "<?php echo $contactCallBack ;?>" + contactMobile; console.log('firstURL: ' + firstURL); $.ajax({ url: "<?php echo $callBackURL ;?>" + defaultCallBackNumber + "<?php echo $contactCallBack ;?>" + contactMobile, data: {}, type: "GET" }) .then(function(data, status, xhr) { var httpStatus = status; var httpResponseCode = (xhr.status); var httpResponseText = (xhr.responseText); $('#ajaxSuccessBulk').html('Call in Progress').show(); $("#startBulkContactCall").prop("disabled", true); $("#callNextBulkContact").prop("disabled", true); }) .fail(function(xhr) { var httpStatus = (xhr.status); var httpResponseCode = (xhr.getAllResponseHeaders); var httpResponseText = (xhr.responseText); var ajaxError = 'There was an error requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText; //make alert visible $('#ajaxError').html(ajaxError).show(); }) }); $('#callNextBulkContact').click(function() { $('#callBulkContact').attr('selectedRow', parseInt($('#callBulkContact').attr('selectedRow')) + 1); var rowNum = parseInt($('#callBulkContact').attr('selectedRow')); var row = 'table > tbody > tr:nth-child(' + rowNum + ') > td:nth-child(2)'; contactMobile = $($($(row).children())[0]).attr('contactMobile'); contactName = $($($(row).children())[0]).attr('contactName'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <button type="button" id="bulkCallButton" class="btn btn-default"><span class="glyphicon glyphicon-phone"></span> Bulk Call</button> <table class="table table2 table-striped table-bordered" width="100%"> <thead> <th scope="col">Name</th> <th scope="col">Mobile</th> </thead> <tbody> <tr id="D8F49748-212A-42D8-A188-4C23556027FA"> <td><a href="details.php?action=contactLink&contactID=D8F49748-212A-42D8-A188-4C23556027FA">John Citizen</a></td> <td><a href="#" contactName="John Citizen" contactMobile="0412345678" data-toggle="modal" data-rec-id="1537" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0412 345 678</a></td> </tr> <tr id="EAD2DCCA-7EFA-B048-AD7D-8FCC0ED5EFD7"> <td><a href="details.php?action=contactLink&contactID=EAD2DCCA-7EFA-B048-AD7D-8FCC0ED5EFD7">Jonah McMahon</a></td> <td><a href="#" contactName="Jonah McMahon" contactMobile="0490876543" data-toggle="modal" data-rec-id="1538" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0490 876 543</a></td> </tr> <tr id="D9AA7744-E138-4A0E-86A2-B8D0CD2007D6"> <td><a href="details.php?action=contactLink&contactID=D9AA7744-E138-4A0E-86A2-B8D0CD2007D6">Jake Simpson</a></td> <td><a href="#" contactName="Jake Simpson" contactMobile="0405999666" data-toggle="modal" data-rec-id="1577" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0405 999 666</a></td> </tr> </tbody> </table> <div class="modal" id="contactBulkCallModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Call Contact</h4> </div> <div class="modal-body"> <p>Calling </p> </div> <div id="ajaxError" class="alert alert-danger text-center" role="alert" style="display:none"> Error Response </div> <div id="ajaxSuccess" class="alert alert-success text-center" role="alert" style="display:none"> Call in Progress </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" id="startBulkContactCall" class="btn btn-success">Start Call</button> <button type="button" id="callNextBulkContact" class="btn btn-success">Next</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> 

Have you ever had to make such a complex AJAX request (at least for me) and don’t know where to start adding an additional request in a loop?

Answer 1

Here is what I would like to do: first, separate code in the functions, this will simplify the work.

startCall should initiate your call, it receives callURL, which ajax should use. It returns a promise that will be resolved after its creation.

monitorCall accepts the callID, and a callback (the third parameter, "failed_tries" is used internally.) It will run a status check with ajax and call itself every 5 seconds until either 5 consecutive failures occur, or until we get the correct state of things. The callback is a regular JS callback with an error and the result as arguments.

getMonitoredCall will join the previous two functions together to make a promise that will be resolved after the call is completed.

getNewCallUrl is used to provide another call. This function will be called before each call to receive a call for the call. There is work for you! It should return a promise that gives the URL as a result.

Finally, loopCalls initiates everything, and as soon as the call is completed, it will call itself again to continue the next call until something works.

 function startCall(callURL){ return $.ajax({ url: callURL, data: {}, type: "GET" }).then(function(data, status, xhr) { var httpStatus = status; var httpResponseCode = (xhr.status); var httpResponseText = (xhr.responseText); $('#ajaxSuccessBulk').html('Call in Progress').show(); $("#startBulkContactCall").prop("disabled", true); $("#callNextBulkContact").prop("disabled", true); return Promise.resolve(xhr.responseText.match(/ActionID = (.+)/)[1]); }) .fail(function(xhr) { var httpStatus = (xhr.status); var httpResponseCode = (xhr.getAllResponseHeaders); var httpResponseText = (xhr.responseText); var ajaxError = 'There was an error requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText; //make alert visible $('#ajaxError').html(ajaxError).show(); }); } function monitorCall(callID,callback,failed_tries){ failed_tries = failed_tries || 0; $.ajax({ url: 'https://www.acme.com/GetStatus.php', data: {ActionID:callID}, type: "GET" }).then(function(data){ if(data && data.split(',')[2] != "IN_PROGRESS"){ callback(null,data); }else{ setTimeout(monitorCall.bind(null,callID,callback,0),5000); } }).fail(function(xhr){ failed_tries++; if(failed_tries>5){ callback("Error trying to get the status, stopping after 5 consecutive tries."); }else{ setTimeout(monitorCall.bind(null,callID,callback,failed_tries),5000); } }); } function getMonitoredCall(callUrl){ return new Promise(function(resolve,reject){ startCall(callUrl).then(function(callID){ monitorCall(callID,function(err,res){ if(err){ reject(err); }else{ resolve(res); } }); }); }); } function getNewCallUrl(){ return $.ajax({ url: "http://getNewCallUrl/", data: {}, type: "GET" }).then(function(data, status, xhr) { //Let presume the request simply returns a call URL. return Promise.resolve(data); }) .fail(function(xhr) { var httpStatus = (xhr.status); var httpResponseCode = (xhr.getAllResponseHeaders); var httpResponseText = (xhr.responseText); var ajaxError = 'There was an error requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText; //make alert visible $('#ajaxError').html(ajaxError).show(); }); } function loopCalls(){ getNewCallUrl().then(function(callUrl){ return getMonitoredCall(callUrl); }).then(function(){setTimeout(loopCalls,5000)}); } loopCalls();