Loading ajax source twice in v1.10?

A95

Hi, I saw a discussion before about this issue, they say that in the version 1.8 the issue was resolved. I am having the same issue now and I am working in the 1.10 version, I don't know why but is calling the load function in the server code twice. If someone have the same issue or recommend me something, I will appreciate it.

A95

I use this code inside of a function to initialize the datatable:

var table = $('#convResTabR').DataTable({
        "serverSide": true,
        "orderMulti": false,
        "bProcessing": true,
        "order": [[3, "desc"], [1, "asc"]],
        "ajax": {
            "url": "/Maintenance/LoadData",
            "type": "POST",
            "data": function (d) {
                d.LoT = ttable;
                d.SO = r;
            },
            "datatype": "json"
        },
        "aoColumnDefs": [
            {
                "data": "DctN",
                "name": "D N",
                "visible": true,
                "aTargets": [0],
                "bSortable": true
            },
            {
                "data": "Conme",
                "name": "C N",
                "visible": true,
                "aTargets": [1],
                "bSortable": true
            },
            {
                "data": "TeN",
                "name": "T N",
                "visible": true,
                "aTargets": [2],
                "bSortable": true
            },
            {
                "data": "BgVdDate",
                "name": "B V D",
                "visible": true,
                "aTargets": [3],
                "bSortable": true,
                "mRender": function (data, type, full) {
                    var result = "";
                    if (data != null) {
                        if (data.indexOf("Date") > -1) {
                            var valueDate = new Date(parseInt(data.replace(/\/+Date\(([\d+-]+)\)\/+/, '$1')));
                            var curr_date = valueDate.getDate().toString();
                            var curr_month = valueDate.getMonth() + 1; //Months are zero based
                            var curr_year = valueDate.getFullYear().toString();
                            result = curr_month + "/" + curr_date.toString() + "/" + curr_year;
                        }
                        else
                            result = data;
                    }
                    return result;
                }
            },
            {
                "data": "EVaD",
                "name": "E V D",
                "visible": true,
                "aTargets": [4],
                "bSortable": true,
                "mRender": function (data, type, full) {
                    var result = "";
                    if (data != null) {
                        if (data.indexOf("Date") > -1) {
                            var valueDate = new Date(parseInt(data.replace(/\/+Date\(([\d+-]+)\)\/+/, '$1')));
                            var curr_date = valueDate.getDate().toString();
                            var curr_month = valueDate.getMonth() + 1; //Months are zero based
                            var curr_year = valueDate.getFullYear().toString();
                            result = curr_month + "/" + curr_date.toString() + "/" + curr_year;
                        }
                        else
                            result = data;
                    }
                    return result;
                }
            },
            {
                "data": "R",
                "name": "R",
                "visible": true,
                "aTargets": [5],
                "bSortable": true
            },
            {
                "data": "LA",
                "name": "Exc",
                "visible": true,
                "aTargets": [6],
                "bSortable": true
            },
            {
                "data": "SR",
                "name": "S R",
                "visible": true,
                "aTargets": [7],
                "bSortable": true
            },
            {
                "data": "CN",
                "name": "C N",
                "visible": true,
                "aTargets": [8],
                "bSortable": true
            },
            {
                "data": "CR",
                "name": "C R",
                "visible": true,
                "aTargets": [9],
                "bSortable": true
            },
            {
                "data": "CSR",
                "name": "C S R",
                "visible": true,
                "aTargets": [10],
                "bSortable": true
            },
            {
                "data": "LaUpdB",
                "name": "L U B",
                "visible": true,
                "aTargets": [11],
                "bSortable": true
            },
            {
                "data": "LaUpOn",
                "name": "L U O",
                "visible": true,
                "aTargets": [12],
                "bSortable": true,
                "mRender": function (data, type, full) {
                    var result = "";
                    if (data != null) {
                        if (data.indexOf("Date") > -1) {
                            var valueDate = new Date(parseInt(data.replace(/\/+Date\(([\d+-]+)\)\/+/, '$1')));
                            var curr_date = valueDate.getDate().toString();
                            var curr_month = valueDate.getMonth() + 1; //Months are zero based
                            var curr_year = valueDate.getFullYear().toString();
                            result = curr_month + "/" + curr_date.toString() + "/" + curr_year;
                        }
                        else
                            result = data;
                    }
                    return result;
                }
            },
            {
                "aTargets": [13],
                "data": "RateId",
                "className": "center",
                "bSortable": false,
                "mRender": function (data, type, full) {
                    var btn = Core.stringFormat('<button style="width:80px;font-size:10px;" type="button" data-role="edit" data-id="{0}" >Edit</button>', data);
                    btn += Core.stringFormat('<button style="margin-top:5px;width:80px;font-size:10px;" type="button" data-role="delete" data-target="#confirm-delete" data-id="{0}">Delete</button>', data);
                    return Core.stringFormat('<div class="buttons-wrapper" >{0}</div>', btn);
                }
            }],
        "fnDrawCallback": function () {
            var holder = $("#convResTabR").find("tbody");
            var btns;
            var btens;
            //Edit button
            btens = holder.find("button[data-role='edit']");
            btens.button({
                icons: {
                    primary: " ui-icon-pencil"
                }
            });
            btens.off("click");
            btens.on("click", function () {
                var id = $(this).data("id");
                var row = $(this).closest("tr").get(0);
                // Get the data array for this row
                //var rowData = table.row(row).data();
                var rowData = MaintenanceConfigurator.ActualTable.row(row).data();

                //Open Dialog to Edit//
                RatesARowData = rowData;
                uRt(id, ttable);
            });

            //delete btn
            btns = holder.find("button[data-role='delete']");
            btns.button({
                icons: {
                    primary: " ui-icon-trash"
                }
            });
            btns.off("click");
            btns.on("click", function () {
                var id = $(this).data("id");
                var row = $(this).closest("tr").get(0);
                // Get the data array for this row
                //var rowData = table.row(row).data();
                var rowData = MaintenanceConfigurator.ActualTable.row(row).data();

                //Delete Dialog//
                //Changing the Header label
                var ctittle = "";
                var ctittle = rowData.CurrentLookupLabel.trim() + " - Delete Confirmation";
                $("#myModalLabel").html(ctittle);
                //Changing the body question
                var q = ""
                $("#pcontentbody").html(q);
                actualrowdata = rowData;
                var deletefunction = Core.stringFormat('DeleteRate({0})', id);
                $("#delete_btn_confirmation").attr("onclick", deletefunction);
                $('#confirm-delete').modal('show');
            });

            //Make the genearal search only filter when the user hit enter in the button
            var inputgeneralfilter = $("div.dataTables_filter input");

            inputgeneralfilter.unbind();
            inputgeneralfilter.bind('keyup', function(e) {
                if (e.keyCode == 13) {
                    table.search(this.value).draw();
                }
            }); 
        }

    });

    return table;
}

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

