jquery ajax / django - forma presente em um modal de bootstrap e re-show se a validação não for bem sucedida
meu caso de uso é:
a) Apresentar um formulário carregado via ajax em um modal bootstrap, oefeito de sobreposição de fantasia .. . Eu segui estesinstruções.
Isso funciona bem. (veja o código abaixo)
b) Envie este formulário de volta ao meu aplicativo Django, tente validá-lo e, se ele não for validado, mostre novamente o formulário com os erros no modal de bootstrap sofisticado.
Eu posso recarregar o formulário via ajax, mas não consigo representá-lo novamente no modal.
Nota: não incluí a visualização, pois ela não faz nada de especial. Apenas instanciando e validando o formulário.
Muito para ler abaixo, então apenas continue se você acha que o caso de uso parece interessante ...
Minha taskList.html se parece com isso:
<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 carregar o formulário + mostrando o formato bootstrap modal + binding para uma chamada de envio .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>
O itemForm retornado da view se parece com isto:
<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>
Carregando e mostrando o modal funciona bem. Mas agora vem a segunda parte que não funciona como esperado. A questão é a seguinte. Se o formulário não valida, a exibição retorna o formulário. O formulário retornado deve ser mostrado novamente no modal bootstrap. Mas o resultado é que SOMENTE o formulário é apresentado no navegador, todo o resto é perdido. Não css, sem tabela, apenas o formulário. Muito feio .. Assim eu não consegui atualizar o ajax_form_modal_result_div. Alguém pode me ajudar aqui o que estou fazendo errado ..!?
A visão retorna também a função js 'submitItemModalFormBind' que impede o comportamento padrão do formulário e envia o formulário via 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>