fnReloadAjax not passed the oSettings

mrullo

Folks, I've been racking my brain, the forums, and anywhere Google reaches over this for 2 days now and I think I've finally come up with what is happening, but I'm not sure about the why.

I have to apologize, I'm not able to use a DataTables live as I'm working with data that I can't let out of the walls of my org. If you determine that's the only way I can get an answer on this, I'll have to mock up a boatload of data.

I have the latest version of fnReloadAjax from http://datatables.net/plug-ins/api . I have a 7ish datatables in 7 tabs within my page. When I hit the tab for the first time, I create the datatable, pulling my data from the server. All that works great. This seems like a recent issue since I've recently gone to jQuery 1.8.2 and DataTables 1.9.3 .

What I've tracked it down to is in _fnExternApiFunc when building the args list to send to fnReloadAjax, it's not able to get the oSettings from _fnExternApiFunc. It seems that in _fnSettingsFromNode, the DataTable.settings[i].nTable === nTable will always be false.

I'll include the code from one of my table initializations to see if that sparks any conversation over the issue.

I figure that I'm saving a reference to the datatable in _dataTable, then in reloadData I'm using that reference to call fnReloadAjax. I don't want to change the location of the server call, so I pass in undefined, then I do need to use the callback after fnReloadAjax has been called.

Any help on this would be greatly appreciated.

Cheers,

Mark

[code]
var po = po || {};

po.TBS = function () {

//Private properties

// ReSharper disable InconsistentNaming
var _dataTable,
_accordion,
_tabContext,
_dataURL,
_confirmedFormURL,
_updateAptTypeURL,
_statusList = [],
_chartDialog,

// ReSharper restore InconsistentNaming

//Methods

init = function (tabContext, dataUrl, confirmedFormUrl, updateAptTypeUrl) {

_tabContext = tabContext;
_dataURL = dataUrl;
_confirmedFormURL = confirmedFormUrl;
_updateAptTypeURL = updateAptTypeUrl;

//Create the accordion for the form up top
_accordion = $(".dialogAccordion", _tabContext).accordion(po.Common.DialogHeaderAccordionDefaults);

var localGridSettings = {
//"bAutoWidth": true,
//Setup the columns
"aoColumns": [
po.Common.ActionColumn,
{ "sTitle": "MRN", "mDataProp": "MRN" },
{ "sTitle": "Patient Name", "mDataProp": "PatientName" },
{ "sTitle": "Procedure", "mDataProp": "Procedure" },
{ "sTitle": "Surgeon", "mDataProp": "Surgeon", "sWidth": '150px' },
{ "sTitle": "Date Req'd", "mDataProp": "RequestedDate", "sType": "date" },
{ "sTitle": "Diagnosis", "mDataProp": "Diagnosis", "sWidth": '150px' },
{ "sTitle": "Visits", "mDataProp": "ClinicVisits", "sWidth": '60px' },
{
"sTitle": "Apt. Type"
, "mDataProp": "AppointmentType"
, "bUseRendered": false
}
],
"aaSorting": [[5, 'desc']], //Sort by Surgical Date Requested
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
po.Common.SetupButtonHover(nRow);

//setup the chart dialog passing the row's information to the dialog
$(".dialogUp", nRow)
.click(function () {
//Load the patient chart in the modal area
po.Common.LoadPatientChart(_chartDialog, aData.MRN);

//Load up the content for the patient header
po.Common.LoadPatientHeader(_accordion, aData.MRN);

//Load up the content for the To Be Confirmed Form in the modal dialog.
LoadContent("#TBConfirmedForm", _confirmedFormURL, { mrn: aData.MRN, preOpDataID: aData.PreOpDataID }, function () {
//We've loaded up the form, now we have to wire it up.
wireupForm(aData, "#TBConfirmedForm");
//log("resize the accordion");
_accordion.accordion("resize");
});
//open the dialog
_chartDialog.dialog("open");

});

//Setup the surgical Booking form for this tab
po.Common.SurgBookingFormAction(".SurgBookingFormAction", nRow, aData);

po.Common.SetupRowHighlighting(nRow);

return nRow;
}
, "fnInitComplete": function (oSettings, json) {

//Now that the data has been processed from the server, add a click on the image
//to expand the row. We'll have to do this again after reloading the data.
po.Common.WireupExpandingRows($('.expandRow', _tabContext), _dataTable, formatExpandingRow, afterFormatExpandingRow);

}
, "fnServerParams": function (aoData) {
aoData.push({ name: 'Tab', value: 'TBS' });
}
};

//Merge the local settings, specific to this grid, with the common settings we want all grids to have.
var gridSettings = po.Common.MergeGridSettings(localGridSettings);

_dataTable = $('#DataTable', _tabContext).dataTable(gridSettings);

ShowMessage("Loading the tab");


//Setup the modal dialog
var wWidth = $(window).width();
var wHeight = $(window).height();

_chartDialog = $("#Dialog", _tabContext).dialog({
autoOpen: false,
height: wHeight * .9,
width: wWidth * .9,
modal: true
});
},

