bootstrap-modal icon indicating copy to clipboard operation
bootstrap-modal copied to clipboard

Bootstrap Modal JS conflicting with ASP.NET button postback

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

1parkplace avatar Sep 21 '14 20:09 1parkplace

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.

jschr avatar Sep 21 '14 20:09 jschr

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.

1parkplace avatar Sep 21 '14 20:09 1parkplace

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'

jschr avatar Sep 21 '14 20:09 jschr

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!

1parkplace avatar Sep 21 '14 20:09 1parkplace

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.

1parkplace avatar Sep 21 '14 20:09 1parkplace

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.

jschr avatar Sep 21 '14 20:09 jschr

any other workaround for this?

ivanlewis avatar Sep 22 '15 05:09 ivanlewis