I don't immediately see why that would happen from the above code. Can you link to a page showing the issue so I can debug it please.

Allan

A95

Sorry, I can't show you the page, because company restrictions, but I am using it in a MVC application. So I have a view which have the table defined, in that view I included the js file that had the function to handle the datatable, all is working fine, except the twice call that the ajax do to the controller class to load the data. In the controller class I have a function that handle the data a return a json to the view with the data. I will give a breve description that I have to you can get more close to that I have actually:

A95

View:

using ModelClass

<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" />

Text

text

text

text

Text

text	text	text	text	text	text	text	text	text	text	text	text	text	text

@{ R robj = new R(); string jsonString = robj.GetEmptyJsonObject(); } var r = @jsonString; var ttable = 0;

<script type="text/javascript" src="@Url.Content("~/Scripts/STS/Maintenance/CRML.js")"></scrip>

A95

JS File:

var RRowData = null;
$(document).ready(function () {
ttable = 0;

...

MC.ATable = s_getDataTable();

MC.ATable.on('init.dt', function (e, settings, data) {
    var wrapper = $("#convResTabR");
    wrapper.fadeIn();
});

...

$("#outsearch_btn").click(function () {
    var trgeneralsearch = $("div.dataTables_filter input").val();
    MC.ATable.search(trgeneralsearch).draw();
});

});

...

