I have a data table that is populated on page load with links to open a modal. When the modal is filled out and the user clicks Submit, I have a function that works. On success, I need to open a confirmation modal, this works. And then I need to reload the data table. This is the part I'm stuck on. I've tried several possible ways, the div that I am requesting to reload contains no data and I receive an error for the data table that is does not contain any data.
Can someone send an example of where they have done something similar as far as reloading a datatable? Thank You!
Data Table:
function pageReady() {
var table = $('<table class="table table-hover table-striped row-border order-column">');
table.prependTo('#MyTable'
var myTable = table.DataTable({
data: myData,
columns: [
{
targets: [0],
title: "Ticket #", data: "TicketID", render: function (data) {
if (isAdmin) {
return '<u class="myLink" data-toggle="modal" data-target="#UpdateTicket
}
else {
return '<u class="myLink" data-toggle="modal" data-target="#TicketDetail
}
}
},
{ title: "Title", data: "Title", "width": "20%" },
{ title: "Description", data: "Description", "width": "25%" },
{ title: "Submitted By", data: "SubmittedUserName", class: "centered-text" },
{ title: "Submitted On", data: "SubmitDate", defaultContent: '', render: RenderShortDate, class: "centered-text" },
{ title: "Category", data: "CategoryName", class: "centered-text" },
{ title: "Status", data: "StatusName", class: "centered-text" }
],
deferRender: true
});
I populate the modal like this:
$('table').on('click', '.myLink', function () {
var dt = $(this).closest('table').D
var row = dt.row($(this).closest('tr
var ticket = row.data();
if (false) {
var data = $(this).text();
}
//populate the ticket detail modal
$("#UpdateTicket h3").text("Ticket ID: " + ticket.TicketID);
$('#Name').val(ticket.Subm
.....and so forth
});
This is the click event for the Update button on the modal:
$('#update').click(functio
updateform();
});
This is the Update Form Function:
function updateform() {
Validation code here....
var newResolution = {
Fields here....
TicketStatusID: $("#Status1").val()
};
$.ajax({
type: "POST",
url: "ViewTickets.aspx/myMethod
data: JSON.stringify(myMethod),
contentType: "application/json; charset=utf-8",
dataType: "json"
})
.done(function (msg) {
$('#UpdateTicket').modal('
$('#UpdateTicketConfirmati
reloadtickettable(); //this does not work
})
.error(function (jqXHR, status, error) {
alert('OOPS! Something went wrong: ' + status + ' : ' + error);
})
}
};
This is the function that does not work:
function reloadtickettable() {
// $('#MyTable').load(documen
myTable.fnDraw();
};
}