trying to reload the ajax div adn inside trying to call a datatables which accepts value from server

maniya

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**

kthorngren

You have both data and ajax to 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 serverSide enabled which requires the use of ajax. I'm not sure what is different between the $.ajax() response where you are using data and the ajax response 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 AdjustedDate object in the row data. Post an example of your JSON response if you need help with this error.

Kevin

maniya

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
}

kthorngren

Both the $.ajax() and ajax are using the same URL. Possibly you don't need the ajax option and serverSide: true. I don't understand why you have both.

Kevin

maniya

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

maniya

i removed internal ajax adn did this

! >! $('#ReportTimeSheet').on('click', function(event) {
! >! event.preventDefault(); // Prevent the form from submitting normally
! >! showLoadingScreen();
! >! var actionUrl = $(this).attr('data-action');
! >! var methodType = $(this).attr('data-method');
! >! $.ajax({
! >! url: actionUrl,
! >! method: methodType,
! >! data: $(this).serialize(),
! >! success: function(data) {
! >! showUnloadingScreen();
! >! // Initialize DataTable
! >! $('#contentDiv').html('

');

! >! $('#dataTable').DataTable({
! >! data: data, // Assuming '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
! >! });
! >! },
! >! error: function(jqXHR, textStatus, errorThrown) {
! >! showUnloadingScreen();
! >! $('#contentDiv').html('An error occurred: ' + errorThrown);
! >! }
! >! });
! >! event.stopPropagation(); // Stop event propagation
! >! });

and got an error

Uncaught TypeError: Cannot read properties of null (reading 'url')

kthorngren

If the JSOn response you posted comes from the $.ajax() request then I would remove the ajax and serverSide options. The data option will load the result from the $.ajax() response.

Kevin

maniya

see the updated answer i posted i am still getting an error and form has the data attributes

kthorngren

Likely its due to having serverSide: true, without the ajax option. Please remove it as I suggested before.

Kevin

maniya

it still killing the page, no effect on this one too

kthorngren

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