title: AJAX Request - Add Additional GET request inner loop
body: <p>I have a button at the top a table that displays a modal window to initiate a VOIP call - the ultimate aim is for it to call the first number in the list and then the 2nd number and so on. I've got it working in that it displays the modal window and allows me to initiate a call to the first number in the list.</p>
  
  <p>I now need to update the script so that if the call is successful it then makes another AJAX request in a loop say every 5 seconds to check the status of the call. If the first call is successful it will return the following which I'm storing in the <code>httpResponseText</code> variable:</p>
  
  <pre><code>Authentication accepted&lt;br/&gt;ActionID = Jo9oACY52cp1
  </code></pre>
  
  <p>I need to parse out the <code>ActionID</code> value - in the above example this would be <code>Jo9oACY52cp1</code> - and then have another GET request to get the status of the current call by passing in the ActionID as follows:</p>
  
  <pre><code>https://www.acme.com/GetStatus.php?ActionID=$action_id
  </code></pre>
  
  <p>This request returns 3 values - ActionID,UID,STATUS - like this:</p>
  
  <pre><code>xshsJ6Y2eLDC,1500806656.160,ANSWER
  </code></pre>
  
  <p>I'm only interested in the 3rd value - STATUS - and I need to keep checking the result of this request until the Status does not equal <code>IN_PROGRESS</code>. At this point I can then enable the Next Call button and start all over again.</p>
  
  <p>Here's my current table and script:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#startBulkContactCall").click(function() {
    $(this).attr('selectedRow', '1');
    contactMobile = $($($('table &gt; tbody &gt; tr:nth-child(1) &gt; td:nth-child(2)').children())[0]).attr('contactMobile');
    contactName = $($($('table &gt; tbody &gt; tr:nth-child(1) &gt; td:nth-child(2)').children())[0]).attr('contactName');
    $('#callNextBulkContact').prop('disabled', true);
    firstURL = "&lt;?php echo $callBackURL ;?&gt;" + defaultCallBackNumber + "&lt;?php echo $contactCallBack ;?&gt;" + contactMobile;
    console.log('firstURL: ' + firstURL);
    $.ajax({
        url: "&lt;?php echo $callBackURL ;?&gt;" + defaultCallBackNumber + "&lt;?php echo $contactCallBack ;?&gt;" + 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 &gt; tbody &gt; tr:nth-child(' + rowNum + ') &gt; td:nth-child(2)';
    contactMobile = $($($(row).children())[0]).attr('contactMobile');
    contactName = $($($(row).children())[0]).attr('contactName');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  
  &lt;button type="button" id="bulkCallButton" class="btn btn-default"&gt;&lt;span class="glyphicon glyphicon-phone"&gt;&lt;/span&gt; Bulk Call&lt;/button&gt;
  
  
  &lt;table class="table table2 table-striped table-bordered" width="100%"&gt;
    &lt;thead&gt;
      &lt;th scope="col"&gt;Name&lt;/th&gt;
      &lt;th scope="col"&gt;Mobile&lt;/th&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr id="D8F49748-212A-42D8-A188-4C23556027FA"&gt;
        &lt;td&gt;&lt;a href="details.php?action=contactLink&amp;contactID=D8F49748-212A-42D8-A188-4C23556027FA"&gt;John Citizen&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="#" contactName="John Citizen" contactMobile="0412345678" data-toggle="modal" data-rec-id="1537" data-target="#contactCallModal"&gt;&lt;span class="glyphicon glyphicon-earphone"&gt;&lt;/span&gt; 0412 345 678&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="EAD2DCCA-7EFA-B048-AD7D-8FCC0ED5EFD7"&gt;
        &lt;td&gt;&lt;a href="details.php?action=contactLink&amp;contactID=EAD2DCCA-7EFA-B048-AD7D-8FCC0ED5EFD7"&gt;Jonah McMahon&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="#" contactName="Jonah McMahon" contactMobile="0490876543" data-toggle="modal" data-rec-id="1538" data-target="#contactCallModal"&gt;&lt;span class="glyphicon glyphicon-earphone"&gt;&lt;/span&gt; 0490 876 543&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="D9AA7744-E138-4A0E-86A2-B8D0CD2007D6"&gt;
        &lt;td&gt;&lt;a href="details.php?action=contactLink&amp;contactID=D9AA7744-E138-4A0E-86A2-B8D0CD2007D6"&gt;Jake Simpson&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="#" contactName="Jake Simpson" contactMobile="0405999666" data-toggle="modal" data-rec-id="1577" data-target="#contactCallModal"&gt;&lt;span class="glyphicon glyphicon-earphone"&gt;&lt;/span&gt; 0405 999 666&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  
  &lt;div class="modal" id="contactBulkCallModal"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Call Contact&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;Calling &lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="ajaxError" class="alert alert-danger text-center" role="alert" style="display:none"&gt;
          Error Response
        &lt;/div&gt;
        &lt;div id="ajaxSuccess" class="alert alert-success text-center" role="alert" style="display:none"&gt;
          Call in Progress
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" id="startBulkContactCall" class="btn btn-success"&gt;Start Call&lt;/button&gt;
          &lt;button type="button" id="callNextBulkContact" class="btn btn-success"&gt;Next&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /.modal-content --&gt;
    &lt;/div&gt;
    &lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;
  &lt;!-- /.modal --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Never had to do such a complex AJAX request (at least for me) and not sure where to start to add the additional request in loop?</p>