Fix Add Kart

Set auto refresh Datatable on delete and add
This commit is contained in:
bglacial 2019-04-18 22:42:50 +02:00
parent 2bbb8c17f8
commit e04074843a
3 changed files with 20 additions and 18 deletions

View File

@ -165,8 +165,10 @@ function listKarts() {
url: api_url + 'karts/',
dataType: 'json',
success: function (data, status) {
console.log(data);
$('#dataTable_kart_list').DataTable({
if(tableListKart instanceof $.fn.dataTable.Api){
tableListKart.destroy();
}
tableListKart = $('#dataTable_kart_list').DataTable({
data: data,
columns: [
{
@ -176,7 +178,7 @@ function listKarts() {
'<i class="fas fa-edit"></i>' +
'</a>' +
'&nbsp;' +
'<a href="#" onclick="if ( confirm( \'Do you want to delete the kart\' ) ) {deleteKarts('+data+')}" class="btn btn-danger btn-circle">' +
'<a href="#" onclick="if ( confirm( \'Do you want to delete the kart\' ) ) {deleteKarts('+data+','+meta.row+')}" class="btn btn-danger btn-circle">' +
'<i class="fas fa-trash"></i>' +
'</a>';
}
@ -197,16 +199,15 @@ function listKarts() {
});
}
function deleteKarts(id) {
function deleteKarts(id, index) {
$.ajax({
type: 'DELETE',
crossDomain: true,
url: api_url + 'karts/'+id+'/',
dataType: 'json',
data: data,
success: function (data, status) {
$.notify("Delete done!", "success");
showKarts();
tableListKart.row(index).remove().draw();
},
error: function (xhr) {
$.notify("APIs unreachable!", "error");
@ -224,11 +225,14 @@ function addKarts(data) {
data: data,
success: function (data, status) {
$.notify("Update done!", "success");
//showKarts();
$('#modal_newkart').modal('hide');
$("#saveKartChanges").prop('disabled', false);
listKarts()
},
error: function (xhr) {
$.notify("APIs unreachable!", "error");
console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
$("#saveKartChanges").prop('disabled', false);
},
});
}

View File

@ -1 +1,2 @@
var api_url = 'http://timelaps.local:8000/api/v1/';
var tableListKart = '';

View File

@ -200,10 +200,8 @@
<i class="fas fa-plus"></i>
</a>
</h6>
</a>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable_kart_list" width="100%" cellspacing="0">
@ -241,23 +239,23 @@
</div>
<form id="kartForm">
<div class="modal-body">
<input type="hidden" class="form-control" id="id" value="">
<input type="hidden" class="form-control" id="id" name="id" value="">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter kart name">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter kart name">
</div>
<div class="form-group">
<label for="autonomy">Autonomy</label>
<input type="number" step="1" class="form-control" id="autonomy" placeholder="Autonomy">
<input type="number" step="1" class="form-control" id="autonomy" name="autonomy" placeholder="Autonomy">
</div>
<div class="form-group">
<label for="comment">Comment</label>
<textarea class="form-control" id="comment" rows="3"></textarea>
<textarea class="form-control" id="comment" name="comment" rows="3"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="submit" id="saveKartChanges" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
@ -307,9 +305,8 @@
listKarts();
$("#kartForm").submit(function (event) {
console.log('prevent submit');
$("#saveKartChanges").prop('disabled', true);
event.preventDefault();
console.log($(this).serialize());
addKarts($( this ).serialize())
});