jquery - ventana - ¿Cómo reestructurar el código para hacer que los métodos modales de Bootstrap sean asíncronos utilizando devoluciones de llamada?

recargar pagina al cerrar modal bootstrap

Question

Estoy usando Bootstrap v3.3.0 para mi sitio web. Estoy usando la funcionalidad de diálogo modal del marco de Bootstrap .

He escrito una función jQuery-AJAX para el envío de formularios de la siguiente manera:

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

La función anterior funciona correctamente, pero a veces el modal con id "rebateModal" no aparece cuando se recibe error_message en respuesta. Aunque a veces en algunos navegadores no encuentro este problema, todo funciona sin problemas.

Por lo tanto, quiero reestructurar mi código con respecto a llamar a los métodos modales utilizando las funciones de devolución de llamada de Bootstrap de la siguiente manera:

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

Pero no puedo escribir mi código por encima de la moda ya que soy un novato en el framework Bootstrap y JS.

Entonces, ¿alguien puede ayudarme a reestructurar el código que he escrito utilizando las devoluciones de funciones de Bootstrap?

Si necesita información adicional sobre devoluciones de funciones en Bootstrap, consulte el siguiente enlace: Enlace para la funcionalidad Bootstrap Modal

Gracias por adelantado.

Answer 1

Supongo que como quiere utilizar las funciones de devolución de llamada, sospecha que puede haber una condición de carrera entre la llamada en la función de envío (presumiblemente debido al tiempo pasado en animaciones):

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

Y la llamada en la función de éxito de AJAX (cuando la respuesta contiene un error_message):

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

En ese caso, una implementación posible sería:

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

Al continuar con la llamada AJAX después de que se haya realizado la devolución de llamada oculta (que debe ocurrir una vez que se completa la animación oculta), se elimina la posible condición de carrera donde la llamada AJAX retornó con un error más rápido que la animación modal oculta.

Esta es solo una implementación aproximada. Probablemente también desee extraer ese código interno en una función separada a la que pueda llamar por su nombre. Eso le permitiría ajustar una lógica inicial para manejar varios escenarios (por ejemplo, si #rebateModal no está visible cuando se llama a la función de envío de formularios)