I added a datepicker to allow users to change the filter set on a (large) database. I want the datepicker to cause an ajax refresh to my table. (passed parameters are an ID and an integer date code of the format yyyymm. The ajax function called is the one which initially loads the page.
Here is my code:
var dirTable = $("#dirTable").DataTable( {
dom: "Bflrtip",
"serverSide": false,
ajax: {
"url": "/components/com_insight/ajax/resource/ajaxDirDetail.php",
"type": "POST",
data: function(d) {
d.dirId="' . $dirId .'";
d.dateCode="'.$dateCode.'";
}
},............
$(function() {
$(".date-picker").datepicker( {
yearRange: "2015:" + new Date().getFullYear(),
dateFormat: "yyyymm",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: "MM yy",
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker("setDate", new Date(year, month, 1));
var monthcode = (month*1+1);
var sMonthCode = monthcode.toString();
if (sMonthCode.length =1) {sMonthCode = 0+sMonthCode}
var dateCodeParam = year+sMonthCode;
var selDirId = document.getElementById("dirId");
var selDir = selDirId.options[selDirId.selectedIndex].value;
//alert(dateCodeParam + " " + selDir);
$.ajax({
url: "/components/com_insight/ajax/resource/ajaxDirDetail.php",
type: "POST",
data: { dirId:selDir, dateCode: dateCodeParam},
success: function(result){
$("#dirTable").DataTable.clear();
$("#dirTable").DataTable.draw();
$("#dirTable").DataTable.rows.add(result);
$("#dirTable").DataTable.draw();
}
});
}
});
});
My attempt to redraw the table
success: function(result){
$("#dirTable").DataTable.clear();
$("#dirTable").DataTable.draw();
$("#dirTable").DataTable.rows.add(result);
$("#dirTable").DataTable.draw();
leads to an unknown function error. I am sure I have the context inccorect, but I do not know how to fix this. Any help would be appreciated!