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