时间戳

首页 > 解决方案 > 模态 Ajax 调用不替换数据响应

jquery - 模态 Ajax 调用不替换数据响应

问题描述

我面临一个关于 POST Ajax 调用的坏问题。为了指定，我将点击事件挂钩到提交按钮的 id 选择器，之后我将 POST ajax 调用到服务器。要仅替换正确的标签，我使用 replaceWith 方法：$('#items').replaceWith(response);

使用 Chrome 的调试模式，替换很顺利，但如果我直接执行（没有调试和断点），模式会卡在灰色背景上，如附图所示。

模态卡住，不释放控制

我正在使用 Bootstrap4 和 jQuery 1.12。

 $(document).on("click", '#modalSubmit', function(event) {

    event.preventDefault();
    var data = $('form').serialize();
    data += '&addGestione=true';
    //$.post(URL, data, replaceGestione);
    $.ajax({
        type: "POST",
        url: URL,
        data: data,
        success: function(response) {
            $('#gestioneModal').modal('hide')
            //$('#items').remove();  
            $('#items').replaceWith(response);
        }
    }).done(function(response) {
 
        $(document).ajaxComplete(function() {
            datepickerReload();
        });
        $(document).ajaxStop(function() {
            datepickerReload();
        });
        $('#gestioneModal').modal('hide')
 
    });
 
    $('.it-date-datepicker').datepicker({
        inputFormat: ["dd/MM/yyyy"],
        outputFormat: 'dd/MM/yyyy',
    });

    return false; // required to block normal submit since you used ajax  
});

标签： jqueryajaxbootstrap-4bootstrap-modal

解决方案

我自己回答。根据这个线程Twitter bootstrap modal-backdrop 不会消失，我正在替换模态容器。为了使模态消失，提交后，我强制隐藏模态。

干杯。F。

$(document).on("click", '#modalSubmit', function(event) {

event.preventDefault();
var data = $('form').serialize();
data += '&addGestione=true';
//$.post(URL, data, replaceGestione);
var richiesta = $.ajax({
    type: "POST",
    url: URL,
    data: data,
    success: function(response) {
        $('#gestioneModal').modal('hide')
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
        $('#items').replaceWith(response);
    } 

    }); 
    
    richiesta.done(function(response) {
    $(document).ajaxComplete(function() {
        datepickerReload();
        showHide();
    });
    $(document).ajaxStop(function() {
        datepickerReload();
    });
    
});



$('.it-date-datepicker').datepicker({
    inputFormat: ["dd/MM/yyyy"],
    outputFormat: 'dd/MM/yyyy',
});

return false; // required to block normal submit since you used ajax

});

推荐阅读