Question

I am using $('#myForm').seralize() to pass arguments to a server-side component via $.ajax() however, when I include any form elements into a div that jqueryui dialog uses, the $('#myForm').seralize() does not recognize any form element changes within that div.

Please see my jsfiddle example.

Answer 1

That’s because $('#dialog').dialog() moves #dialog out of the #myform <div> by cloning it entirely to another location (the bottom of the page, I believe).

You can find the inputs in the dialog by using:

$('#dialog :input').serialize();

Perhaps you could split up the two sets and send them back to the server together:

...
data: { 
    common: $('#myForm').serialize(),
    dialog: $('#dialog :input').serialize();
},
...

Or maybe you can just combine them, like so:

...
data: $('#myForm').serialize() + '&' + $('#dialog :input').serialize(),
...

An updated jsFiddle.