JQuery’s Dialog and Form Problems
Posted by coreycoogan on December 1, 2010
Sometimes there is a need to put certain elements within a FORM in a JQuery Dialog. This sounds simple enough, but unfortunately when the dialog is displayed, the form elements can get lost as they get added outside the Form’s DOM.
The solution is simple, append the dialog element to the form. Here’s an example of how it’s done.
<script>
$(document).ready(function() {
//define the dialog for later use
var dlg = $('#AddressVerification').dialog(
{
autoOpen: false,
closeOnEscape: false,
modal: true,
width: 550
}
});
//This is where we tie the dialog content to the parent form
$("#AddressVerification").parent().appendTo($("form:first"));
//other code not pertinent to this
});
</script>
<form>
<!-- form elements -->
<div id="AddressVerification" style="display: none;">
<!-- address form elements -->
<p>
<button id="btnSave">Save</button>
<button id="btnCancel">Cancel</button>
</p>
</div>
</form>
Steve said
Thanks for posting this. Saved me some time….
geekforte said
Thanks, saved me some time too!