jQuery: get <form> object to serialize from anonymous function argument

Question

I have a form within a draggable() div. The form simply looks like this:

<form id="add_interface" name="add_interface">
            USB  Type: 

                <select name="type-id">
                    <option value="68">Micro-A</option>
                </select>
              Use:

                <select name="use-id">
                    <option value="13">Audio    </option>
                </select>

</form>

When this is 'dropped' into a droppable() div I end up with this error:

XML filter is applied to non-XML value ({0:#1={}, length:1, context:#1#})

The jQuery for the droppable looks like this:

 $("#droppable").droppable({
     drop: function(event, ui) {
         $(this).effect('highlight');
         alert(ui.draggable.("#add_interface").serialize());
     }
 });

I'm assuming I'm not accessing the form correctly, however if I try to simply do ui.draggable.serialize() I end up with an empty string. Just wondering how I actually can serialize the form within the correct draggable div that is dropped.

Thanks!

Answer 1

Im not sure if you just made a typo in your code here or if you got it in your source aswell , but I guess:

ui.draggable.("#add_interface").serialize()

should be:

ui.draggable("#add_interface").serialize()

Answer 2

You guys were almost there but I had to go digging all over and try everything to finally figure it out:

 $(function(){
     $('.ui-widget-header').draggable({cursor: 'move', revert: true});
     $("#droppable").droppable({
         drop: function(event, ui) {
             $(this).effect('highlight');
             alert($(ui.draggable.find('#add_interface')).serialize());
         }
     });
 });

So the way you deal with the ui argument is like so: $(ui.draggable.find('#add_interface')) and THEN you can serialize() that, otherwise I was just getting [object Object] alerted as opposed to the serialized form