Question

I’m using jQuery’s form plugin to submit a form asynchronously. The server sends back HTML which goes into a div #boardcontainer by setting the target of an ajaxForm call. This works fine.

...     var options = {        target:        '#boardcontainer',    // target element(s) to be updated with server response        beforeSubmit:  showRequest,  // pre-submit callback        success:       showResponse  // post-submit callback        };     $('#myForm').ajaxForm(options);  ... 

Problem is, the HTML that comes back from the server contains two divs:

<div id='board'> ... </div> <div id='status'> ... </div> 

‘#board’ is a giant HTML table prerendered by the server. ‘#status’ is a short message and should ideally go into a div other than #boardcontainer.

What’s the best way to handle this situation? Can jquery change a div’s parent? If so I can change the parent in the post-submit callback, but I can’t seem to find a way to do it.

Answer 1

In your success callback you could rearrange the divs using appendTo. Alternatively you could return json and build the divs in your success callback.

 $('#status').appendTo('#realTarget'); 

EDIT: Upon checking, appendTo itself does what you need it to do without losing the event handlers.