Modal Ajax call doesn't replaceWhith data response

Question

I'm facing a bad issue regarding the POST Ajax call. To specify, I've hooked the click event to an id selector of Submit Button, after this I call the POST ajax to Server. To replace only the right tag I use replaceWith method: $('#items').replaceWith(response);

Using debug mode of Chrome, the replace goes well, but if I execute in a straight way (without Debug and Breakpoints), the modal is stuck to a grey background, like in the attached pic.

I'm using Bootstrap4 and 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  
});

Answer 1

I answer myself. According to this thread Twitter bootstrap modal-backdrop doesn't disappear, I was replacing the modal, container. To disappear the modal, after submit, I've forced the modal hiding.

Cheers. 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  

});