I have a table that performs a CRUD operation using ajax, but I am new to ajax. I have made the table interactive with the jquery datatable, but it is not working correctly. I can add and edit data to the table and it appears, but when I sort the data the new/updated data disappears until I reload the page.
I think I know what the problem is, but I have not been able to solve it. views.py
def case_list(request):
cases = Case.objects.filter(user=request.user).order_by('date_due')
return render(request, 'cases/case_list.html', {'cases': cases})
cases.js
$(function () {
/* Functions */
var loadForm = function () {
var btn = $(this);
$.ajax({
url: btn.attr("data-url"),
type: 'get',
dataType: 'json',
beforeSend: function () {
$("#modal-case").modal("show");
},
success: function (data) {
$("#modal-case .modal-content").html(data.html_form);
}
});
};
var saveForm = function () {
var case_formset = $(this);
$.ajax({
url: case_formset.attr("action"),
data: case_formset.serialize(),
type: case_formset.attr("method"),
dataType: 'json',
success: function (data) {
if (data.form_is_valid) {
$("#case-table tbody").html(data.html_case_list);
$("#modal-case").modal("hide");
myTable.draw('full-reset');
}
else {
$("#modal-case .modal-content").html(data.html_form);
}
}
})
return false;
};
/* Binding */
// Create case
$(".js-create-case").click(loadForm);
$("#modal-case").on("submit", ".js-data-create-form", saveForm);
// Update case
$("#case-table").on("click", ".js-update-case", loadForm);
$("#modal-case").on("submit", ".js-case-update-form", saveForm);
// Delete case
$("#case-table").on("click", ".js-delete-case", loadForm);
$("#modal-case").on("submit", ".js-case-delete-form", saveForm);
});
list.html
<script type="text/javascript">
$(document).ready(function(){
var myTable = $('#case-table').DataTable({
});
});
</script>
h1 class="page-header">Cases</h1>
<p>
<button type="button" class="btn btn-primary js-create-case" data-url="{% url 'case_create' %}">
<span class="glyphicon glyphicon-plus"></span>
New case
</button>
</p>
<table class="table" id="case-table">
<thead>
<tr>
<th>Date due</th>
<th></th>
</tr>
</thead>
<tbody>
{% for case in cases %}
<tr class = 'click-row'>
<td><a href="{% url 'edit_case' case.slug %}" ></a>{{ case.date_due }}</td>
<td style="width: 150px">
<button type="button"
class="btn btn-warning btn-sm js-update-case"
data-url="{% url 'case_update' case.id %}">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
<button type="button"
class="btn btn-danger btn-sm js-delete-case"
data-url="{% url 'case_delete' case.id %}">
<span class="glyphicon glyphicon-trash"></span> Delete
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="modal fade" id="modal-case">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
In the above I tried to simply add myTable.draw('full-reset'); as well as myTable.ajax.reload(); in the success function as I saw in this answer, but it did not change the results. I also tried myTable.row.add(case_formset.serialize()).draw(); replacing $("#case-table tbody").html(data.html_case_list);
The docs have a simple example, but I do not see how to pass my above data as "ajax", since the example is a static .txt file and my data is from a context_dict and is dynamic.
$(document).ready(function() {
$('#example').DataTable( {
"ajax": '../ajax/data/arrays.txt'
} );
} );
Then this post seems helpful, but I am confused on a few points.
Similarly to the docs it gives the below example:
$(document).ready(function() {
$('#example').dataTable( {
"ajax": 'your url here'
});
});
What is the url? Is it the url to the page displaying the data?
It also shows
"ajax": ...,
"columns": [
{ "data": "email" },
{ "data": "platform" },
{ "data": "coins" },
...
]
Would my data be my context dictionary cases? I feel like this should be an easy fix, but am stumped.
Thanks for any input.
