DataTable doesn't post a value of input type=hidden in an AJAX request.

ctdrf

My DataTable var table = $('#example').dataTable() is supposed to be populated when a value in a dropbox changes. I want to be able to select an entry in a dropbox, and that action shall trigger an AJAX request which passes the val() of the selected entry as an ID to the query.

I also have a <select> (dropdown) control on the form which is empty at design time, and is populated by another AJAX request. Last but not least is a hidden control which stores the ID before it actually gets posted by the DataTable:

<div>
  <select class="form-control" id="objs" style="display:none">
  </select>
</div>

<input class="form-control" type="hidden" id="oid" name="oid" value="0">

Here is how I do the rest:

$('#objs').change(function() {
  $('input[name="oid"]').val(this.value);
  table.DataTable({
    ajax: {
      data: {oid: $('#oid').val()}
    }
  });
  //alert($('input[name="oid"]').val());
  table.DataTable().ajax.reload();
});

The dropdown's onchange event handler works perfectly, and displays the objects's IDs in an alert box. However the Chrome debugging tools show that the oid form control never gets initialized. So the form which is internally created by the DataTable is posted without the object ID. Here is how it looks like:

Array
(
  [oid] => 
)

What am I doing wrong? I suspect there might be some variable scope issues or the DataTable merely disregards the current value of oid when it does ajax.reload().

kthorngren

It looks like you are attempting to set the ajax data object by using Datatables init parameters on a Datatable that is already established. I don't think that will work because Datatables parameters can't be changed after the original initialization.

I think what you want to use is the preXhr to set the data. There is an example in the docs.

Kevin