CODEWITHSUNDEEP
javascriptjqueryajaxdatatablescolorbox
Arif
Arif

Reputation: 1211

Reload dataTable after form submit inside colorbox

I have a page test.php where I fetch data using jQuery DataTables. There is an "Add Note" button in the same page which opens an ajax form inside colorbox. The form submission is working fine but I want to refresh DataTables when a record is inserted in my database.

DataTable:

$(document).ready(function() {
   $('#example').DataTable();
});

Ajax Form: Note that this form load inside colorbox popup

if (error == false) {
    $.post("submit.php", $("#add_note").serialize(), function (result) {
        if (result == 'success') {
            $('#error_msg').remove();
            $('#success_msg').fadeIn(500);
            // want to reload DataTables here
        } else {
            $('#error_msg').fadeIn(500);
        }
    });
}

My Solution: I try different methods and the below method refresh the page content but only for the first time. If I want to submit form for the 2nd time without page refresh, then the ajax form stopped working.

$(".content-wrapper").load('test.php');

Upvotes: 2

Views: 653

Answers (1)

Sebastianb
Sebastianb

Reputation: 2060

If you're loading DataTables through its ajax option (which I'd recommend for this particular case), you can reload its data using the API.

First, keep the DataTables instance in a global variable, and then call the API using such variable:

var table;
$(document).ready(function() {
   table = $('#example').DataTable();
});

if (error == false) {
    $.post("submit.php", $("#add_note").serialize(), function (result) {
        if (result == 'success') {
            $('#error_msg').remove();
            $('#success_msg').fadeIn(500);
            table.ajax.reload();
        } else {
            $('#error_msg').fadeIn(500);
        }
    });
}

Hope it helps!

Upvotes: 0

Related Questions