So i'm trying to make this form asyncronous. Ideally, I'm using this form to add units, and then update the table dynamically. I do not want the entire page to refresh. I'm not all that good with javascript, and I could use some pointers with what's going on:
A few things are happening that I don't want to happen:
- The entire page is refreshing
- request.is_ajax() is False.
Mostly, I'm just trying to understand what's going on, but the question is, how do I change the below to fix the above two issues? (if they are issues are issues at all.)
Some of the below code is taken from this question:
How do I insert a django form in twitter bootstrap modal window?
For the record, I am seeing the post just fine in request.POST, I just want to make it work Asyncronously, which is how my question differs from the above.
{% 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>
