javascript - 使用 ajax 和 foreach 的 Bootstrap 模式问题

Question

我正在尝试使用 BS 模式来呈现带有选择框的表单，并最终通过 ajax 调用更新 DB 中的记录。打开模式的触发器 btn 是一组<i></i>具有相同类名的标签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>

标签： javascriptjqueryajaxforeachbootstrap-modal

Answer 1

每当单击您的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>