Formularze asynchroniczne z bootstrapem i django
Próbuję więc uczynić tę formę asynchroniczną. W idealnej sytuacji używam tego formularza do dodawania jednostek, a następnie dynamicznie aktualizuję tabelę. Nie chcę odświeżać całej strony. Nie jestem zbyt dobry z javascriptem i mógłbym wykorzystać kilka wskazówek dotyczących tego, co się dzieje:
Dzieje się kilka rzeczy, których nie chcę robić:
Cała strona jest odświeżającarequest.is_ajax () to False.Przede wszystkim staram się zrozumieć, co się dzieje, ale pytanie brzmi, jak zmienić poniższe, aby naprawić powyższe dwa problemy? (jeśli są to problemy, w ogóle występują problemy.)
Niektóre z poniższych kodów pochodzą z tego pytania:
Jak wstawić formularz django w modalnym oknie startowym programu twitter?
Dla przypomnienia, widzę post w porządku na żądanie.POST, po prostu chcę, aby działał asynchronicznie, w ten sposób moje pytanie różni się od powyższego.
{% block scripts %}
<script type="text/javascript">
$(document).ready(function() {
modalConnect();
});
</script>
<script type="text/javascript">
$( document ).ajaxStop( function() {
modalConnect();
});
</script>
<script type="text/javascript">
function modalConnect()
{
//unbind the click event. If not done we will end up with multiple click event bindings, since binding is done after each ajax call.
$(".editItem").unbind('click');
//bind the click event
$(".editItem").click(function(ev) { // for each edit item <a>
ev.preventDefault(); // prevent navigation
var url = this.href; //get the href from the <a> element
$.get(url, function(results){
//get the form
var itemForm = $("#ajax_form_modal_result", results);
//get the update URL
var formUpdateURLDiv = $("#formUpdateURL", results);
//get the inner html of the div
var formUpdateURL = formUpdateURLDiv.html();
//update the dom with the received form
$('#inventory').html(itemForm);
//show the bootstrap modal
$("#inventory").modal('show');
$(document).ready(function () {
//bind the form to an ajax call. ajax call will be set to the received update url
submitItemModalFormBind(formUpdateURL);
});
}, "html");
return false; // prevent the click propagation
})
}
</script>
<script type="text/javascript">
function submitItemModalFormBind(url){
//bind the form. prevent default behavior and submit form via ajax instead
$('#ajax_form_modal_result').submit(function(ev){
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success:function(response, textStatus, jqXHR){
var form = $("#ajax_form_modal_result_div", response);
//form is returned if it is not valid. update modal with returned form
//change this "if" to check for a specific return code which should be set in the view
if (form.html()) {
console.log('Form was invalid and was returned');
//update modal div
$('#ajax_form_modal_result_div').html(form);
$("#inventory").modal('show');
}
//form is not returned if form submission succeeded
else{
//update the entire document with the response received since we received a entire success page and we want to reload the entire page
//sort by modified date descending
//var notificationDiv = $("#notification", response);
//$('#notification').html(notificationDiv.html());
console.log('Form was valid and was not returned');
$("#inventory").modal('hide');
}
},
error: function (request, status, error) {
var div = $("ajax_form_modal_result_div", request.responseText);
$('#ajax_form_modal_result_div').html(div);
//implement proper error handling
console.log("failure");
console.log(request.responseText);
}
});
return false;
});
}
</script>
{% endblock %}
{% block content %}
<div class="row">
<div class="span8 offset4">
<div class="row">
<div class="span3">
<h1>
Acquisitions
</h1>
</div>
<div class="span3 offset2">
<h1>
<a id="editItem" href="#inventory" role="button" class="icon-plus-sign" data-toggle="modal"></a>
Add Units
</h1>
</div>
</div>
<table class="table table-hover table-striped">
<thead>
<tr>
<th>
lolcats
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
lolcats
</td>
</tr>
<tr>
<td>
test
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal hide fade" id="inventory" >
<form id="#ajax_form_modal_result" class="well" method="post" action="">
<div id="ajax_form_modal_result_div">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Add units</h3>
</div>
<div class="modal-body">
{% csrf_token %}
{{inventory.as_p}}
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<input class="btn btn-primary" type="submit" value="Save" />
</div>
</div>
</form>
</div>