Double ajax call when reloading datatable

Question

I have a datatable intialised like this:

var _initTable = function() {
    $('#datatablesresults tr').not(':first').on('click', function() {
        var dateandtime = $(this).find(':nth-child(3)').text();
        window.location.href = '/results/detail/dateandtime/' + dateandtime;
    });
};

$('#datatablesresults').dataTable({
    bProcessing  : true,
    sProcessing  : true,
    bServerSide  : true,
    sAjaxSource  : '/results/load-results',
    fnServerParams: function ( aoData ) {
        aoData.push( {"name": "quizid", "value": quizid },{ "name": "questionid", "value": questionid } );
    },
    aoColumnDefs : [{'bSortable' : false, 'aTargets' : ['no-sort']}], // make the actions column unsortable
    sPaginationType : 'full_numbers',
    fnDrawCallback  : function(oSettings) {
        _initTable();
    }
});

When I click on a button I want to reload the data in the table (make an ajax call)

$('.carousel-control.right').click(function() {
    var currentquestion = $('#myCarousel .active').index('#myCarousel .item') + 1;
    var question = currentquestion + 1;

    var quizid = <?= json_encode($quizid); ?>;

    var activediv = $('.item').filter('.active');
    var questionid = activediv.index() + 2;

    var questionclass = ".question" + questionid;

    var questionid = $(questionclass).attr("id");

    var getParams = "quizid=" + quizid +"&questionid=" + questionid;

    $("#datatablesresults").dataTable().fnReloadAjax("/results/load-results?" + getParams);
});

But the data stays the same ... Here you see my ajax calls: enter image description here

The first is when my page is loaded. The second is my ajax refresh, the data that's resend is different then the other. But then you see there's another ajax call that overwrites the data ... :/

Does anyone knows what I'm doing wrong?

EDIT: I've made a jsfiddle: http://jsfiddle.net/8TwS7/

Assigning to window.location.href reloads the page, could that be it? — Barmar
– Barmar, Commented Nov 15, 2013 at 16:33
That's only when you click on a row in the table. And I'm 100% sure the page doesn't reload. — nielsv
– nielsv, Commented Nov 15, 2013 at 16:33

Nick Carson · Accepted Answer · 2013-11-15 20:41:30Z

2

You dont need to use .dataTable() once you already defined it.

First assign the datatable to a variable:

var myDataTable = $('#datatablesresults').dataTable({
    bProcessing  : true,
    sProcessing  : true,
    bServerSide  : true,
    sAjaxSource  : '/results/load-results',
    fnServerParams: function ( aoData ) {
        aoData.push( {"name": "quizid", "value": quizid },{ "name": "questionid", "value": questionid } );
    },
    aoColumnDefs : [{'bSortable' : false, 'aTargets' : ['no-sort']}], // make the actions column unsortable
    sPaginationType : 'full_numbers',
    fnDrawCallback  : function(oSettings) {
        _initTable();
    }
});

Then just use fnReloadAjax on that variable to refresh it:

myDataTable.fnReloadAjax("/results/load-results?" + getParams);

answered Nov 15, 2013 at 20:41

Nick Carson

6981 gold badge5 silver badges11 bronze badges

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

2 Comments

Nick Carson Over a year ago

Can you populate the table with some dummy data in your jsfiddle? It's kinda hard to tell whats going on here. I would trim your code to the minimum example needed to get things going

ficuscr Over a year ago

I was having an issue with 2 xhr requests per page load. Dropped the ServerSide argument completely and it stopped. Seems assigning ajaxSource was more than enough.

Community · Accepted Answer · 2017-05-23 10:31:43Z

0

when you call this line

$("#datatablesresults").dataTable().fnReloadAjax("/results/load-results?" + getParams);

you are re-initializing the datatables again

place your datatables() in the doc ready in a variable, then call fnDraw() to redraw the table...like i answered in your other question Reload datatable data with ajax call on click

if you need more help post your entire js code and i'll show you

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Nov 15, 2013 at 20:16

Jay Rizzi

4,3046 gold badges45 silver badges73 bronze badges

2 Comments

nielsv Over a year ago

Then I just get this error: Uncaught TypeError: Cannot read property 'oFeatures' of null

Jay Rizzi Over a year ago

you will have to post your entire source via jsfiddle in order to troubleshoot that...something is out of whack and without looking at all your source code i would only be guessing

Collectives™ on Stack Overflow

Double ajax call when reloading datatable

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related