jQuery DataTables Ajax call is not working

Question

I've got multiple data-tables and they all have their own ID. Now this is no problem at all, the problem I'm having is that my code seems to be able to output my console.log() calls perfectly but in my Network tab I don't see my ajax call?

I'm using the following jQuery code:

function DtAjax(type) {
    console.log("Type: "+type);
    if($('#data-table_' + type + '_wrapper').children().length == 0){
        console.log("True");
        $('#data-table_' + type).DataTable({
            "ajax": "<?php echo base_url('admin/emails/ajax/get'); ?>" + "/" + type
        });
        console.log("End function");
    }
}

$(document).ready(function(){
    DtAjax(1);
    $("li .changeContent").on('click', function (event) {
        event.preventDefault(); // Prevents going to a different URL

        // Content change
        $(".mailContent").hide('drop', 500).removeClass("active_div");
        $("." + $(this).attr('data-open')).delay(500).show('drop', 500).addClass("active_div");

        // button set new active
        $("#icon_nav_h > li.active").removeClass('active');
        $(this).parent().addClass('active');
    });
});

It is logging everything inside the DtAjax function, any (obvious) reason why I cant find the Ajax call in my Network tab?

davidkonrad · Accepted Answer · 2015-06-12 09:33:01Z

2

I strongly suspect this to be a cache problem :

$('#data-table_' + type).DataTable({
  ajax: {
    url: "<?php echo base_url('admin/emails/ajax/get'); ?>" + "/" + type,
    cache: false
  }
});

cache is true by default.

answered Jun 12, 2015 at 9:33

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sritam Jagadev Over a year ago

1 simply best answer

Amjad Sarwar · Accepted Answer · 2017-10-23 14:52:44Z

$(document).ready(function(){
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/apiRequest/api/get',
        success:function(data){
            var result = JSON.parse(data);
            var len = Object.keys(result).length;
            var newLen = len - 1;
            for(i = 0; i <= newLen; i++){

            $( "#alldata" ).append( "<tr><td>"+result[i].fullname +"</td><td>"+result[i].email +"</td> <td>"+result[i].phone +"</td><td>"+result[i].service_type +"</td><td>"+result[i].vehicle_type +"</td> <td>"+result[i].date_time +"</td><td>"+result[i].pick_location +"</td> <td>"+result[i].drop_location +"</td> </tr>" );
        }
          $('#example').DataTable();
        }
    });
});

Oleksiï Nikonov · Accepted Answer · 2019-09-18 08:46:14Z

My ajax wasnt working as well and i had one console error Uncaught TypeError: Cannot read property 'length' of undefined.

So i added success function to make sure the response data is received and valid. Tracked the error location and i dont know why, but they for some reason added check of dataSrc option

I solved this problem just addin dataSrc option to ajax configs:

      ajax: {
        url: '/admin/api/modelType',

        // added onSuccess func to make sure the response data is valid
        success: (data) => {
          console.log('success', data)
        return data
        },

        dataSrc: ''
      }
}

UPDATE i found out dataSrc is a key where the elements are located in response data, for example if a responce data directly containes elements array [{element: '1'}] so leave it blanc dataSrc:''

but if response body comes with : {content: [{element: '1'}]} here it's go

      ajax: {
        url: '/admin/api/modelType',
        dataSrc: 'content'
        }
      }

Collectives™ on Stack Overflow

jQuery DataTables Ajax call is not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related