AJAX variables not updating

techguy12

I'm trying to add some custom fields to my AJAX query. I've settled on the most "bullet-proof" solution, which is storing it in a hidden input.

Basically, the table setup is:

        var dataTable = $('#myTable').DataTable({
            "ajax": {
                "url": "{{ route('list-products') }}",
                "type": "GET",
                "data": function (d) {
                    return $.extend({}, d, {
                        "category":  myCategory,
                    });
                },
            },
            stateSaveParams: function (settings, data) {
                data.category = $("#myTable-category").val();
            }

Apologies if the formatting drives you crazy, it's what the editor suggested is for "code."

On page load this works - I populate the $("#myTable-category") field, and it gets sent to the server as the category variable.

HOWEVER - if I update that hidden input value, the datatable never refreshes that data before it sends to the server - it continues to use the same initial value in the input field. Everything else works as it should, changing page numbers, order, etc. If I examine the stateSaveParams, the new value is in there.

stateSaveParams: 
category: "Category One"
childRows: []
columns: (4) [{…}, {…}, {…}, {…}]...

Click on another link and the category does update:

stateSaveParams: 
category: "Category Three"
childRows: []
columns: (4) [{…}, {…}, {…}, {…}]...

But the server sees the same category each time no matter what's swapped out.

Thanks in advance!!! I'm sure I'm running all around the solution.

colin

You're not showing how myCategory is set. If that was set at page load, then that would be the case - you would need to get the value from your hidden field each time ajax.data is called.

Colin