Passing parameter from ajax to server: how to fetch it from the server side?

monkeyboy

Allan,

I seem to be having trouble passing and getting a parameter in my ajax for an editable table
The table data is quite small, so I am not using server side processing
'''
var dirEditor;
$(document).ready(function() {
dirEditor = new $.fn.dataTable.Editor( {
ajax: {
"url": "/ajax/ajaxDetail.php",
"type": "POST",
"dirId":"xx1234"
},
table: "#dirTable",
fields: [
{label: "AT&T UID: ", name: "table.USER_ID"},
{label: "First Name: ", name: "table.FIRST_NM"},
{label: "Last Name: ", name: "tableLAST_NM"},
{label: "Category: ", name: "table.CATEGORY"},
{label: "Legacy/CoE: ", name: "table.TYPE"}

            ],
    } );

$("#dirTable").on( "click", "tbody td:not(:first-child)", function (e) {
    dirEditor.bubble( this );
} );

    var dirTable = $("#dirTable").DataTable( {
            dom: "Bflrtip",
            "serverSide": false,   /* Tried both true and false! */
            ajax:   {
                            "url":  "/ajax/ajaxDetail.php",
                            "type": "POST",
                            "dirId":"xx1234"
                    },

            columns: [
                    { data: "table.USER_ID","sClass": "binCentered"  },
                    { data: "table.FIRST_NM","sClass": "binCentered"  },
                    { data: "table.LAST_NM","sClass": "binCentered"  },
                    { data: "table.CATEGORY","sClass": "binCentered"  },
                    { data: "table.TYPE","sClass": "binCentered"  },

            ],
            "order": [[1, "asc"]],
            select: true,
            buttons: [
                    {
                            extend: "create",
                            editor:themeEditor,
                            formButtons: [
                                    {
                                             "label":"Cancel",
                                            fn: function(){this.close();}
                                    },
                                    "Add new employee"
                            ]
                    }
            ]
    } );

});
'''
From browser web developer network panel:
Request Header: http://MyServer/ajax/ajaxDirDetail.php

My php ajax file

'''
<?php
require_once('/libraries/dataTables/editor/php/DataTables.php');

// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Join,
DataTables\Editor\Upload,
DataTables\Editor\Validate;

if ( isset($_POST['action']) && $_POST['action'] === 'remove' ) {
header("HTTP/1.0 204 No Response");
exit;
}

/* Just to TEST if the parameter is passed! /
/ TRIED this with GET and POST - neither works/
if ( isset($_GET['dirId'])) {
header("HTTP/1.0 204 dirId is set"); / We NEVER SEE THIS */
exit;
}

//$dirId = $_POST['dirId'];

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'table' )
->fields(
Field::inst( 'table.USER_ID' ),
Field::inst( 'table.FIRST_NM' ),
Field::inst( 'table.LAST_NM' ),
Field::inst( 'table.CATEGORY' ),
Field::inst( 'table.TYPE' )
)
->where('table.BossUid', 'xx1234', '=')
->where('table.STATUS','active','=')
->process( $_POST )
->json();
'''
Intent is to pass the bosses ID (as dirId) and use it in the query

I am clearly dong something wrong, as the dirId parameter never reaches the server
Any help in finding a solution would be most appreciated

monkeyboy

Something went wrong in posting code: here it is again

 <?php
require_once('/libraries/dataTables/editor/php/DataTables.php');

// Alias Editor classes so they are easy to use
use
        DataTables\Editor,
        DataTables\Editor\Field,
        DataTables\Editor\Format,
        DataTables\Editor\Join,
        DataTables\Editor\Upload,
        DataTables\Editor\Validate;

if ( isset($_POST['action']) && $_POST['action'] === 'remove' ) {
        header("HTTP/1.0 204 No Response");
        exit;
}

/* Just to TEST if the parameter is passed! / / TRIED this with GET and POST - neither works/
if ( isset($_POST['dirId']))  { /* tried a get here too - no luck */
        header("HTTP/1.0 204 dirId is set"); /* This never executes */
        exit;
}

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'table' )
        ->fields(
                Field::inst( 'table.USER_ID' ),
                Field::inst( 'table.FIRST_NM' ),
                Field::inst( 'table.LAST_NM' ),
                Field::inst( 'table.CATEGORY' ),
                Field::inst( 'table.STATUS' )
        )
        ->where('table.bossId', 'xx1234', '=')
        ->where('table.STATUS','Active','=')
        ->process( $_POST )
        ->json();

monkeyboy

I seem to be having trouble passing and getting a parameter in my ajax for an editable table The table data is quite small, so I am not using server side processing

Here is the Javascript again

var dirEditor;
$(document).ready(function() {
        dirEditor = new $.fn.dataTable.Editor( {
                ajax:   {
                                "url":  "http://myServer/ajax/ajaxDirDetail.php",
                                "type": "POST",
                                "dirId": "xx1234"
                        },
                table: "#dirTable",
                fields: [
                        {label: "UID: ",     name: "table.USER_ID"},
                        {label: "First Name: ",   name: "table.FIRST_NM"},
                        {label: "Last Name: ",    name: "table.LAST_NM"},
                        {label: "Category: ",     name: "table.CATEGORY"},
                        {label: "Status: ",   name: "table.STATUS"}

                ],
        } );

    $("#dirTable").on( "click", "tbody td:not(:first-child)", function (e) {
        dirEditor.bubble( this );
    } );

        var dirTable = $("#dirTable").DataTable( {
                dom: "Bflrtip",
                "serverSide": false, /* tried true here too - did not work*/
                ajax:   {
                                "url":  "/ajax/ajaxDirDetail.php",
                                "type": "POST",
                                "dirId":"ra9325"
                        },

                columns: [
                        { data: "table.USER_ID","sClass": "binCentered"  },
                        { data: "table.FIRST_NM","sClass": "binCentered"  },
                        { data: "table.LAST_NM","sClass": "binCentered"  },
                        { data: "table.CATEGORY","sClass": "binCentered"  },
                        { data: "table.STATUS","sClass": "binCentered"  },

                ],
                "order": [[1, "asc"]],
                select: true,
                buttons: [
                        {
                                extend: "create",
                                editor:dirEditor,
                                formButtons: [
                                        {
                                                 "label":"Cancel",
                                                fn: function(){this.close();}
                                        },
                                        "ADD"
                                ]
                        }
                ]
        } );
});

I am clearly dong something wrong, as the dirId parameter never reaches the server Any help in finding a solution would be most appreciated

glenderson

I think you need to pass the variables more like the example from this link, https://datatables.net/examples/server_side/custom_vars.html

        "ajax": {
                                "url":  "http://myServer/ajax/ajaxDirDetail.php",
                                "type": "POST",
                                "data": function ( d ) {
                                      d.dirId =  "xx1234";
            }
        }

It seems that you put the "extra" parameters into the data array.

allan

"dirId": "xx1234"

The dirId property is not something that Editor or jQuery will understand in the Ajax configuration object. To send additional data to the server use ajax.data (Editor) and ajax.data (DataTables) - they both work the same way:

ajax: {
  url: ...,
  type: ...,
  data: function ( d ) {
    d.dirId = 'xx1234';
  }
}

Regards,
Allan

monkeyboy

Works like a charm!

Thanks to you both for responding so quickly!