Javascript / jQuery - 目标表行和传递参数到AJAX脚本问

时间：2017-07-11 01:11:04

标签： javascript jquery html ajax

我有一个显示一些名称和数字的表 - 它在时间限制为20行。我正在使用PHP从数据库中查找一些记录并将其输出到表中。我在此页面顶部有一个按钮，显示一个模式窗口以启动VOIP呼叫。

到目前为止一切顺利 - 出现窗口并且“开始呼叫”按钮处于活动状态，“下一个呼叫”按钮处于非活动状态。我现在需要做的是：

  • 点击“开始呼叫”按钮将发出一个AJAX请求 一个HTTP请求，其中包含一个电话号码 参数
  • 然后“下一个呼叫”按钮变为活动状态并单击该按钮 另一个AJAX请求到下一个人/表行，直到它到达 最后，将下一个电话号码作为参数传递。

我不确定如何获取Start Call按钮以获取第一个表行，然后让Next Call按钮知道哪个是要定位的下一行并传入适当的参数？

$("#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: "<?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);
      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();
    })
})
<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="callBulkContact" 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 -->

1 个答案:

答案 0 :(得分：0)

您可以使用解决方案https://jsfiddle.net/ogwL1yde/ 

$("#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() {
	$(this).attr('selectedRow', '1');
  contactMobile = $($($('table > tbody > tr:nth-child(1) > td:nth-child(2)').children())[0]).attr('contactMobile');
  console.log(contactMobile);
  $('#callNextBulkContact').prop('disabled', false);
  $.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);
      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();
    })
});

$('#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)';

    console.log($($($(row).children())[0]).attr('contactMobile'));
});
<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="callBulkContact" 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 -->

让我解释一下我做了什么。 由于我无法从模式中跟踪要采取的行（联系人号码），因此我使用属性“selectedRow”与开始调用按钮“callBulkContact”＆amp;附加了一个默认值1，表示表的第一行。

我在下一步按钮“callNextBulkContact”中添加了一个点击事件，这将增加属性“selectedRow”附加在开始呼叫按钮“callBulkContact”< / strong>并访问值（联系号码），即在下一行。

我在理解你的问题时创建或提供了解决方案。

相关问题
最新问题