title: Javascript/jQuery - target table row and pass parameters to AJAX script Ask
body: <p>I have a table that displays some names and numbers - it is limited to 20 rows at at time. I'm using PHP to find some records from the database and output them in the table. I have a button at the top of this page that displays a modal window to initiate a VOIP call.</p>
  
  <p>So far so good - the window appears and the Start Call button is active and the Next Call button is inactive. What I now need to happen is as follows:</p>
  
  <ul>
  <li>clicking the Start Call button will make an AJAX request that makes
  an HTTP request which includes the phone number as one of the
  parameters</li>
  <li>the Next Call button then becomes active and clicking that will make
  another AJAX request to the next person/table row until it reaches
  the end, passing in the next phone number as a parameter.</li>
  </ul>
  
  <p>I'm not sure how to get the Start Call button to get the first table row and then have the Next Call button know which is the next row to target and pass in the appropriate parameters?</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>$("#bulkCallButton").click(function() {
    //hide error/success alerts if previously showing 
    $("#ajaxError").hide();
    $("#ajaxSuccess").hide();
    $("#callBulkContact").prop("disabled", false);
    $("#callNextBulkContact").prop("disabled", true);
    $(contactBulkCallModal).modal();
  });
  
  
  $("#callBulkContact").click(function() {
    $.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);
        console.log('httpStatus: ' + httpStatus);
        console.log('httpResponseCode: ' + httpResponseCode);
        console.log('httpResponseText: ' + httpResponseText);
        $('#ajaxSuccess').html('Call in Progress').show();
        $("#callContact1").prop("disabled", true);
      })
      .fail(function(xhr) {
        var httpStatus = (xhr.status);
        var httpResponseCode = (xhr.getAllResponseHeaders);
        var httpResponseText = (xhr.responseText);
        var ajaxError = 'There was an requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText;
        console.log('httpStatus: ' + httpStatus);
        console.log('httpResponseCode: ' + httpResponseCode);
        console.log('httpResponseText: ' + httpResponseText);
        //make alert visible 
        $('#ajaxError').html(ajaxError).show();
      })
  })</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="callBulkContact" 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>