View page is locked/disabled after closing Bootstrap modal dialog

Question

This problem is driving me crazy now. Here is the sequence and code I am doing:

I am using Backbone (Chaplin) JS, jQuery and Handlebars

1. Display a table with multiple rows in the view which is rendered via Handlebar template
2. Launch a Bootstrap modal dialog from the page

3. Fill some information, click the "Save" button on the modal dialog.

4. In the button click handler function, insert the record for a table row to model data something like:

   this.model.tabledata.push(new_record);

   this.render();

5. Call render to refresh the view with updated model data

Result and Problem:

• The table is refreshed with the new record
• The modal dialog is disappeared
• The view is LOCKED like greyed out and does not respond to click anymore.

What is the issue and how to fix? Please help!

Answer 1

Finally I figured out a way to fix my problem. The code is as following:

$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function () {
    _this.render();
})

Basically I need to wait for the dialog completely closed before rendering the parent view page. Not sure exactly why but this works. Hopefully somebody can help answer. I guess this has something to do with fired event sequence.

Answer 2

I had similar problem. I found, that bootstrap on modal show create a div-layer with a class "modal-backdrop". so if you want to return to the page and enable the page again do the following:

• hide the modal with: $('#modalId').modal('hide');

• remove the div layer: $(".modal-backdrop").remove();

I hope this answer helps