In this article I will show why submitting an XPage from within a Bootstrap dialog does not work correctly and also discuss some options for working around the issue.
Introduction
The bootstrap modal rocks (In Marky’s opinion) and it can be enhanced with the Bootstrap-Modal extension which gives greater control and more options. But I came across an issue recently whereby I could not “Submit” from within a dialog. Well ok I could submit but none of the fields seemed to be updated.
The Dialog
Initially the bootstrap dialog code sits within the XPage quite happily and it is hidden by CSS.
But what happen when the dialog is displayed on the page? The HTML is manipulated and the modal dialog HTML code is moved within the DOM and apparently outside of the <form> tags.
I do not think that it is intentionally moved outside of the form – what is really happening is that it is being moved to the last entry within the DOM – the following highlights it better – it is moved to the last DOM element within the body
What does this mean?
Well what it means is that then you have a custom control displayed within the Dialog, and you try to hit a submit button from within the dialog, the fields are not “in the form” and therefore are not submitted back to the server. Simple answer once you figure it out (an “oh well no duh” moment)
So what can we do about it?
We have a number of options all of which are to do…….
- Do not submit from a dialog (not always practical)
- Looking at the bootstrap modal API event (http://getbootstrap.com/javascript/#modals-usage) we can see that there is a hidden.bs.modal event with this we know that the modal is closed. Once the modal is closed it is reinserted back into the DOM correctly in the same place as it was originally. Once that happens if the form is submitted then the fields are in the “<form>” tag and we are good to go.
- We can manipulate the form to “re-surround” the whole page including the dialog
- We can insert a new <xp:form> tag within the dialog and submit that one instead http://stackoverflow.com/a/9349329/1171653
- (in this author’s opinion embedded forms are just asking for trouble and should be avoided)
Whichever you prefer to do depends on your circumstances and needs from the code. If anyone has any other suggestions I would love to hear them!
Conclusion
Love Bootstrap, Love the Dialog, but like everything, sometimes you need to get a better understanding of how it works and tweak it a little.
Xomino 
Don’t all of the UI libraries, Bootstrap included, pretty much assume that any sort of form submit within a dialog is done via ajax? Certainly seems using something like jQuery’s $post would be an option here; serialize the fields into an object and post the data?
The Bootstrap modal is far simpler that the dijit one. Of course I am not using jQuery so I am rewriting it in Dojo. The way that XPages and Domino works normally using form tag always has bother me and seems to be a waste of precious resources.
Agreed – way simpler!!
I would like to be able to take the main form and wrap it around the dialog even at submit time with a little jQuery I might be OK with that. But, the ancillary $ fields which also need to be submitted always complicate things
Mark, why don’t you create a JSON REST POST using AJAX to capture the information and post the information to the server. Far easier.
Too many forms – my approach was this
Set a flag to submit=true
Bind to the closed event of the dialog
Hit the submit once closed and back inside the
More generic solution that was as well