ProfoundHypnotic
ProfoundHypnotic

Reputation: 56

How to send form data to php script in Jquery Datatables using AJAX option?

I am trying to send data to a php script with AJAX from the DataTables options. The problem I am running into is that my php script is returning an undefined error. I followed through the code with DevTools and I can see that serialize() is correctly returning the selection from the form but the php script still tells me that $Wrkgrp is undefined.

Edit: I did not include script tags or html (body,etc) tags or sake of brevity

Note: The JS code works if I put the datatable initialization inside the success function of an Ajax call instead of the below.

Code

 <div style="Width:auto;margin:auto;float:right;">
 <form method="post" id="filters" autocomplete="off" action="'test.php">
  Workcenter: <br>
   <select id='Wrkgrp' name='Wrkgrp'>
    <option value='Gen_Assy' selected>Gen_Assy</option>
    <option value='Laser_Bend'>Laser_Bend</option>
    <option value='Paint'>Paint</option>
    <option value='Rig'>Rigging</option>
    <option value='Tank_Assy'>Tank_Assy</option>
    <option value='Weld'>Weld</option>
   </select>
 <input type="submit" name="submit" value="Submit">
</form>
</div>

$(document).ready(() => {
    $('#GA').DataTable({
        ajax:{
            type: 'post',
            url: 'test.php',
            dataType: 'json',
            data: $('#filters').serialize()
        },
        dom: 't',
        createdRow: (tr, _,rowIndex) => $(tr).attr('rowIndex',rowIndex),
        columns:[
            {data: 'NAME', title: 'Name'},
            {data: 'ROOF_ASSEMBLY', title: 'Roof Assembly'},
            {data: 'DOOR_ASSEMBLY', title: 'Door Assembly'},
            {data: 'WALL_ASSEMBLY', title: 'Wall Assembly'},
            {data: 'PLENUM_ASSEMBLY', title: 'Plenum Assembly'},
            {data: 'TANK_BASE_ASSEMBLY', title: 'Tank/Base Assembly'},
            {data: 'FINAL_ENCLOSURE_ASSEMBLY', title: 'Final Enclosure Assembly'},
            {data: 'ENCLOSURE_ELECTRICAL', title: 'Enclosure Electrical'},
            {data: 'SUBPANEL_ASSY_WIRING_ELECTRICAL', title: 'Sub-Panel Assy Wiring'},
            {data: 'PREP_ELECTRICAL', title: 'Prep Electrical'},
            {data: 'TANK_BASE_ELECTRICAL', title: 'Tank/Base Electrical'},
            {data: 'FINAL_ASSEMBLY_ELECTRICAL', title: 'Final Assembly Electrical'},
            {data: 'CRANE_OPERATION_SAFETY', title: 'Crane Operation & Safety'},
            {data: 'RESPIRATORY_PROTECTION', title: 'Respiratory Protection'},
            {data: 'HEAVY_LIFTING', title: 'Heavy Lifting'},
            {data: 'FORKLIFT_CERTIFIED', title: 'Forklift Certified'},
            {data: 'LOCKOUT_TAGOUT_CERTIFIED', title: 'Lockout Tag-out Certified'},
            {data: '5S_TRAINING', title: '5S Training'},
            {data: 'CRANE_SLING_TRAINING', title: 'Crane & Sling Training', render: function (data,type,row,meta) {'<i class="edit fa fa-pencil"></i>';} ,width: '20%'}
        ],
        pageLength: 50
    });
});

test.php

$wrkgrp = $_POST['Wrkgrp'];

try {
    $conn = new PDO ($o,$user,$p);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOExeception $e){
    echo "Connect Failed: " . $e->getMessage();
}

