Return data from AJAX request

Question

I need to use "data" to populate my datatable columns but it is (naturally) undefined outside the AJAX get. How could i resolve this?

    $(document).ready( function () {

        $('#search').keyup(function(){
            q = $(this).val();
            $.get( "allUsers/?search=" + q ,   function (data) {

            });  
        });

        $('#example').DataTable({
            data: data,
            columns: [
                { data: 'name.first'},
                { data: 'name.last' },
                { data: 'email' }

            ]
        });       

    });

Refer this: `https://stackoverflow.com/questions/44804048/how-do-you-dynamically-set-ajax-data-in-datatables/44804154#44804154` — chirag satapara, Jun 29 '17 at 10:08
move the call to DataTable inside the callback of your $.get. Ajax requests are asynchronous, so "data" will not exist until the $.get completes, at which point the callback will run. Before that, your current call to DataTable will have run a long time ago. Also "data" would be out of scope anyway. — ADyson, Jun 29 '17 at 10:08
@ADyson I thought the same, but that would be wrong, since it creates a DataTable with every keystroke — lumio, Jun 29 '17 at 10:09
@lumio so it would. I had overlooked the extra keyup bit as well. I think trying to refresh the whole table on every keyup is going to overload the page pretty quickly actually, even if it could be made to work. I suspect datatables has a better way to cause the data to be refreshed, perhaps the link you posted will be the answer. — ADyson, Jun 29 '17 at 10:11
@ADyson exactly :D maybe using a timeout to only update after a view ms — lumio, Jun 29 '17 at 10:12

kvn · Answer 1 · 2017-06-29T10:20:18.840

0

Create data tables in the callback to use the response.

Here is the updated code.

$(document).ready( function () {
    $('#search').keyup(function(){
        q = $(this).val();
        $.get( "allUsers/?search=" + q ,   function (data) {

            $('#example').DataTable({
                data: data,
                columns: [
                    { data: 'name.first'},
                    { data: 'name.last' },
                    { data: 'email' }
                ]
            });
        });  
    });       

});

If for any reason, you are restricted to create datatable in the callback, you can define a function which creates the data table and call it from wherever necessary.

Here is how you can do alternatively.

$(document).ready(function() {

    function createDataTable(data) {
        $('#example').DataTable({
            data: data,
            columns: [{
                    data: 'name.first'
                },
                {
                    data: 'name.last'
                },
                {
                    data: 'email'
                }
            ]
        });
    }


    $('#search').keyup(function() {
        q = $(this).val();

        $.get("allUsers/?search=" + q, function(data) {
            createDataTable(data);
        });
    });

});

Edits: Updated with suggestions from comments.

edited Jun 29 '17 at 10:20

answered Jun 29 '17 at 10:09

kvn

2,210
5
20
47

doesn't solve the problem that `$('#example').DataTable({` will execute long before `response` actually contains anything, because the $.get is asynchronous. – ADyson Jun 29 '17 at 10:10
I wonder if DataTable would update the table on a change. Have you tried that? – lumio Jun 29 '17 at 10:10
@lumio Yes. Datatable wouldn't update the table on change. I updated the answer with an alternative approach. The function `createDataTable` needs to called with the respective data whenever the data is changed. – kvn Jun 29 '17 at 10:19
Looks good :) but I guess it would be even better to work with a timeout, so it won't fetch data on every keystroke. – lumio Jun 29 '17 at 10:37
That is right. But the OP didn't mention the exact context of the problem. I'm assuming that the OP is already taking care of such issues. – kvn Jun 29 '17 at 10:42
My code shouldn't reinitialise the datatable, just update the data. This is the main problem – Alessio Jun 29 '17 at 12:06
Ok. You should have mentioned that problem in the question. Anyways, this answer will give the exact information. https://stackoverflow.com/questions/27778389/how-to-manually-update-datatables-table-with-new-json-data – kvn Jun 29 '17 at 13:06

score -2 · Answer 2 · answered Jun 29 '17 at 10:10

-2

You can do it like this. Pass argument to ajax function and use that directly

   function populate(data){
     $.ajax({
            type:"GET",
            url:"Task-detail-table.jsp",
            async: false,
            data:{value:data },
            dataType:"html",
            success:function(data) {

                $("#Table").html(data);

            },
            error:function() {
                alert("Error");
            }
        })

  }

answered Jun 29 '17 at 10:10

JAGAT DAS

29
4

He is not loading HTML – lumio Jun 29 '17 at 10:11
this is completely unrelated random generic code which makes no attempt to address the specific issue in the question – ADyson Jun 29 '17 at 10:12

Return data from AJAX request

2 Answers2