The modal screen remains black on showing AJAX response after modal hide

Question

The following is the HTML code. When I click on Upload Building, the following file selection modal pops up. Once the user selects a file and clicks the upload button on the modal, the modal should close down, send an AJAX query, and then replace the upload button with the HTML response.

# HTML Code
<div class="container-fluid mx-auto">
    <div class="row mainbox" id="input">
        <div class="col-sm-5">
            <button type="button" class="btn btn-secondary btn-sm btn-block" id="btn-upload-file" data-toggle="modal" data-target="#mdl-upload-file">Upload Building</button>
        </div>
    </div>
</div>
<div class="modal fade" id="mdl-upload-file" tabindex="-1" role="dialog" aria-labelledby="uploadFileModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadFileModal">Upload Building Config</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="customFile" accept="application/JSON">
                    <label class="custom-file-label">Choose file...</label>
                    <small id="uploadHelp" class="form-text text-muted">Please upload a valid building configuration JSON file.</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="btn-upload-selected-file">Upload File</button>
            </div>
        </div>
    </div>
</div>

Following is the javascript code to do that.

jQuery('#btn-upload-selected-file').on('click', function() {
    $('#mdl-upload-file').modal('hide');
    if (validBuildingFile) {
        fileObj['build_type'] = 'upload';
        jQuery.ajax({
            type: "POST",
            url: "/build",
            data: JSON.stringify(fileObj),
            dataType : "html",
            contentType: "application/json",
            success: function(response) {
                jQuery('.mainbox').html(response);
            },
            error: function() {
                alert(response);
            }
        });
    }
});

Now, when I use alert instead of jQuery('.mainbox').html(response), the modal closes down successfully. However, when I try to show the response, the black screen of the modal doesn't go away. I tried multiple solutions provided on stack overflow (given below), but none of them worked for me:

$('#mdl-upload-file').hide();
$('#mdl-upload-file').remove();
Set timeout to 5000
$('#modalElement').data('modal', null);

Please help!

you will need to call bootstrap's modal hide function. `$('#mdl-upload-file').modal("hide");` — anees, May 03 '20 at 18:28
I am calling it on the button click, see the javascript code — Milan Jain, May 03 '20 at 18:29
see if that helps https://stackoverflow.com/questions/13177426/how-to-destroy-bootstrap-modal-window-completely — anees, May 03 '20 at 18:30
I tried `$('#modalElement').data('modal', null);` but it didn't work. — Milan Jain, May 03 '20 at 18:33
I just tried all the solutions on that page but none of it worked and I think the reason is they are trying to solve the data-related issue. In my case, modal closes when I use alert but doesn't when I try to post a response. — Milan Jain, May 03 '20 at 18:38
you can simply remove the elements created by modal by your self.. (The backdrop and the modal itself) — anees, May 03 '20 at 18:42

davidkonrad · Accepted Answer · 2020-05-04T04:32:10.483

Just add data-dismiss to your [Upload File] button :

<button type="button" data-dismiss="modal" disabled class="btn btn-primary" id="btn-upload-selected-file">Upload File</button>

And then get rid of the redundant $('#mdl-upload-file').modal('hide'). It is bad practice. Instead you could prevent users from clicking [Upload File] before a file is selected by

$('#customFile').on('change',function(){
  if (this.files.length>0) $('#btn-upload-selected-file').removeAttr('disabled')
})

Have added the disabled attribute to [Upload File] as well.

The modal screen remains black on showing AJAX response after modal hide

1 Answers1