Backbone Marionette - transitioning between modal dialogs

Question

I have a Marionette.CompositeView that shows a modal dialog on click.

events: {
  'click #my-new-view' : 'viewMyNewView'
}
...
viewMyNewView: function() {
  var newView = new MyNewView();
  App.modal.show(newView);
}

That view in turn shows another modal dialog on click in the same way.

(_.extend(Marionette.Region.prototype, Backbone.Events, {...})

App.modal functionality is part of backbone.marionette.js, somewhere in the show method things go wrong. Tricky to pinpoint where because when I step through and debug, with a breakpoint on the last line in the show method (setting this.currentView = view;) then the 2nd modal displays fine and doesn't disappear even after continue. Without a breakpoint, the 2nd modal disappears every time. So there may be some timing issue.

When I click to the 2nd dialog, I see it for an instant formatted correctly then it disappears; looks like something is killing it shortly after it renders and I'm left with a black overlay over my single page app where the modal should be.

I've tried adding calls to e.stopPropagation() and e.preventDefault() in both click handlers but they don't solve the issue.

The first modal is a list of items, the 2nd modal is a detail view of one of the items so the list has to render first, then the click event handler to pop the 2nd modal is attached to the table rows.

First modal is part of a Marionette.CompositeView that is a region on a Marionette.Layout.

Answer 1

Sounds like when you click into the 2nd dialog, the first one closes. If so, the code that closes the first dialog may be closing both. You could add an optional argument to the close function that verifies the ID of the element to close.

Another solution, you could switch to just one modal. Deliver the item detail view as JSON and template along with the list view. Then on click, instead of calling a new modal, just render & display within the existing modal.

Answer 2

It sounds like you are using the Twitter Bootstrap modal plugin? I ran into what sounds like the same problem working with it.

The problem essentially is that if you call .modal('hide') and then .modal('show') in rapid succession it gets confused -- I believe this is because the CSS transitions it uses aren't complete yet and show get's called while it is still transitioning. My solution was a little more complex but a simple way around this would be to listen to the 'hidden.bs.modal' event before triggering show. As per the docs:

"This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).