jquery ajax / django - presente la forma en un modo de arranque y volver a mostrar si la validación no tuvo éxito

mi caso de uso es:

a) Presente un formulario cargado a través de ajax en un modo de rutina de carga, elefecto de superposición de lujo cosas ... . Seguí estosinstrucciones.

Esto funciona bien. (ver código abajo)

b) Vuelva a enviar este formulario a mi aplicación Django, intente validarlo y, si no lo hace, vuelva a mostrar el formulario con los errores en el elegante modo de arranque.

Puedo recargar el formulario a través de ajax, pero no puedo representarlo nuevamente en el modo modal.

Nota: No incluí la vista ya que no hace nada especial. Solo instanciar y validar el formulario.

Bastante para leer a continuación, así que continúe si cree que el caso de uso parece interesante ...

Mi taskList.html tiene este aspecto:

<table id="listItemTable" class="table table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Edit</th>
            </tr>
        </thead>
    <tbody>
        <tr>
            <td>Task 1</td>
            <td><a class="editItem" href="/update/item/1/">edit</a></td>
        </tr>
    </tbody>
</table>

<div class="modal hide" id="itemFormModal"></div>
<div id="modalExtraJsPlaceholder"></div>

.js para cargar el formulario + que muestra el formulario de enlace modal + bootstrap a una llamada de envío .jquery:

$(document).ready(function() {
   modalConnect();
});

<script type="text/javascript">
 //connects the modal load for each <a> with class editItem
 //Functionality 1
     //loads an item edit form from the server and replaces the itemFormModal with the form
     //presents the modal with $("#itemFormModal").modal('show');
 //Functionality 2
     //loads some extra js "modalExtraJsHtml"
     //calls the function "submitItemModalFormBind" which has been loaded via "modalExtraJsHtml"

 function modalConnect(){
    $(".editItem").click(function(ev) { // for each edit item <a>
    ev.preventDefault(); // prevent navigation
    url = ($(this)[0].href); //get the href from <a>
    $.get(url, function(results){
       var itemForm = $("#ajax_form_modal_result", results);
       var modalExtraJs = $("#modalExtraJs", results);
       //get the html content
       var modalExtraJsHtml = modalExtraJs.html();
       //update the dom with the received results
        $('#itemFormModal').html(itemForm);        
        $('#modalExtraJsPlaceholder').html(modalExtraJsHtml);
        $("#itemFormModal").modal('show');
        submitItemModalFormBind(); //bind loaded form to ajax call
     }, "html");
     return false; // prevent the click propagation
   })
}
</script>

El itemForm devuelto de la vista se ve así:

<form id="#ajax_form_modal_result" class="well" method="post" action="/update/item/{{ item.id }}">
 <div id="ajax_form_modal_result_div">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h3>Edit Item</h3>
    </div>
    <div class="modal-body">
         {% csrf_token %}
         {{form.as_p}}
    </div>
    <div class="modal-footer">
         <input class="btn btn-primary" type="submit" value="Save" />
         <input name="cancel" class="btn" type="submit" value="Cancel"/>
     </div>
    </div>
</form>

Cargando y mostrando el modal funciona bien. Pero ahora viene la segunda parte que no funciona como se esperaba. El tema es el siguiente. Si el formulario no se valida, la vista devuelve el formulario. El formulario devuelto debe mostrarse nuevamente en el modo de rutina de carga. Pero el resultado es que SOLAMENTE el formulario se presenta en el navegador, todo lo demás se pierde. No css, no tabla, solo la forma. Bastante feo ... Por lo tanto no logré actualizar el ajax_form_modal_result_div. ¿Puede alguien ayudarme aquí lo que estoy haciendo mal ...??

La vista también devuelve la función js 'submitItemModalFormBind' que evita el comportamiento predeterminado del formulario y envía el formulario a través de ajax.

<div id="modalExtraJs">
 //ajax bind for update item form visualized via modal
 function submitItemModalFormBind(){
     var url = "{% url updateItem item.pk %}";
     $('#ajax_form_modal_result').submit(function(){
 $.ajax({
    type: "POST",
    url: "{% url updateTask item.pk %}",
    data: $(this).serialize(),
    success:function(response){
        var div = $("ajax_form_modal_result_div", response);
        $('#ajax_form_modal_result_div').html(div);
     },
     error: function (request, status, error) {
         console.log("failure");
         console.log(request.responseText);
     }

           });
          });
        return false;
       }    
</div> 

Respuestas a la pregunta(2)

Su respuesta a la pregunta