//Create the datatable
function s_getDataTable() {
var table = $('#convResTabR').DataTable({
"serverSide": true,
"orderMulti": false,
"bProcessing": true,
"order": [[3, "desc"], [1, "asc"]],
"ajax": {
"url": "/Maintenance/LoadData",
"type": "POST",
"data": function (d) {
d.LoT = ttable;
d.SO = r;
},
"datatype": "json"
},
"aoColumnDefs": [
{
"data": "DctN",
"name": "D N",
"visible": true,
"aTargets": [0],
"bSortable": true
},
{
"data": "Conme",
"name": "C N",
"visible": true,
"aTargets": [1],
"bSortable": true
},
{
"data": "TeN",
"name": "T N",
"visible": true,
"aTargets": [2],
"bSortable": true
},
{
"data": "BgVdDate",
"name": "B V D",
"visible": true,
"aTargets": [3],
"bSortable": true,
"mRender": function (data, type, full) {
var result = "";
if (data != null) {
if (data.indexOf("Date") > -1) {
var valueDate = new Date(parseInt(data.replace(/\/+Date(([\d+-]+))\/+/, '$1')));
var curr_date = valueDate.getDate().toString();
var curr_month = valueDate.getMonth() + 1; //Months are zero based
var curr_year = valueDate.getFullYear().toString();
result = curr_month + "/" + curr_date.toString() + "/" + curr_year;
}
else
result = data;
}
return result;
}
},
{
"data": "EVaD",
"name": "E V D",
"visible": true,
"aTargets": [4],
"bSortable": true,
"mRender": function (data, type, full) {
var result = "";
if (data != null) {
if (data.indexOf("Date") > -1) {
var valueDate = new Date(parseInt(data.replace(/\/+Date(([\d+-]+))\/+/, '$1')));
var curr_date = valueDate.getDate().toString();
var curr_month = valueDate.getMonth() + 1; //Months are zero based
var curr_year = valueDate.getFullYear().toString();
result = curr_month + "/" + curr_date.toString() + "/" + curr_year;
}
else
result = data;
}
return result;
}
},
{
"data": "R",
"name": "R",
"visible": true,
"aTargets": [5],
"bSortable": true
},
{
"data": "LA",
"name": "Exc",
"visible": true,
"aTargets": [6],
"bSortable": true
},
{
"data": "SR",
"name": "S R",
"visible": true,
"aTargets": [7],
"bSortable": true
},
{
"data": "CN",
"name": "C N",
"visible": true,
"aTargets": [8],
"bSortable": true
},
{
"data": "CR",
"name": "C R",
"visible": true,
"aTargets": [9],
"bSortable": true
},
{
"data": "CSR",
"name": "C S R",
"visible": true,
"aTargets": [10],
"bSortable": true
},
{
"data": "LaUpdB",
"name": "L U B",
"visible": true,
"aTargets": [11],
"bSortable": true
},
{
"data": "LaUpOn",
"name": "L U O",
"visible": true,
"aTargets": [12],
"bSortable": true,
"mRender": function (data, type, full) {
var result = "";
if (data != null) {
if (data.indexOf("Date") > -1) {
var valueDate = new Date(parseInt(data.replace(/\/+Date(([\d+-]+))\/+/, '$1')));
var curr_date = valueDate.getDate().toString();
var curr_month = valueDate.getMonth() + 1; //Months are zero based
var curr_year = valueDate.getFullYear().toString();
result = curr_month + "/" + curr_date.toString() + "/" + curr_year;
}
else
result = data;
}
return result;
}
},
{
"aTargets": [13],
"data": "RId",
"className": "center",
"bSortable": false,
"mRender": function (data, type, full) {
var btn = Core.stringFormat('<button style="width:80px;font-size:10px;" type="button" data-role="edit" data-id="{0}" >Edit</button>', data);
btn += Core.stringFormat('<button style="margin-top:5px;width:80px;font-size:10px;" type="button" data-role="delete" data-target="#confirm-delete" data-id="{0}">Delete</button>', data);
return Core.stringFormat('

{0}

', btn);
}
}],
"fnDrawCallback": function () {
var holder = $("#convResTabR").find("tbody");
var btns;
var btens;
//Edit button
btens = holder.find("button[data-role='edit']");
btens.button({
icons: {
primary: " ui-icon-pencil"
}
});
btens.off("click");
btens.on("click", function () {
var id = $(this).data("id");
var row = $(this).closest("tr").get(0);
// Get the data array for this row
//var rowData = table.row(row).data();
var rowData = MC.ATable.row(row).data();

            //Open Dialog to Edit//
            RRowData = rowData;
            uRt(id, ttable);
        });

        //delete btn
        btns = holder.find("button[data-role='delete']");
        btns.button({
            icons: {
                primary: " ui-icon-trash"
            }
        });
        btns.off("click");
        btns.on("click", function () {
            var id = $(this).data("id");
            var row = $(this).closest("tr").get(0);
            // Get the data array for this row
            //var rowData = table.row(row).data();
            var rowData = MC.ATable.row(row).data();

            //Delete Dialog//
            //Changing the Header label
            var ctittle = "";
            var ctittle = rowData.CurrentLookupLabel.trim() + " - Delete Confirmation";
            $("#myModalLabel").html(ctittle);
            //Changing the body question
            var q = ""
            $("#pcontentbody").html(q);
            actualrowdata = rowData;
            var deletefunction = Core.stringFormat('DeleteRate({0})', id);
            $("#delete_btn_confirmation").attr("onclick", deletefunction);
            $('#confirm-delete').modal('show');
        });

        //Make the genearal search only filter when the user hit enter in the button
        var inputgeneralfilter = $("div.dataTables_filter input");

        inputgeneralfilter.unbind();
        inputgeneralfilter.bind('keyup', function(e) {
            if (e.keyCode == 13) {
                table.search(this.value).draw();
            }
        });
    }

});

return table;

}

A95

Controller:

[HttpPost]
public ActionResult LoadData()
{
return LoadDataTableData(Request);
}

    private ActionResult LoadDataTableData(HttpRequestBase r)
    {
        ///*GET PARAMETERS */
        //Getting the parameters for Paging
        var draw = r.Form.GetValues("draw").FirstOrDefault();
        var start = r.Form.GetValues("start").FirstOrDefault();
        var length = r.Form.GetValues("length").FirstOrDefault();
        //Getting the sort columns values
        var sortcolumn = r.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][data]").FirstOrDefault(); //Get the column name in the object
        //var sortcolumn = r.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][name]").FirstOrDefault(); //Get the column name in the header
        var sorcolumndir = r.Form.GetValues("order[0][dir]").FirstOrDefault();

        int pagesize = length != null ? Convert.ToInt32(length) : 0;
        int skip = start != null ? Convert.ToInt32(start) : 0;
        int totalrecords = 0;

        //get the value that the usr pass in the general search
        var generalsearchresult = r.Form.GetValues("search[value]").FirstOrDefault();

        //get the table from the data is needed
        var stable = r.Form.GetValues("LookupTable").FirstOrDefault();

        if (stable != null) {
            LookupTableFilter FilterSortData = new LookupTableFilter();

            //Get the value of the general filter in the datatable
            FilterSortData.SetGeneralSearch(generalsearchresult);

            /*CREATING THE DICTIONARY OF COLUMNS NAMES*/
            var os = r.Form.AllKeys.Where(c => c.Contains("SO"));
            if (os != null) {
                //Add the column only if it has a value for filter 
                foreach (string item in os) {
                    string aux = item;
                    aux = aux.Replace("SO[", "");
                    aux = aux.Replace("]", "");
                    string searchvalue = r.Form.GetValues(item).FirstOrDefault();
                    if (!string.IsNullOrWhiteSpace(searchvalue) && !string.IsNullOrEmpty(searchvalue)) {
                        FilterSortData.AddComlumns(1, aux, searchvalue);
                    } 
                }
            }

            /*CREATING THE DICTIONARY OF COLUMNS SORT*/
            //Creating the Dictionary of Sorting (Try to make it for more than one column)
            if (!(string.IsNullOrEmpty(sortcolumn) && string.IsNullOrEmpty(sorcolumndir)))
            {
                FilterSortData.AddSorComlumns(1, sortcolumn, sorcolumndir);
                //FilterSortData.SortColumnsNames.Add(1, sortcolumn);
                //FilterSortData.SortComlumnsValue.Add(1, sorcolumndir);
            }

            ModelClassesFactory mcf = new ModelClassesFactory();
            var v = mcf.GetFilteredTableModel((LookupTable)Convert.ToInt32(stable), FilterSortData, pagesize, skip);

            totalrecords = mcf.CollectionTotal;

            JsonResult json = Json(new { draw = draw, recordsFiltered = totalrecords, recordsTotal = totalrecords, data = v.ToList() }, JsonRequestBehavior.AllowGet);
            return json;
        }
        else {
            var data = "{{}}";
            JsonResult json = Json(new { draw = draw, recordsFiltered = totalrecords, recordsTotal = totalrecords, data = data }, JsonRequestBehavior.AllowGet);
            return json;
        }

    }

A95

That is the more close that I can get you, but the weird is why it is doing the twice calling from ajax.

A95

Also the version of the datatable that I have is version 1.10.12

allan

I don't immediately see anything from the above code and none of my examples appear to demonstrate this issue. Without being able to debug it myself, the best I can suggest is that you put a breakpoint into the code where the Ajax request is made (your ajax.data function might be the easiest place to do that) and look at the back trace to see what is causing the second draw to occur.

Allan

A95

Hi Allan, all fixed, was a section in my code that call it twice, sorry for the comment, is working perfect right now.

allan

No worries - thanks for the update. Good to hear you have it working now!

Allan