Question about using DataTables with Ajax (wordpress-Ajax).

mesqueeb

My Ajax data won't get load properly into the datatable. And I think it's because the URL I insert into DataTables doesn't give me the proper JSON data. But for my AJAX formula it is the correct URL...

The AJAX Formula:

$.get(
            ajax_url,
            data,
            function(data) { // AJAX callback
                console.log(data);
                fill_json(data);
            });

You I get JSON data that originally fill in using the function down below:

var fill_json = function(data){
    var jsonData=$.parseJSON(data); //change here
        $.each(jsonData, function(i) {
            var tblRow = "<tr>" + "<td>" + jsonData[i].ID + "</td>" +
            "<td>" + jsonData[i].post_title + "</td>" + "<td>";
            $(tblRow).appendTo("#testajax tbody");
        });
};

The data is rootless JSON:

[{"ID":"4066","post_title":"TATTOO SLEEVES","category":"Apparel & Accessories","slug":"apparel-and-accessories","supplier_company":"\u682a\u5f0f\u4f1a\u793e\u30bb\u30f3\u30bf\u30fc\u5546\u4e8b","allslug":"apparel-and-accessories, accessories, textiles, toys, gifts-toys-and-animation, english","allcatname":"Apparel & Accessories, Accessories, Textiles, Toys, Gifts, Toys & Animation, \u82f1\u8a9e"}]

Then I have the Datatable function which I coded just like in the guide (columns set from root):

$( document ).ready(function() {
var t2e = $('#testajax').DataTable({
        "ajax": {
            "url":"<?php echo admin_url( 'admin-ajax.php' ); ?>",
            "dataSrc":""
        },
        "columns": [
            { "data" : "ID" },
            { "data" : "name" },
        ],

});

});

With my function fill_json(data); my data appears, but this is not initiated properly into the DataTable. If I comment this out nothing happens on the Ajax call. Datatables doesn't fill in the table...

DataTables isn't able to fill the data from this link: "url":"<?php echo admin_url( 'admin-ajax.php' ); ?>", But it is the same link as my AJAX call... Any ideas?

allan

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page], if you can't provide a link to your own page can be found here.

Thanks,
Allan

mesqueeb

Dear Allan,
I'm very sorry!
Here is my test page: You have to press the submitt button.
You can see the datatable at the very bottom.
http://jtc.ae/?page=ajax_test

Will this be sufficient? Please tell me if there's anything else you need!

allan

Thanks for the link. The Ajax request that is being made to the admin-ajax.php file is returning:

0

That's not a valid JSON data source (although it is technically valid JSON!). I think you need to check the server-side script to see why it is not responding with data.

Allan

mesqueeb

Where can you see that it replies 0?

mesqueeb

Dear Allan,
after some research I found out the following:

"In WordPress AJAX actions, you aren't supposed to return the response, but echo the response and call die yourself. WordPress will continue to call all of the AJAX registered callbacks until one of the callbacks kills the execution, with the final one dieing with the response of 0."

Do you think there is any workaround possible?

This is what my AJAX hook looks like when I return the Data:

    $result = "some sql query";
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        $result = json_encode($result);
        echo $result;
    } else {
        header("Location: ".$_SERVER["HTTP_REFERER"]);
    }

   die();

allan

I haven't used WordPress much myself so I can't really comment on that aspect. You'd need to ask in a WP support forum.

Regarding how to see the returned data, you can use the information available here to see that data.

Allan

mesqueeb

Dear Allan,
Could you have a look at this test page:
http://jtc.ae/?page=s_page

The ajax response in the network tab has the json string written on the 8th line, so it's not blank.

The table gets generated successfully but it just says "no data"...

allan

No I need to do anything to get it to load the DataTable and make the Ajax request? On the link above, it doesn't appear to automatically make any Ajax requests.

There are two Javascript errors occurring on the page which might effect the issue though.

Allan

mesqueeb

I fixed the JS error, now you can see:
it makes the request automatically. Otherwise you can press the search button to refresh the ajax request.

The ajax file is called admin-ajax.php with a GET ajax request. Here is a screenshot of my network tab:

https://www.dropbox.com/s/kpj6ldvv09nq9qa/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202016-03-18%2019.18.48.png?dl=0

allan

Thanks - it is indeed making the Ajax request now. I'm not entirely sure how to make the table visible though. Can you tell me know to do that? it is in a #manage_items_results element which is display:none and I can't find the button to make it visible.

Allan

mesqueeb

Hey Allan, Thanks for looking into this!
I've made #manage_items_results. However, this is a normal datatable from rendered HTML. Please have a look at #dynamic_table for the AJAX one.

Best regards,
-Luca Ban

allan

Can you tell me how I can see that table please.

mesqueeb

The dynamic table is the one at the very bottom of the page. You do not need to click on anything to run the AJAX.
It looks like this:

var dyn_t = $('#dynamic_table').DataTable({
        "ajax": {
            "url":"http://jtc.ae/pre/wp/wp-admin/admin-ajax.php",
            "dataSrc":""
        },
        "columns": [
            { "data" : "ID" },
            { "data" : "name" },
            { "data" : "supplier_company" },
            { "data" : "img_src" },
            { "data" : "tags" },
            { "data" : "post_meta" },
        ],

});

