CODEWITHSUNDEEP
javascriptjqueryajaxdatatables
nielsv
nielsv

Reputation: 6820

Double ajax call when reloading datatable

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/

Upvotes: 4

Views: 5647

Answers (2)

Jay Rizzi
Jay Rizzi

Reputation: 4304

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

Upvotes: 0

Nick Carson
Nick Carson

Reputation: 698

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);

Upvotes: 2

Related Questions