How to use EXTERNAL jquery datpicker to cause ajax to refrsh data table with different information

monkeyboy

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!

allan

$("#dirTable").DataTable.

$().DataTable() is a function - not a property. You need to execute it with ().

It would suggest you simply use your dirTable variable, but either will work.

Allan