And this is the HTML before the table gets rendered:

<table id="dynamic_table">
    <thead><tr>
            <th>ID</th>
            <th>NAME</th>
            <th>supplier_company</th>
            <th>img_src</th>
            <th>tags</th>
            <th>post_meta</th>
    </tr>   </thead>
</table>

If you do a search in the developers tools' "elements" tab, you'll immediately find it.
And as you can see in the "network tab", it does have the correct ajax response. However the json string in the ajax response is on line 8. and line 1 to 7 are empty. I'm not sure if this is relevant or not.

Best regards,
-Luca Ban

allan

Thanks - I see the table now. However,t he request to admin-ajax.php is still just returning 0 (and a few new line characters).

There is a second character request with an action which is returning valid and good JSON. But that is not the Ajax request that DataTables is seeing.

You can see this in the debug trace: http://debug.datatables.net/ebohuy . Click the "Tables" tab and then find the "Server interaction" label and click on it. You'll see that the server has returned "0".

Allan

mesqueeb

Dear Allan,
If I comment out the whole initialiser for my DataTable. And I open the page, it only loads 1 ajax call. And it has the correct GET variables in the Ajax link. (you can see this in the console)

However, if I open console and paste the Ajax DataTable initialiser there to initialise it manually, it creates a new ajax call that gives me the empty ajax-response we've had until now. This ajax call is only called upon when initialising the DataTables...

I think the problem is simple:

My original Ajax request is a GET request and gives the correct data because it uses this link as you can see in the network tab:
http://jtc.ae/pre/wp/wp-admin/admin-ajax.php?nonce=c0ef33fb38&action=product_search&search_str=&p_num=3&item_num=20&cate=&child_cate=

However, the DataTables ajax link that is called uses a complete different link:
http://jtc.ae/pre/wp/wp-admin/admin-ajax.php?_=1458612450243
Which has completely different GET variables as you can see...

I think that if I can change the GET variables of the DataTables ajax request to the correct ones, the response should work and the DataTable should initialise correctly.

To check what I did you can do the following steps:
1) Open http://jtc.ae/?page=s_page
2) Look at the Network tab, it has only 1 response with correct data.
3) Initialise the DataTable manually:

var dyn_t = $('#dynamic_table').DataTable({
        "ajax": {
            "url":"http://jtc.ae/pre/wp/wp-admin/admin-ajax.php",
            "dataSrc":""
        },
        "columns": [
            { "data" : "ID" },
            { "data" : "name" },
            { "data" : "supplier_company" },
            { "data" : "img_src" },
            { "data" : "tags" },
            { "data" : "post_meta" },
        ],
 
});

4) See that DataTables calls a ajax request with wrong GET variables.

allan

I think that if I can change the GET variables of the DataTables ajax request to the correct ones, the response should work and the DataTable should initialise correctly.

I would agree. You can see in your URL above that it doesn't have any GET parameters. I would suggest simply adding them. Or use ajax.data to add them.

DataTables can't automatically know what you want the GET parameters to be - you need to tell it!

Allan

mesqueeb

Dear Allan,

I was able to launch the DataTable once from the AJAX call by adding the correct "data" like you said.
However, my page works with an AJAX formula that gets fired each time something else is searched for like this:

$.get(
    ajax_url,
    data,
    function(data) { // AJAX callback
    }
 );

So I tried pasting the DataTable initialiser behind this function, but when I fire the ajax search a second time I get the error that DataTables has already been initialised... Is there a way to just launch the "ajax call" and refresh the response inside the DataTable initialiser without trying to re-initialise the DataTable?

allan

Use ajax.url() if you want to change the URL (if you did it that way) or use ajax.data as a function if you did it that way.

Allan

mesqueeb

Dear Allan,
Thank you for taking me through this quest. I was finally able to make it work. I had to change from a ajax.data approach to the ajax.url approach, because I just could not figure out how to use ajax.data "as a function"... There are some examples but I couldn't get it right... If you could add a really clear example that would be great.

I got it working with ajax.url but if anyone knows how to do it with ajax.data please look here on StackOverflow: http://stackoverflow.com/questions/36169941/how-to-change-ajax-data-in-datatables

Anyway for the record, the code I used with ajax.url:

launch_datatable_ajax = function(){
    get_ajax_data();
    dyn_t = $('#dynamic_table').DataTable({
            "ajax": {
                "url":ajax_dt_url,
                "dataSrc":""
            },
            "columns": [
                { "data" : "ID" },
                { "data" : "post_title" },
                { "data" : "supplier_company" },
                { "data" : "img_src" },
                { "data" : "tags" },
                { "data" : "post_meta" },
            ],
    
    });

}

**NOTE: ** the ajax_dt_url is the full ajax url with the proper get-values added.

Every time the user makes a new search to update the search values (aka the get-values) the ajax_dt_url variable gets updated and the following function is launched:

dyn_t.ajax.url( ajax_dt_url ).load();

This refills my table with the correct new data.