Develop Reference

Row Not Updating

I am trying to update a row in a datatable using editable cells. It works to update on the interface but the data does not go into the api and after I reload the page the modification dissapear.
function buildlist() {
var url = 'http://127.0.0.1:8000/api/sarcini-list/';
fetch(url).then(
res => {
res.json().then(
data => {
console.log(data);
var table
const createdCell = function(cell) {
let original;
cell.setAttribute('contenteditable', true)
cell.setAttribute('spellcheck', false)
cell.addEventListener("focus", function(e) {
original = e.target.textContent
})
cell.addEventListener("blur", function(e) {
if (original !== e.target.textContent) {
const row = table.row(e.target.parentElement);
$.ajax({
type: "PUT",
url: 'http://127.0.0.1:8000/api/sarcini-detail/' + row.data().idSarcina,
data: row.data()
})
console.log('Row changed: ', row.data())
}
})
}
table = $('#datatable').DataTable({
columnDefs: [{
targets: '_all',
createdCell: createdCell
}],
scrollX: true,
data: data,
columns: [
{ data: 'idSarcina' },
{ data: 'nr_tren' },
{ data: 'nr_locomotiva' },
{ data: 'plecare' },
{ data: 'ora_plecare1' },
{ data: 'ora_sosire1' },
{ data: 'angajat1' },
{ data: 'angajat2' },
{ data: 'schimb1' },
{ data: 'ora_plecare2' },
{ data: 'ora_sosire2' },
{ data: 'angajat3' },
{ data: 'angajat4' },
{ data: 'schimb2' },
{ data: 'ora_plecare3' },
{ data: 'ora_sosire3' },
{ data: 'angajat5' },
{ data: 'angajat6' },
{ data: 'sosire' },
{ data: 'ora_plecare4' },
{ data: 'ora_sosire4' },
{ data: 'angajat7' },
{ data: 'angajat8' }
],
});
}
)
}
)
}
$(document).ready(function() {
buildlist();
});
I modified the field "NUMAR TREN" and as you can see in the console in the api the change does not take place but in the interface it looks ok.
This is how it looks in console and interface

Uncaught TypeError: $(...).html(...).modal is not a function

I am getting above error when i try to show id in pop up window.
my code are below
grid.cshtml
<script src="#Url.Content("~/js/Grid.js")" type="text/javascript"></script>
<div id="login_for_review" class="modal hide" role="dialog"></div>
grid.js
var init = function () {
var Grid = $("#Grid");
Grid.kendoGrid({
dataSource: {
transport: {
read: {
url: "/",
dataType: "json",
type: "GET"
},
parameterMap: function (data, type) {
if (type == "read") {
return {
limit: ,
offset: ,
sort:
}
}
}
},
schema: {
data: "Records",
total: "TotalRecordCount"
},
serverPaging: true,
pageSize: 25,
serverSorting: true,
sort: { field: "Name", dir: "asc" }
},
sortable: {
allowUnsort: false
},
pageable: true,
pageable: {
pageSizes:
},
noRecords: {
template: ""
},
columns: [
{
field: "Name",
title: "Name"
},
{
template: "<div>#if(data.id> 0){#<a href = 'javascript:void(0);' onClick='showDiv(#:TemplateId#)'>#:id# Sites</a>#} else{#ff#}#</div>",
field: "id",
title: ""
}
]
});
};
(function ($) {
$(document).trigger("o", [false, { type: "item", href: "url", text: "", showText: true }]);
init();
})(jQuery);
function showDiv(data) {
getSiteId();
console.log(data);
}
var getSiteId = function () {
$.ajax({
type: 'GET',
url: "",
dataType: 'json',
success: function (data) {
$('#login_for_review').html(data).modal('show');
// window.$('#myModal').modal();
console.log(data);
}
});
};
actually I am trying to show return id like 1,2,3.. in horizonal in a pop up when showDiv clicked .
I have followed some links and implemented in this way . Could you please help me to solve this issue ?

Datatables handle null ajax response?

This is my datatable code:
table = $('#datatable-buttons').DataTable({
lengthChange: false,
pageLength: 25,
order: [ 0, 'desc' ],
//buttons: ['copy', 'excel', 'pdf', 'colvis']
columns: [
{ data: "sample_lab_ref" },
{ data: "sample_client_ref" },
{ data: "sample_client_ref2" },
{ data: "sample_client_ref3" },
{ data: "sample_date" },
{ data: "report_date" },
{ data: "test_parameter_name" },
{ data: "test_parameter_sop" },
{ data: "test_technique_name" },
{ data: "test_value_text" },
{ data: "test_units" }
],
columnDefs: [
{
targets: [4, 5],
visible: false,
searchable: false
}
],
ajax: {
url: "/assets/ajax/test_data_ajax_handler.php",
type: "POST",
data: {
action: "getTestData",
user_data: '<?=json_encode($userData)?>'
}
},
buttons: {
buttons: [
{ extend: 'copy', className: 'btn-info' },
{ extend: 'pdf', className: 'btn-danger' },
{
extend: 'csv',
className: 'btn-success',
text: 'Export to CSV',
exportOptions: {
modifier: {
search: 'applied'
}
}
},
{ extend: 'colvis', className: 'btn-primary' },
]
},
initComplete: function(settings, json) {
table.buttons().container()
.appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
}
});
Works fine, but in the event the function in the ajax handler returns NULL (no rows found). How can I tell the datatable to display something like "No data found". Right now it gives me an invalid json syntax error.

You can create empty json like this:
{
"data": [],
"total": 0,
"recordsTotal": 0,
"recordsFiltered": 0
}

