jquery - 如何重构代码以使 Bootstrap 的模态方法使用回调异步？

Question

我的网站使用 Bootstrap v3.3.0。我正在使用Bootstrap 框架的模态对话框功能。

我编写了一个用于表单提交的 jQuery-AJAX 函数，如下所示:

$('#rebate_request_form').submit(function(e) {  
  $('#rebateModal').modal('hide');
  $('#progressModal').modal('show');   

  var fileInput = $("#receipt_image")[0];  
  var input =  $("#receipt_image").val(); 

  var form = $(this);

  var formdata = false;

  if(window.FormData) {
    formdata = new FormData(form[0]);
  }  

  if(input != '') {
    var ImgSizeInBytes = fileInput.files[0].size;  
    var filename = $('input[type=file]').val().split('\\').pop();
    var customer_id = $('#customer_id').val();
  }  
  if(input!='' && ImgSizeInBytes > 10485760) {
    var trans_id = $('#trans_id').val();  
    var trans_date_dateLists_year_list = $("#trans_date_dateLists_year_list").val();
    var trans_date_dateLists_month_list = $("#trans_date_dateLists_month_list").val();
    var trans_date_dateLists_day_list = $("#trans_date_dateLists_day_list").val();  

    var params = "trans_id="+trans_id+"&trans_date_dateLists_day_list="+trans_date_dateLists_day_list+"&trans_date_dateLists_month_list="+trans_date_dateLists_month_list+"&trans_date_dateLists_year_list="+trans_date_dateLists_year_list+"&file_size="+ImgSizeInBytes+"&file_name="+filename+"&customer_id="+customer_id;
    var method = 'GET';
  } else {
    var params = formdata ? formdata : form.serialize();
    var method = 'POST';
  }  

  var formAction = form.attr('action');

  $.ajax({
    url         : 'rebate_request.php',
    type        : method,    
    cache       : false,
    data        : params,
    contentType : false,
    processData : false,

    success: function(response) {
      $('#progressModal').modal('hide');
      var responseObject = $.parseJSON(response);    
      if(responseObject.error_message) {
        $('#rebateModal').modal('show');  
        if ($(".alert-dismissible")[0]) {
          $('.alert-dismissible').remove();   
        }  
        var htmlString = "<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>"+responseObject.error_message+"</div>";    
        $(htmlString).insertBefore('div.modal-body #rebate_request_form');        
        } else { 
          $('#successModal').modal('show');       
        }
      }
    });
    e.preventDefault();
  });

上述功能工作正常，但有时当收到 error_message 响应时，id 为“rebateModal”的模态不会显示。虽然有时在某​​些浏览器中我不会遇到此问题，但一切都很顺利。

因此，我想重构有关使用 Bootstrap 的函数回调调用模态方法的代码，如下所示:

$('#rebateModal').one('hidden.bs.modal', function () {
  $('#progressModal').one('shown.bs.modal', function () {
  //...more code...
  }).modal('show');
}).modal('hide');

但是我无法以上述方式编写代码，因为我是 Bootstrap 框架和 JS 的新手。

有人可以帮我重构我使用 Bootstrap 函数回调编写的代码吗？

如果您需要有关 Bootstrap 中函数回调的更多信息，请参阅以下链接: Link for Bootstrap Modal functionality

提前致谢。

Answer 1

我认为由于您想要使用回调函数，因此您怀疑提交函数中的调用之间可能存在竞争条件(可能是由于动画所花费的时间):

$('#rebateModal').modal('hide');

以及AJAX成功函数中的调用(当响应包含error_message时):

$('#rebateModal').modal('show');

在这种情况下，一种可能的实现是:

$( '#rebate_request_form' ).submit( function(e) {
    $( '#rebateModal' ).one( 'hidden.bs.modal', function () {
        $('#progressModal').one( 'shown.bs.modal', function () {
            var fileInput = $("#receipt_image")[0];  
            var input =  $("#receipt_image").val(); 

            var form = $( '#rebate_request_form' );

            var formdata = false;

            if( window.FormData ) {
                formdata = new FormData( form[0] );
            }  

            if(input != '') {
                var ImgSizeInBytes = fileInput.files[0].size;  
                var filename = $('input[type=file]').val().split('\\').pop();
                var customer_id = $('#customer_id').val();
            }  
            if(input!='' && ImgSizeInBytes > 10485760) {
                var trans_id = $('#trans_id').val();  
                var trans_date_dateLists_year_list = $("#trans_date_dateLists_year_list").val();
                var trans_date_dateLists_month_list = $("#trans_date_dateLists_month_list").val();
                var trans_date_dateLists_day_list = $("#trans_date_dateLists_day_list").val();  

                var params = "trans_id="+trans_id+"&trans_date_dateLists_day_list="+trans_date_dateLists_day_list+"&trans_date_dateLists_month_list="+trans_date_dateLists_month_list+"&trans_date_dateLists_year_list="+trans_date_dateLists_year_list+"&file_size="+ImgSizeInBytes+"&file_name="+filename+"&customer_id="+customer_id;
                var method = 'GET';
            } else {
                var params = formdata ? formdata : form.serialize();
                var method = 'POST';
            }  

            var formAction = form.attr('action');

            $.ajax( {
                url         : 'rebate_request.php',
                type        : method,    
                cache       : false,
                data        : params,
                contentType : false,
                processData : false,

                success: function(response) {
                    $('#progressModal').one( 'hidden.bs.modal', function () {
                        var responseObject = $.parseJSON(response);    
                        if(responseObject.error_message) {
                            $('#rebateModal').modal('show');  
                            if ($(".alert-dismissible")[0]) {
                                $('.alert-dismissible').remove();   
                            }  
                            var htmlString = "<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>"+responseObject.error_message+"</div>";    
                            $(htmlString).insertBefore('div.modal-body #rebate_request_form');        
                        } else { 
                            $('#successModal').modal('show');       
                        }
                    } ).modal('hide');
                }
            });
        } ).modal( 'show' );
    } ).modal( 'hide' );
    e.preventDefault();
} );

通过仅在隐藏回调完成后继续 AJAX 调用(隐藏动画完成后应该发生)，您可以消除可能的竞争条件，即 AJAX 调用返回错误的速度比模态隐藏动画更快。

这只是一个粗略的实现。您可能还希望将内部代码提取到一个可以通过名称调用的单独函数中。这将允许您包装一些初始逻辑来处理各种场景(例如，如果调用表单提交函数时 #rebateModal 不可见)