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/', url: api_url + 'karts/',
dataType: 'json', dataType: 'json',
success: function (data, status) { success: function (data, status) {
console.log(data); if(tableListKart instanceof $.fn.dataTable.Api){
$('#dataTable_kart_list').DataTable({ tableListKart.destroy();
}
tableListKart = $('#dataTable_kart_list').DataTable({
data: data, data: data,
columns: [ columns: [
{ {
@ -176,7 +178,7 @@ function listKarts() {
'<i class="fas fa-edit"></i>' + '<i class="fas fa-edit"></i>' +
'</a>' + '</a>' +
'&nbsp;' + '&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>' + '<i class="fas fa-trash"></i>' +
'</a>'; '</a>';
} }
@ -197,16 +199,15 @@ function listKarts() {
}); });
} }
function deleteKarts(id) { function deleteKarts(id, index) {
$.ajax({ $.ajax({
type: 'DELETE', type: 'DELETE',
crossDomain: true, crossDomain: true,
url: api_url + 'karts/'+id+'/', url: api_url + 'karts/'+id+'/',
dataType: 'json', dataType: 'json',
data: data,
success: function (data, status) { success: function (data, status) {
$.notify("Delete done!", "success"); $.notify("Delete done!", "success");
showKarts(); tableListKart.row(index).remove().draw();
}, },
error: function (xhr) { error: function (xhr) {
$.notify("APIs unreachable!", "error"); $.notify("APIs unreachable!", "error");
@ -224,11 +225,14 @@ function addKarts(data) {
data: data, data: data,
success: function (data, status) { success: function (data, status) {
$.notify("Update done!", "success"); $.notify("Update done!", "success");
//showKarts(); $('#modal_newkart').modal('hide');
$("#saveKartChanges").prop('disabled', false);
listKarts()
}, },
error: function (xhr) { error: function (xhr) {
$.notify("APIs unreachable!", "error"); $.notify("APIs unreachable!", "error");
console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText); 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 api_url = 'http://timelaps.local:8000/api/v1/';
var tableListKart = '';

View File

@ -200,10 +200,8 @@
<i class="fas fa-plus"></i> <i class="fas fa-plus"></i>
</a> </a>
</h6> </h6>
</a>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered" id="dataTable_kart_list" width="100%" cellspacing="0"> <table class="table table-bordered" id="dataTable_kart_list" width="100%" cellspacing="0">
@ -241,23 +239,23 @@
</div> </div>
<form id="kartForm"> <form id="kartForm">
<div class="modal-body"> <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"> <div class="form-group">
<label for="name">Name</label> <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>
<div class="form-group"> <div class="form-group">
<label for="autonomy">Autonomy</label> <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>
<div class="form-group"> <div class="form-group">
<label for="comment">Comment</label> <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> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <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> </div>
</form> </form>
</div> </div>
@ -307,9 +305,8 @@
listKarts(); listKarts();
$("#kartForm").submit(function (event) { $("#kartForm").submit(function (event) {
console.log('prevent submit'); $("#saveKartChanges").prop('disabled', true);
event.preventDefault(); event.preventDefault();
console.log($(this).serialize());
addKarts($( this ).serialize()) addKarts($( this ).serialize())
}); });