Try using dataSrc and pass a function to process your data.. Hope the attached data pre-processing callback will be called even on HTTP errors
sample code
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"dataSrc": function ( json ) {
for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
json.data[i][0] = '<a href="/message/'+json.data[i][0]+'>View message</a>';
}
return json.data;
}
}
} );

From here Display warning if records null Datatables AJAX - dataSrc
You can fix it with dataSrc
ajax: {
url: "/assets/ajax/test_data_ajax_handler.php",
type: "POST",
data: {
action: "getTestData",
user_data: '<?=json_encode($userData)?>'
},
dataSrc: function(data){
if(data.data == null){
return [];
} else {
return data.data;
}
}
},

Reload datatable after dropdown value changed

I have a datatable and a dropdown. I want to change the datatable after dropdown value change. First of all, I tried the simplest trial & error by getting return value from controller after dropdown changes value and it works smoothly. Here is my code:
$('#ID_Univ').change(function () {
$.ajax({
type: 'GET',
url: '#Url.Action("Get_Approved")',
data: { ID: _Id },
success: function (data) {
// data, I got return value
// do something here
}
});
});
and then here is my datatable code
var tbl_Approved = $('#tbl_Approved').DataTable({
lengthMenu: [10, 25, 50, 75, 100],
searchPane: {
columns: [':contains("Name")', ':contains("Period")'],
threshold: 0
},
////////////////////////////////////
processing: true,
serverSide: true,
ajax: { ??? },
////////////////////////////////////
columns: [
{ data: 'ID_Approved_Monthly', title: "ID" },
{ data: 'Name', title: "Name" },
{ data: 'Period', title: "Period" },
{ data: 'Approved', title: "Approved" },
{ data: 'Approved_Date', title: "Approval Date" },
{ data: 'Paid_Status', title: "Paid Date" },
],
columnDefs: [{
targets: [0],
visible: false,
searchable: false
}],
dom: 'Rlfrtip'
});
I put datatable code outside $(document).ready(function (). So, when the page reload, it just reload the datatable as variable and whenever dropdown's value changed it just call datatableName.ajax.reload();. That's the idea.
Now, my question are,
how do I put the ajax call in the datatable to reload datatable that det return value from controller (ASP .Net Core). I see someone did this flawlessly in youtube but it made by PHP. I have same idea with this youtube.
why I don't see any change in my datatable when dropdown value change ? even, I've put ajax.data according to "Add data to the request (returning an object)"
in this case, do I have to use server side ?
So here is my complete code, what I've been trying till right now and still get stuck.
<script type="text/javascript">
var tbl_Approved = $('#tbl_Approved').DataTable({
lengthMenu: [10, 25, 50, 75, 100],
searchPane: {
columns: [':contains("Name")', ':contains("Period")'],
threshold: 0
},
////////////////////////////////////
processing: true,
serverSide: true,
ajax: { //I get get stuck here :((
"datatype": "json",
type: 'GET',
url: '#Url.Action("Get_Approved")',
data: function (d) {
return $.extend({}, d, {
ID: $('#ID').val(),
})
}
},
////////////////////////////////////
columns: [
{ data: 'ID_Approved_Monthly', title: "ID" },
{ data: 'Name', title: "Acc Name" },
{ data: 'Period', title: "Period" },
{ data: 'Approved', title: "Approved" },
{ data: 'Approved_Date', title: "Approval Date" },
{ data: 'Paid_Status', title: "Paid Date" },
],
columnDefs: [{
targets: [0],
visible: false,
searchable: false
}],
dom: 'Rlfrtip'
});
$(document).ready(function () {
tbl_Approved_Allowance.draw();
$('#ID').change(function () {
tbl_Approved_Allowance.ajax.reload();
}
});
})
</script>

to solve this problem, I put ajax into .change(function()). Here is my code:
$('#ID').change(function () {
$.ajax({
type: 'GET',
url: '#Url.Action("Get_Approved")',
data: { ID: ID},
success: function (data) {
$('#tbl_Approved').DataTable({
destroy: true,
data: data,
lengthMenu: [10, 25, 50, 75, 100],
searchPane: {
columns: [':contains("Name")', ':contains("Period")'],
threshold: 0
},
columns: [[
{ data: 'ID_Approved_Monthly', title: "ID" },
{ data: 'Name', title: "Acc Name" },
{ data: 'Period', title: "Period" },
{ data: 'Approved', title: "Approved" },
{ data: 'Approved_Date', title: "Approval Date" },
{ data: 'Paid_Status', title: "Paid Date" },
],
dom: 'Rlfrtip'
});
}
})
});

How to send Jquery datatable data to servlet?

I want to send Jquery datatable to servlet. below is the code.
Jquery in JSP
var table2 = $('#itemtable').DataTable( {
columns: [
{ data: "p_no"},
{ data: "p_date"},
{ data: "s_id"},
{ data: "it_id" },
{ data: "it_name" },
{ data: "it_type" },
{ data: "it_uni_price" },
{ data: "it_qty" },
{ data: "it_tot_price" }
],
order: [ 1, 'asc' ],
bProcessing: true,
bSort: true,
bJQueryUI: true,
bLengthChange: true,
bPaginationType: "two_button"
} );
Ajax request on Save button as below
var oTable = $("#table2").dataTable();
updateDatabase(oTable.fnGetData());
And the updateDatabase() as below
function updateDatabase(dataTable) {
$.ajax({
type: "POST",
url: "/ERP/Purchase",
cache: false,
dataType: "json",
data:{dataTable: dataTable},
success: function(html){
//success
}
});
}
How do I get my datatable data to my servlet?