if ($wrkgrp === 'Gen_Assy'){
    $qry = "select EMPLOYEE.NAME, GEN_ASSY.ROOF_ASSEMBLY,GEN_ASSY.DOOR_ASSEMBLY,GEN_ASSY.WALL_ASSEMBLY,GEN_ASSY.PLENUM_ASSEMBLY,GEN_ASSY.TANK_BASE_ASSEMBLY,GEN_ASSY.FINAL_ENCLOSURE_ASSEMBLY,
                GEN_ASSY.ENCLOSURE_ELECTRICAL,GEN_ASSY.SUBPANEL_ASSY_WIRING_ELECTRICAL,GEN_ASSY.PREP_ELECTRICAL,GEN_ASSY.TANK_BASE_ELECTRICAL,GEN_ASSY.FINAL_ASSEMBLY_ELECTRICAL,GEN_ASSY.CRANE_OPERATION_SAFETY,
                GEN_ASSY.RESPIRATORY_PROTECTION,GEN_ASSY.HEAVY_LIFTING,GEN_ASSY.FORKLIFT_CERTIFIED,GEN_ASSY.LOCKOUT_TAGOUT_CERTIFIED,GEN_ASSY.5S_TRAINING,GEN_ASSY.CRANE_SLING_TRAINING
            from GEN_ASSY left join EMPLOYEE on GEN_ASSY.EMPLOYEE = EMPLOYEE.ID order by EMPLOYEE.NAME";
}
$stmt = $conn->prepare($qry);
$stmt->execute();
$result = $stmt->fetchall(PDO::FETCH_ASSOC);
echo json_encode($result);

Upvotes: 0

Views: 968

Answers (1)

ProfoundHypnotic
ProfoundHypnotic

Reputation: 56

Andrew James comment was correct. I needed to use a function in the data option of the Ajax call within the DataTables options.

var dT = $('#GA').DataTable({
        ajax:{
            type: 'post',
            url: 'test.php',
            dataType: 'json',
            dataSrc: '',
            data: function (d){
                d.Wrkgrp = $('#Wrkgrp').val();
            }
        },
        dom: 't',
        createdRow: (tr, _,rowIndex) => $(tr).attr('rowIndex',rowIndex),
        columns:[
            {data: 'NAME', title: 'Name'},
            {data: 'ROOF_ASSEMBLY', title: 'Roof Assembly'},
            {data: 'DOOR_ASSEMBLY', title: 'Door Assembly'},
            {data: 'WALL_ASSEMBLY', title: 'Wall Assembly'},
            {data: 'PLENUM_ASSEMBLY', title: 'Plenum Assembly'},
            {data: 'TANK_BASE_ASSEMBLY', title: 'Tank/Base Assembly'},
            {data: 'FINAL_ENCLOSURE_ASSEMBLY', title: 'Final Enclosure Assembly'},
            {data: 'ENCLOSURE_ELECTRICAL', title: 'Enclosure Electrical'},
            {data: 'SUBPANEL_ASSY_WIRING_ELECTRICAL', title: 'Sub-Panel Assy Wiring'},
            {data: 'PREP_ELECTRICAL', title: 'Prep Electrical'},
            {data: 'TANK_BASE_ELECTRICAL', title: 'Tank/Base Electrical'},
            {data: 'FINAL_ASSEMBLY_ELECTRICAL', title: 'Final Assembly Electrical'},
            {data: 'CRANE_OPERATION_SAFETY', title: 'Crane Operation & Safety'},
            {data: 'RESPIRATORY_PROTECTION', title: 'Respiratory Protection'},
            {data: 'HEAVY_LIFTING', title: 'Heavy Lifting'},
            {data: 'FORKLIFT_CERTIFIED', title: 'Forklift Certified'},
            {data: 'LOCKOUT_TAGOUT_CERTIFIED', title: 'Lockout Tag-out Certified'},
            {data: '5S_TRAINING', title: '5S Training'},
            {data: 'CRANE_SLING_TRAINING', title: 'Crane & Sling Training', render: function (data,type,row,meta) {return data+'<i class="edit fa fa-pencil"></i>';}}
        ],
        pageLength: 50
    });

Upvotes: 1

Related Questions