Reloading AJAX Data

GeorgeIoak

I have a form that I'm trying to use to create/update a DataTable with when the form field changes. The value in this form field is passed to the PHP code and used as an additional where clause. I can't seem to get the DataTable to redraw/reload when I change this form field.

(function($){

$(document).ready(function() {
    $('#lnamesearch').autocomplete({
        source:'php/lookupAttendee.php', 
        minLength:2,
        select:function(evt, ui)
        {
            // when a lnamesearch is selected, populate related fields in this form
            $('#formSelPerson #lname').val(ui.item.last);
            $('#formSelPerson #fname').val(ui.item.first);
            $('#formSelPerson #mname').val(ui.item.middle);
            $('#formSelPerson #address').val(ui.item.address);
            $('#formSelPerson #city').val(ui.item.City_chk);
            $('#formSelPerson #state').val(ui.item.State_chk);
            $('#formSelPerson #zip').val(ui.item.ZIP_Code);
            Mytable.ajax.reload();
            $(this).val('');
            return false
        }
    });
    //console.log($('#formSelPerson #lname').val());
    
    var editor = new $.fn.dataTable.Editor( {
        ajax: {
            url: "php/table.allrecords.php",
            data: {
                Lname: $('#formSelPerson #lname').val()
            }   
        },
        table: "#allrecords",
        fields: [
            {
                "label": "conf_year",
                "name": "conf_year",
                "type": "text"

(...section omitted for brevity...)

    $('#allrecords').on( 'click', 'tbody tr:not(.child) td:not(:first-child), tbody span.dtr-data', function (e) {
        editor.inline( this );
    } );

    var Mytable = $('#allrecords').DataTable( {
        responsive: true,
        dom: "Tfrtip",
//      ajax: "php/table.allrecords.php",
        ajax: { 
            url: "php/table.allrecords.php",
            data: {
                Lname: $('#formSelPerson #lname').val()
            }    
        },
        columns: [
            {
            data: null, 
            defaultContent: '',
            orderable: false 
            },
            {
                data: "conf_year"
            },

GeorgeIoak

I tried every combination I could think of and the only way I could get this to work was to change

     Mytable.ajax.reload();

to:

var url = "php/table.allrecords.php?Lname=" + ui.item.last;
            Mytable.ajax.url( url ).load();

allan

Hi,

You currently have:

data: {
                Lname: $('#formSelPerson #lname').val()
            }

which is evaluated only once - when the initialisation function is executed. Therefore, even if you change the value, it would never be used.

What you want is for it to be evaluated every time the request is made, which you can do by using ajax.data and ajax.data as functions:

data: function ( d ) {
  d.Lname = $('#lname').val();
}

(I removed the first ID selector since it wasn't needed - DOM ids must be unique on the page, so only the second one is needed).

Regards,
Allan

GeorgeIoak

OK, that helps explain why it wasn't working as expected. I just tested that and it works as expected.

One related quested I have found the answer to. it doesn't appear that I need to add these to the fn.dataTable.editor, right?

allan

If you don't need to send an Lname parameter to the server on Editor requests, then no, you don't need to use ajax.data.

Allan