//Wires up the to be Confirmed form button. Pass in the context so we don't mess up any other instances of this form.
wireupForm = function (rowData, context) {
//We've loaded up the form, now we have to wire it up.

$(".TBConfirmedFormSave", context).button().click(function () {
//ShowMessage("Mock: Sending message to server to save the form.");
updateStatus(rowData.PreOpDataID, $("#AppointmentTypeID", context).val(), $("#AppointmentTypeConfirmed", context).is(':checked'));

reloadData();

//close the dialog
$("#TBConfirmedDialog").dialog("close");
});
//log("resize the accordion");
_accordion.accordion("resize");
},

reloadData = function () {
//Reload the data in the table
_dataTable.fnReloadAjax(undefined, function () {
//We have to re-wrie the expanding row because we've just refreshed the data and
//all the elements have been deleted and re-created
po.Common.WireupExpandingRows($('.expandRow', _tabContext), _dataTable, formatExpandingRow, afterFormatExpandingRow);
}, null);
},

/* Formating function for row details */
formatExpandingRow = function (oTable, row) {
var aData = oTable.fnGetData(row);
var sOut = "This is the container";
return sOut;
},


/* Callback once the expanding row has been added to the DOM*/
afterFormatExpandingRow = function (oTable, row) {
var rowData = oTable.fnGetData(row);
$(row).next().children(".TBConfirmedFormContainer").css("background", "red");
var expandedRow = $(row).next();

LoadContent($(".TBConfirmedFormContainer", expandedRow)
, _confirmedFormURL
, { mrn: rowData.MRN, PreOpDataID: rowData.PreOpDataID }
, function () {
//We've loaded up the form, now we have to wire it up.
wireupForm(rowData, expandedRow);
//log("Callback from AfterFormatTConfirmedExpandingRow");
});
};

return {
//Property as a method because JS does not support references
DataTable: function () { return _dataTable; },

Init: init,
UpdateStatus: updateStatus,
GetAptTypeList: getAptTypeList,
WireupForm: wireupForm,
ReloadData: reloadData,
FormatExpandingRow: formatExpandingRow,
AfterFormatExpandingRow: afterFormatExpandingRow,
StatusList: _statusList
};
} ();

[/code]

allan

> $('#DataTable', _tabContext)

That looks iffy to me. It suggests that you have multiple elements with the same ID which is not valid HTML. IDs absolutely must be unique - what happens when they are not unique is undetermined (indeed as a whole DataTables expects valid HTML).

I'd suggest making them unique and seeing how that goes.

Allan

mrullo

Allan,

Thank you for the quick feedback. I'll change the table elements to classes and see if that has any affect. I'll report back shortly.

Cheers

mrullo

Allan,

Your comments were EXACTLY what I needed. It was indeed having multiple ID elements of the same name. I thought I could do that if I had a context, but I'm obviously wrong.

Cheers,

Mark

allan

Excellent to hear - thanks for the feedback.

Allan