moim przypadkiem użycia jest:

a) Przedstaw formularz załadowany za pośrednictwem ajax w modalnym programie ładującymfantazyjne rzeczy z efektem nakładki .. . Poszedłem za nimiinstrukcje.

To działa dobrze. (patrz kod poniżej)

b) Prześlij ten formularz z powrotem do mojej aplikacji Django, spróbuj go zweryfikować, a jeśli nie sprawdzi poprawności, ponownie pokaż formularz z błędami w modalnym programie ładującym.

Mogę przeładować formularz za pomocą ajax, ale nie jestem w stanie go ponownie przedstawić w trybie modalnym.

Uwaga: nie uwzględniłem widoku, ponieważ nie robi nic specjalnego. Tylko tworzenie i sprawdzanie poprawności formularza.

Dość dużo do przeczytania poniżej, więc kontynuuj, jeśli uważasz, że przypadek użycia brzmi interesująco ...

Mój taskList.html wygląda tak:

<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 do załadowania formularza + pokazania modalnego + powiązania formularza ładowania początkowego do wywołania .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>

Zwracany z widoku itemForm wygląda tak:

<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>

Ładowanie i pokazywanie modalności działa dobrze. Ale teraz przychodzi druga część, która nie działa zgodnie z oczekiwaniami. Problem jest następujący. Jeśli formularz nie sprawdza poprawności, widok zwraca formularz. Zwrócony formularz powinien zostać ponownie wyświetlony w modalnej wersji bootstrap. Ale rezultat jest taki, że TYLKO formularz jest prezentowany w przeglądarce, wszystko inne jest tracone. Bez css, bez stołu, tylko formularz. Dość brzydki .. Nie udało mi się więc zaktualizować ajax_form_modal_result_div. Czy ktoś może mi pomóc tutaj, co robię źle ..!?

Widok zwraca także funkcję js 'submitItemModalFormBind', która zapobiega domyślnemu zachowaniu formularza i wysyła formularz za pośrednictwem 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>