trying to reload the ajax div adn inside trying to call a datatables which accepts value from server
trying to reload the ajax div adn inside trying to call a datatables which accepts value from server
maniya
Posts: 78Questions: 13Answers: 0
I have a code whyere my form submits to a new page and that new Page is loaded i the parent page because of Ajax, now the problem, its bringing the JSON response but unable to map it, i get an error and apart from that, it calls the action page and then it calls the parent page again, why it doing, seems kind of event bubbling, can't figure out, here is my code for that
i included the relevant datatables JS files in the Page
<div id="contentDiv"></div>
<script>
$('#ReportTimeSheet').on('click', function(event) {
event.preventDefault(); // Prevent the form from submitting normally
showLoadingScreen();
$.ajax({
url: $(this).attr('data-action'),
method: $(this).attr('data-method'),
data: $(this).serialize(),
success: function(data) {
showUnloadingScreen();
// Initialize DataTable
$('#contentDiv').html('<table id="dataTable" class="display" style="width:100%"></table>');
$('#dataTable').DataTable({
data: data, // Assuming 'data.data' contains the array of data
columns: [
{ data: 'AdjustedDate' },
{ data: 'AdjustedStandardHours' },
{ data: 'Aprvd_dt' },
{ data: 'Chargey' },
{ data: 'ChargJob' },
{ data: 'Sbmtd_dt' }
],
serverSide: true,
processing: true,
ajax: {
url: $(this).attr('data-action'),
type: 'POST',
data: function(d) {
d.start = d.start || 0;
d.length = d.length || 10;
d.search = d.search.value;
}
}
});
},
error: function(jqXHR, textStatus, errorThrown) {
showUnloadingScreen();
$('#contentDiv').html('An error occurred: ' + errorThrown);
}
});
event.stopPropagation(); // Stop event propagation
});
</script>
my html form code
<form name="ReportTimeSheet" id="ReportTimeSheet" data-action="TimesheetAuto_Proc.cfm" data-method="POST">
<input type="HIDDEN" name="whichDSN" value="Main">
<input type="button" name="GetReport" value="Get report;">
</form>
the error i am getting is:
**DataTables warning: table id=dataTable - Requested unknown parameter 'AdjustedDate' for row 0, column 0. For more information about this error, please see https://datatables.net/tn/4**
Replies
You have both
dataandajaxto load data when Datatables is initialized. Only one will be used. I'm not sure which it is if you define both.You also have
serverSideenabled which requires the use ofajax. I'm not sure what is different between the$.ajax()response where you are usingdataand theajaxresponse is but you will need to choose which to use.Use the steps at the link in the error to troubleshoot the unknown parameter error:
https://datatables.net/tn/4
Its not find the
AdjustedDateobject in the row data. Post an example of your JSON response if you need help with this error.Kevin
i can post JSON, but first ajax is calling the page to load the datatables inside the ajax, my plan is to do one call for both but i am getting confused on hoe to do everything in one call
{
"data":[
{
"Sbmtd_dt":"Feb 11 2024 9:29AM ",
"Aprvd_dt":"Feb 11 2024 9:29AM ",
"ChargJob":"",
"AdjustedDate":"",
"AdjustedStandardHours":49,
"Chargey":0
}
Both the
$.ajax()andajaxare using the same URL. Possibly you don't need theajaxoption andserverSide: true. I don't understand why you have both.Kevin
what i am trying to is load the datatables in the div id="contentDiv">, so i tried to minizime the usage of making it load the datatables in there and then add JSON, so it seems i am doing in wrong, can you please guide what else i shold do here
i removed internal ajax adn did this
');
and got an error
Uncaught TypeError: Cannot read properties of null (reading 'url')
If the JSOn response you posted comes from the
$.ajax()request then I would remove theajaxandserverSideoptions. Thedataoption will load the result from the$.ajax()response.Kevin
see the updated answer i posted i am still getting an error and form has the data attributes
Likely its due to having
serverSide: true,without theajaxoption. Please remove it as I suggested before.Kevin
it still killing the page, no effect on this one too
Does that mean you are still getting the same error?
Its hard to debug your code without actually seeing the problem. Can you post a link to your page or a test case replicating the issue so we can take a look?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin