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