Bootstrap Modal JS conflicting with ASP.NET button postback

Question

Bootstrap Modal JS conflicting with ASP.NET button postback

1parkplace opened this issue 10 years ago · 7 comments

It's not throwing any errors in the console, but commenting out the Bootstrap-modal.js and modal manager fixes the issue.

Any idea why this would happen and any setting I can toggle to prevent this from occurring?

Any button I have in a modal that causes a Post Back to ASP.NET will not fire as long as I have Bootstrap-Modal.JS in the page.

Answer 1 · 2014-09-21T20:13:53.000Z

To allow for stacking modals properly this plugin will append the modals to document.body when they are opened. There shouldn't be any issues if the form you want to submit is inside the modal itself. If the modal is inside the form and the submit button is part of the modal, submitting the form won't work because the modal is no longer nested in the form when it is opened.

If for some reason the form cannot be moved to be inside the modal itself that you'll probably have to use a bit of javascript to manually submit the form.

Answer 2 · 2014-09-21T20:20:15.000Z

The button and the form are inside the modal-body.

This plugin does not seem to be compatible with ASP.NET web form applications though. I just looked at the output of the rendered markup and it is producing the modal outside of the ASP.NET

tag for the page. This can't work with ASP.NET, anything involved in posting back needs to exist in the tag of the overall page.

Answer 3 · 2014-09-21T20:30:02.000Z

I don't have any experience with ASP.NET web form applications so you'll have to forgive my lack of knowledge about them. Is it possible the issue can be fixed by setting a different modal container other then body?

$.fn.modal.defaults.manager = '#app'

Answer 4 · 2014-09-21T20:32:20.000Z

Yea! I was just trying that and wanted to report my findings.

Changed manager = 'form' and line 366 and 367 of bootstrap-modal.js to:
var $baseModal = $('

').appendTo('form'),
$baseBackdrop = $('

').appendTo('form');

It's working!

Answer 5 · 2014-09-21T20:34:37.000Z

ASP.NET Web form apps basically put everything inside of a

element, allowing for elements in your pages to post back to the server to update information, thus, anything appended to the body can be for display only, but if it is dynamic in nature, it breaks, causing those items to not have any "form" to post to.

Answer 6 · 2014-09-21T20:58:23.000Z

ah ok, I don't see anything wrong with your solution as long there's only ever one form element on the page. If there's ever two forms on a page you'll run into some issues.

Answer 7 · 2015-09-22T05:25:35.000Z

any other workaround for this?