0
私はいくつかの名前と数字を表示するテーブルを持っています - それは20行に制限されています。私はデータベースからいくつかのレコードを検索し、それらをテーブルに出力するためにPHPを使用しています。このページの上部には、VOIPコールを開始するためのモーダルウィンドウを表示するボタンがあります。Javascript/jQuery - ターゲットテーブルの行とAJAXスクリプトにパラメータを渡す質問
これまでのところ、ウィンドウが表示され、[コール開始]ボタンがアクティブになっていて、[次のコール]ボタンはアクティブではありません。 パラメータ
- ：次のように私は今起こる必要があることですアクティブになり、それをクリックすると、 次の人/テーブル行への別のAJAXリクエストが に到達し、次の電話番号をパラメータとして渡します。
私は最初のテーブル行を取得するための[開始]ボタンを取得する方法がわかりませんし、[次の呼び出し]ボタンで対象となる次の行がわかり、適切なパラメータを渡します。ここで
$("#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">×</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 -->