Перестройка иерархии div с помощью jquery

Question

Я использую плагин jQuery form для асинхронной отправки формы. Сервер отправляет обратно HTML, который входит в div #boardcontainer, устанавливая цель вызова ajaxForm. Это отлично работает.

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

Проблема в том, что HTML-код, возвращаемый с сервера, содержит два элемента div:

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

"# board" - это гигантская таблица HTML, представленная сервером. "#status" - это короткое сообщение, и в идеале он должен идти в div, отличный от # boardcontainer.

Какой лучший способ справиться с этой ситуацией? Может ли jquery изменить родителя div? Если это так, я могу изменить родителя в обратном вызове после отправки, но я не могу найти способ сделать это.

Answer 1

В вашем успешном обратном вызове вы можете переставить div, используя appendTo. В качестве альтернативы вы можете вернуть json и создать div в обратном вызове.

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

EDIT : После проверки приложение appendTo само делает то, что вам нужно, без потери обработчиков событий.

Answer 2

Я закончил сборку div с помощью json (хотя html для div был встроен в виде строки)

Вот код:

  $(document).ready(function() { 
    var options = { 
      beforeSubmit:  showRequest,  // pre-submit callback 
      success:       showResponse,  // post-submit callback 
      dataType:      'json'
      }; 
    $('#myForm').ajaxForm(options); 
  }); 

  function showResponse(data)  { 
    $('#statusTarget').html(data.status)
    $('#boardcontainer').html(data.board)

    });  

Это работает, и #statusTarget и #boardTarget заменяются новым html при каждой отправке формы.