使用 ajax 和 foreach 的 Bootstrap 模态问题
issue with Bootstrap modal using ajax and foreach
我正在尝试使用 BS 模式来呈现带有 select 框的表单，并最终通过 ajax 调用更新数据库中的记录。打开模式的触发器 btn 是一组 <i></i> 标签，具有相同的 class 名称 itagbtn 和 data-classschid="some_numbere" 将变量传递给 php 脚本。
因此，我应该通过 ajax 传递给 php 脚本的数据是模态形式中 select 字段 的 值和 点击的第i个标签的data-classschdid的值。
问题是，在 ajax 调用之后，所有记录都会同时更新，而不是只更新被点击的记录。感谢您的帮助。以下是简化代码：
HTML & 模态
<tr>
<td>
<span class="spanClassStatus">
Missed
</span>
<span class="wrapperSpan">
<i class="btn itagbtn" data-classschid="1" data-toggle="modal" data-target="#ModalUpdateClassStatus"></i>
</span>
</td>
</tr>
<tr>
<td>
<span class="spanClassStatus">
Taken
</span>
<span class="wrapperSpan">
<i class="btn itagbtn" data-classschid="2" data-toggle="modal" data-target="#ModalUpdateClassStatus"></i>
</span>
</td>
</tr>
<!-- Modal -->
<div class="modal fade" id="ModalUpdateClassStatus" tabindex="-1" role="dialog" aria-labelledby="modalLabelClassStatus">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modalLabelClassStatus">Update Class Status</h4>
<button type="button" class="close d-block text-danger" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form action="#" method="POST" id="modalForm">
<div class="">
<small>Select a new status for this class</small>
<select name="selected_status_id" id="selected_status_id" required="required">
<option value="" selected="selected">Choose an item</option>
<option value="taken">Taken</option>
<option value="missed">Missed</option>
</select>
</div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw text-primary d-none" id="statusSpinner"></i>
<span class="sr-only">Please wait ...</span>
<button type="submit" id="editClassStatusBtn" class="btn btn-success mt-2" style="font-size:0.9rem;">Update Status</button>
</form>
</div> <!-- end of modal-body -->
</div>
</div>
</div>
JAVASCRIPT
<script>
$( document ).ready(
function(){
$('#ModalUpdateClassStatus').on('submit', function(e){
e.preventDefault();
const itagTriggers=document.querySelectorAll('i[data-classschid]');
itagTriggers.forEach(itag => {
var class_sch_id = itag.getAttribute('data-classschid');
var selected_status_id = $('#selected_status_id').val();
var statusSpinner = $('#statusSpinner');
var spanClassStatus = $(itag).parent().siblings('.spanClassStatus');
statusSpinner.removeClass('d-none');
$('#editClassStatusBtn').prop('disabled', true);
var url = "{{ path('class_schedule_tch_status_update')|escape('js') }}";
var type = "POST";
$.ajax({
url : url,
type: type,
data : {
'selected_status_id': selected_status_id,
'class_sch_id': class_sch_id
},
success: function(returnedMsg) {
if (returnedMsg['status'] == "success") {
$(spanClassStatus).text(returnedMsg['msg']);
}
else if(returnedMsg['status'] == "error"){
//error stuff
}
else{
//unknown error
}
}
});
})
});
});
</script>
每当您的 i 标签被点击时，您都可以将 data-attr 值保存在隐藏输入中，然后使用此隐藏输入值传递给您的 ajax 调用以及引用当前 tr 其中 i 标记已被点击。
演示代码 :
//on click of itag
$(".itagbtn").on("click", function() {
$("[name=classschid]").val($(this).data("classschid")) //add value to hidden input inside modal
})
$('#ModalUpdateClassStatus').on('submit', function(e) {
e.preventDefault();
var class_sch_id = $("[name=classschid]").val(); //get itag value
var selected_status_id = $('#selected_status_id').val();
var statusSpinner = $('#statusSpinner');
var spanClassStatus = $("i[data-classschid=" + class_sch_id + "]").parent().siblings('.spanClassStatus'); ///use it here as well
console.log(class_sch_id)
statusSpinner.removeClass('d-none');
/*$('#editClassStatusBtn').prop('disabled', true);
var url = "{{ path('class_schedule_tch_status_update')|escape('js') }}";
var type = "POST";
$.ajax({
url: url,
type: type,
data: {
'selected_status_id': selected_status_id,
'class_sch_id': class_sch_id
},
success: function(returnedMsg) {
if (returnedMsg['status'] == "success") {*/
$(spanClassStatus).text("ok ok"); //returnedMsg['msg']
/*} else if (returnedMsg['status'] == "error") {
//error stuff
} else {
//unknown error
}
}
});*/
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table>
<tr>
<td>
<span class="spanClassStatus">
Missed
</span>
<span class="wrapperSpan">
<i class="btn itagbtn" data-classschid="1" data-toggle="modal" data-target="#ModalUpdateClassStatus">Click</i>
</span>
</td>
</tr>
<tr>
<td>
<span class="spanClassStatus">
Taken
</span>
<span class="wrapperSpan">
<i class="btn itagbtn" data-classschid="2" data-toggle="modal" data-target="#ModalUpdateClassStatus">Click</i>
</span>
</td>
</tr>
<table>
<!-- Modal -->
<div class="modal fade" id="ModalUpdateClassStatus" tabindex="-1" role="dialog" aria-labelledby="modalLabelClassStatus">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modalLabelClassStatus">Update Class Status</h4>
<button type="button" class="close d-block text-danger" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form action="#" method="POST" id="modalForm">
<div class="">
<small>Select a new status for this class</small>
<select name="selected_status_id" id="selected_status_id" required="required">
<option value="" selected="selected">Choose an item</option>
<option value="taken">Taken</option>
<option value="missed">Missed</option>
</select>
<!--added this hidden input-->
<input type="hidden" name="classschid">
</div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw text-primary d-none" id="statusSpinner"></i>
<span class="sr-only">Please wait ...</span>
<button type="submit" id="editClassStatusBtn" class="btn btn-success mt-2" style="font-size:0.9rem;">Update Status</button>
</form>
</div>
<!-- end of modal-body -->
</div>
</div>
</div>
我正在尝试使用 BS 模式来呈现带有 select 框的表单，并最终通过 ajax 调用更新数据库中的记录。打开模式的触发器 btn 是一组 <i></i> 标签，具有相同的 class 名称 itagbtn 和 data-classschid="some_numbere" 将变量传递给 php 脚本。
因此，我应该通过 ajax 传递给 php 脚本的数据是模态形式中 select 字段 的 值和 点击的第i个标签的data-classschdid的值。
问题是，在 ajax 调用之后，所有记录都会同时更新，而不是只更新被点击的记录。感谢您的帮助。以下是简化代码：
HTML & 模态
<tr>
<td>
<span class="spanClassStatus">
Missed
</span>
<span class="wrapperSpan">
<i class="btn itagbtn" data-classschid="1" data-toggle="modal" data-target="#ModalUpdateClassStatus"></i>
</span>
</td>
</tr>
<tr>
<td>
<span class="spanClassStatus">
Taken
</span>
<span class="wrapperSpan">
<i class="btn itagbtn" data-classschid="2" data-toggle="modal" data-target="#ModalUpdateClassStatus"></i>
</span>
</td>
</tr>
<!-- Modal -->
<div class="modal fade" id="ModalUpdateClassStatus" tabindex="-1" role="dialog" aria-labelledby="modalLabelClassStatus">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modalLabelClassStatus">Update Class Status</h4>
<button type="button" class="close d-block text-danger" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form action="#" method="POST" id="modalForm">
<div class="">
<small>Select a new status for this class</small>
<select name="selected_status_id" id="selected_status_id" required="required">
<option value="" selected="selected">Choose an item</option>
<option value="taken">Taken</option>
<option value="missed">Missed</option>
</select>
</div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw text-primary d-none" id="statusSpinner"></i>
<span class="sr-only">Please wait ...</span>
<button type="submit" id="editClassStatusBtn" class="btn btn-success mt-2" style="font-size:0.9rem;">Update Status</button>
</form>
</div> <!-- end of modal-body -->
</div>
</div>
</div>
JAVASCRIPT
<script>
$( document ).ready(
function(){
$('#ModalUpdateClassStatus').on('submit', function(e){
e.preventDefault();
const itagTriggers=document.querySelectorAll('i[data-classschid]');
itagTriggers.forEach(itag => {
var class_sch_id = itag.getAttribute('data-classschid');
var selected_status_id = $('#selected_status_id').val();
var statusSpinner = $('#statusSpinner');
var spanClassStatus = $(itag).parent().siblings('.spanClassStatus');
statusSpinner.removeClass('d-none');
$('#editClassStatusBtn').prop('disabled', true);
var url = "{{ path('class_schedule_tch_status_update')|escape('js') }}";
var type = "POST";
$.ajax({
url : url,
type: type,
data : {
'selected_status_id': selected_status_id,
'class_sch_id': class_sch_id
},
success: function(returnedMsg) {
if (returnedMsg['status'] == "success") {
$(spanClassStatus).text(returnedMsg['msg']);
}
else if(returnedMsg['status'] == "error"){
//error stuff
}
else{
//unknown error
}
}
});
})
});
});
</script>
每当您的 i 标签被点击时，您都可以将 data-attr 值保存在隐藏输入中，然后使用此隐藏输入值传递给您的 ajax 调用以及引用当前 tr 其中 i 标记已被点击。
演示代码 :
//on click of itag
$(".itagbtn").on("click", function() {
$("[name=classschid]").val($(this).data("classschid")) //add value to hidden input inside modal
})
$('#ModalUpdateClassStatus').on('submit', function(e) {
e.preventDefault();
var class_sch_id = $("[name=classschid]").val(); //get itag value
var selected_status_id = $('#selected_status_id').val();
var statusSpinner = $('#statusSpinner');
var spanClassStatus = $("i[data-classschid=" + class_sch_id + "]").parent().siblings('.spanClassStatus'); ///use it here as well
console.log(class_sch_id)
statusSpinner.removeClass('d-none');
/*$('#editClassStatusBtn').prop('disabled', true);
var url = "{{ path('class_schedule_tch_status_update')|escape('js') }}";
var type = "POST";
$.ajax({
url: url,
type: type,
data: {
'selected_status_id': selected_status_id,
'class_sch_id': class_sch_id
},
success: function(returnedMsg) {
if (returnedMsg['status'] == "success") {*/
$(spanClassStatus).text("ok ok"); //returnedMsg['msg']
/*} else if (returnedMsg['status'] == "error") {
//error stuff
} else {
//unknown error
}
}
});*/
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table>
<tr>
<td>
<span class="spanClassStatus">
Missed
</span>
<span class="wrapperSpan">
<i class="btn itagbtn" data-classschid="1" data-toggle="modal" data-target="#ModalUpdateClassStatus">Click</i>
</span>
</td>
</tr>
<tr>
<td>
<span class="spanClassStatus">
Taken
</span>
<span class="wrapperSpan">
<i class="btn itagbtn" data-classschid="2" data-toggle="modal" data-target="#ModalUpdateClassStatus">Click</i>
</span>
</td>
</tr>
<table>
<!-- Modal -->
<div class="modal fade" id="ModalUpdateClassStatus" tabindex="-1" role="dialog" aria-labelledby="modalLabelClassStatus">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modalLabelClassStatus">Update Class Status</h4>
<button type="button" class="close d-block text-danger" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form action="#" method="POST" id="modalForm">
<div class="">
<small>Select a new status for this class</small>
<select name="selected_status_id" id="selected_status_id" required="required">
<option value="" selected="selected">Choose an item</option>
<option value="taken">Taken</option>
<option value="missed">Missed</option>
</select>
<!--added this hidden input-->
<input type="hidden" name="classschid">
</div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw text-primary d-none" id="statusSpinner"></i>
<span class="sr-only">Please wait ...</span>
<button type="submit" id="editClassStatusBtn" class="btn btn-success mt-2" style="font-size:0.9rem;">Update Status</button>
</form>
</div>
<!-- end of modal-body -->
</div>
</div>
</div>