Ajax calls a malformed url to get data

iordanougiannis

I am using server-side processing to display data that are filtered through a django rest framework view and a form.

The url that is passed to the view I think consists of two parts: the filters part and the server-side processing part.

The portion of the url that is generated by serializing the form with the filters would look like that:

/?date_from_day=8&date_from_month=5&date_from_year=1960&date_to_day=11&date_to_month=8&date_to_year=2018

But in my case every letter of the above url has become a parameter:

instead of ?date_from_day=8,

I get:
?0=d&1=a&2=t&3=e&4=_&5=f&6=r&7=o&8=m&9=_&10=d&11=a&12=y&13=%3D&14=8

After the filters portion the server-side processing portion is formated correctly.

I have hardcoded some values for the filters in the drf view to test it and it works correctly.

Below is how I make the ajax call:

        "ajax": {
            "processing": false, 
            "type": 'GET',
            "url": '/my-products-filter/',
            "data": productsForm.serialize(),
            "dataSrc": "data"
         },

I am not sure what is happening here.

colin

Hi @iordanougiannis ,

That doesn't sound like a DataTables issue, unless I'm missing something, it sounds like how django is operating, so would be worth raising on their forum. If you think it is DataTables specific, we're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

iordanougiannis

I have tried using just jquery and ajax without datatables to get the filtered data and it works.

It also works if I use datatables without server-side processing but instead of making the ajax request inside datatables, I provide the data to it:

 $.ajax({
        type: 'GET',
        url: '/my-products-filter/',
        data: productsForm.serialize(),
         success: function(response) {
            var productsTable = $('#exampleAjax3').DataTable({...
                        productsTable .clear();  // Clear all rows
            productsTable .rows.add(response).draw();  // Add rows from response
            dataSet = response;

I haven't tried making the reuest inside the datatables in the example above.

It seems odd that the datatables part is formated correctly but the filters is not.

If everything went as planned the ajax url would be like below:

/?date_from_day=8&date_from_month=5&date_from_year=1960&date_to_day=11&date_to_month=8&date_to_year=2018&draw=1(the datatables part) ?

I think it's more related to ajax since I can see the malformatted url being sent from Chrome Network console.

colin

That does seem odd, but without a test case, or seeing it on your live system, it makes it hard to diagnose... Maybe other users can comment if they've seen something similar.

iordanougiannis

Is productsForm.serialize() the appropriate format for the data parameter in Datatables ajax function ?

allan

You aren't actually using the DataTables Ajax features above - you are going stright to $.ajax, which is fine, but it would be the jQuery documentation you'd need to refer to for the options available.

Allan

iordanougiannis

For the "data" parameter in the ajax call I passed an object and not a string and it worked correctly.

Instead of productsForm.serialize()

I passedJSON.parse('{"' + productsForm.serialize().replace(/&/g, '","').replace(/=/g,'":"') + '"}', function(key, value) { return key===""?value:decodeURIComponent(value) })