0

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);
4
  • Typo here? action="'test.php" Commented Oct 21, 2022 at 18:22
  • Just a comment, since I don't know if this solves your problem... In order to use the ajax.data option in DataTables for dynamically provided data, you cannot use something like data: $('#filters').serialize(). This will always use whatever data was in #filters when the DataTable is initialized (presumably nothing) and it will never be revisited. Instead, use the function() form: "data": function ( d ) { ... }. This is documented with examples here. This function will re-execute upon every submission. Commented Oct 21, 2022 at 18:47
  • Nice catch. can't believe I missed it. unfortunately, I still get that undefined error from the PHP script. @AlexHowansky Commented Oct 21, 2022 at 18:48
  • 1
    @andrewJames Thank you! I was able to figure out the function part in my data option and that worked. Thanks again for the suggestion. I have added my answer below Commented Oct 21, 2022 at 19:40

1 Answer 1

1

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
    });
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.