jquery ready running multiple times
jquery ready running multiple times
Hi,
I am new to jQuery and datatables and am trying to troubleshoot an issue with jquery's ready() running multiple times. This started when I added my datatable. I am looking for some advice on what I am doing wrong.
Thanks in advance,
Jerry
The datatable's data comes from a .net web service with the following function:
[code]
// Load the table containing the list of Assays
function loadAssayTable() {
$.ajax({
url: "AssayControlWS.svc/Assays",
type: "GET",
async: false, // wait for the call to complete
contentType: "application/json; charset=utf-8",
success: function (assayList) {
//console.log("loadAssayTable - received from service: ", assayList);
oAssayOrderList = assayList; // copy the list to a model object
oAssayTable.fnClearTable();
oAssayTable.fnAddData(oAssayOrderList);
oAssayTable.iTotalRecords = oAssayOrderList.length;
oAssayTable.iTotalDisplayRecords = 10; // max rows in a table page
},
error: function (e) {
console.log("ERROR!!!" + e.status + " - " + e.statusText, e);
}
});
}
[/code]
The table is defined as follows:
[code]
var dtAssayConfigDefault = {
sDom: '<"dataTable_top"Rlfrtip>',
bInfo: true,
aoColumns: [
{ "sTitle": "Release", "sWidth": "10px", "bSearchable": false, "bSortable": false,
"mData": "ID", "mRender": function (data, type, row) {
return ''
},
"sDefaultContent": "" // required to prevent datatables from throwing warning
},
{ "sWidth": "10px", "bSearchable": false, "bSortable": false, "mData": "IsGroupedAssay",
"mRender": function (data, type, row) {
//console.log("Row = ", row);
var displayHTML = "";
if (row.IsGroupedAssay) { // if a grouped Assay show the appropriate expand/collapse control icon
if (row.TotalCompoundSubmitted > 0) // need to add code to handle open and closed children
displayHTML = ' ';
else
displayHTML = '';
}
return displayHTML; // output the resultant html into the cell
}
},
{ "sTitle": "Assay Name", "mData": "Name", "sWidth": "80px" },
{ "sTitle": "Assay Type", "mData": "AssayType", "sWidth": "50px" },
{ "sTitle": "Recipient", "mData": "Recipient", "sWidth": "50px" },
{ "sTitle": "# Cmpds", "mData": "TotalCompoundSubmitted", "sWidth": "15px" },
{ "sTitle": "# Plates", "mData": "TotalPlatesCreated", "sWidth": "15px" },
{ "sTitle": "Request Type", "mData": "RequestType", "sWidth": "50px" },
{ "sTitle": "Release Day", "mData": "ReleaseDay", "sWidth": "50px", "sType": "DayOfWeek" },
{ "sTitle": "Expected Delivery Date", "mData": "ExpectedDeliveryDate", "sWidth": "50px" },
{ "bVisible": false, "bSearchable": false, "mData": "ID" },
{ "bVisible": false, "bSearchable": false, "mData": "IsGroupedAssay" }
],
aaSorting: [[11, "desc"], [8, "asc"], [2, "asc"], [3, "asc"]], // sort by IsGroupedAssay, ReleaseDay, AssayName, Assay Type
bJQueryUI: true, // inherit jQuery styling
bPaginate: true, // Pagination enabled
bFilter: false // no filtering
};
[/code]
In the jquery Readyevent I do:
[code]
// Initalize tables
oAssayTable = $("table#tblAssays").dataTable(dtAssayConfigDefault);
// set grid title
$("#tblAssays_wrapper div.dataTables_title").text("Assays");
//$("#tblAssays_wrapper div.dataTables_title").html("Assays refresh");
$("#tblResults_wrapper div.dataTables_title").text("Processing Results");
// load the Assay table with the assay groups from the DB
loadAssayTable();
[/code]
I am new to jQuery and datatables and am trying to troubleshoot an issue with jquery's ready() running multiple times. This started when I added my datatable. I am looking for some advice on what I am doing wrong.
Thanks in advance,
Jerry
The datatable's data comes from a .net web service with the following function:
[code]
// Load the table containing the list of Assays
function loadAssayTable() {
$.ajax({
url: "AssayControlWS.svc/Assays",
type: "GET",
async: false, // wait for the call to complete
contentType: "application/json; charset=utf-8",
success: function (assayList) {
//console.log("loadAssayTable - received from service: ", assayList);
oAssayOrderList = assayList; // copy the list to a model object
oAssayTable.fnClearTable();
oAssayTable.fnAddData(oAssayOrderList);
oAssayTable.iTotalRecords = oAssayOrderList.length;
oAssayTable.iTotalDisplayRecords = 10; // max rows in a table page
},
error: function (e) {
console.log("ERROR!!!" + e.status + " - " + e.statusText, e);
}
});
}
[/code]
The table is defined as follows:
[code]
var dtAssayConfigDefault = {
sDom: '<"dataTable_top"Rlfrtip>',
bInfo: true,
aoColumns: [
{ "sTitle": "Release", "sWidth": "10px", "bSearchable": false, "bSortable": false,
"mData": "ID", "mRender": function (data, type, row) {
return ''
},
"sDefaultContent": "" // required to prevent datatables from throwing warning
},
{ "sWidth": "10px", "bSearchable": false, "bSortable": false, "mData": "IsGroupedAssay",
"mRender": function (data, type, row) {
//console.log("Row = ", row);
var displayHTML = "";
if (row.IsGroupedAssay) { // if a grouped Assay show the appropriate expand/collapse control icon
if (row.TotalCompoundSubmitted > 0) // need to add code to handle open and closed children
displayHTML = ' ';
else
displayHTML = '';
}
return displayHTML; // output the resultant html into the cell
}
},
{ "sTitle": "Assay Name", "mData": "Name", "sWidth": "80px" },
{ "sTitle": "Assay Type", "mData": "AssayType", "sWidth": "50px" },
{ "sTitle": "Recipient", "mData": "Recipient", "sWidth": "50px" },
{ "sTitle": "# Cmpds", "mData": "TotalCompoundSubmitted", "sWidth": "15px" },
{ "sTitle": "# Plates", "mData": "TotalPlatesCreated", "sWidth": "15px" },
{ "sTitle": "Request Type", "mData": "RequestType", "sWidth": "50px" },
{ "sTitle": "Release Day", "mData": "ReleaseDay", "sWidth": "50px", "sType": "DayOfWeek" },
{ "sTitle": "Expected Delivery Date", "mData": "ExpectedDeliveryDate", "sWidth": "50px" },
{ "bVisible": false, "bSearchable": false, "mData": "ID" },
{ "bVisible": false, "bSearchable": false, "mData": "IsGroupedAssay" }
],
aaSorting: [[11, "desc"], [8, "asc"], [2, "asc"], [3, "asc"]], // sort by IsGroupedAssay, ReleaseDay, AssayName, Assay Type
bJQueryUI: true, // inherit jQuery styling
bPaginate: true, // Pagination enabled
bFilter: false // no filtering
};
[/code]
In the jquery Readyevent I do:
[code]
// Initalize tables
oAssayTable = $("table#tblAssays").dataTable(dtAssayConfigDefault);
// set grid title
$("#tblAssays_wrapper div.dataTables_title").text("Assays");
//$("#tblAssays_wrapper div.dataTables_title").html("Assays refresh");
$("#tblResults_wrapper div.dataTables_title").text("Processing Results");
// load the Assay table with the assay groups from the DB
loadAssayTable();
[/code]
This discussion has been closed.