datatables.editor.js error: 'undefined' is null or not an object
datatables.editor.js error: 'undefined' is null or not an object
marialpettit
Posts: 7Questions: 3Answers: 0
Activating an inline edit on the click of a table cell causes datatables.editor.js error.
Javascript:
$('#surveyBuild').on('click', 'tbody td', function (e)
{
var index = $(this).index();
if (index ==9)
{
editor.inline(this, "NEW_DEVICE_FACILITY_CODE"); //this line causes the error
}
});
DataTable:
var dt = $('#surveyBuild').DataTable(
{
ajax: "EditSurveyBuild",
paging: true,
pageLength: 100,
pagingType: "full_numbers",
processing: true,
scrollY: "600px",
dom: '<"top"lif>rt<"bottom"p><"clear">',
columns: [
{ data: null, defaultContent: "" },
{ data: null, defaultContent: "" },
{ data: null, defaultContent: "" },
{ data: "DEVICE_INDEX" },
{ data: "COMMENT" },
{ data: "OLD_DEVICE_NAME" },
{ data: "OLD_DEVICE_OPERATINGSYSTEM" },
{ data: "OLD_XD_OS" },
{ data: "OLD_XD_TYPE" },
{ data: "NEW_DEVICE_FACILITY_CODE" },
{ data: "NEW_XD_OS" },
{ data: "NEW_XD_TYPE"},
{ data: "NEW_XD_CUSTOM_TEMPLATE" },
{ data: "APP_OPTIONS" },
{ data: "REMOTE_SURVEY_STATUS" },
{ data: "REMOTE_SURVEY_STATUS_DT" },
{ data: "DEPLOYMENT_PK", visible: false },
{ data: "PROJECT_DEVICE_PK", visible: false },
{ data: "OLD_DEVICE_LPORTFOLIOID", visible: false },
{ data: "OLD_DEVICE_ASSETTAG", visible: false },
{ data: "OLD_DEVICE_SN", visible: false },
{ data: "OLD_XD_CUSTOM_TEMPLATE", visible: false },
{ data: "NEW_DEVICE_NAME", visible: false },
{ data: "NEW_DEVICE_ASSETTAG", visible: false },
{ data: "NEW_DEVICE_SN", visible: false },
{ data: "CREATED_DT", visible: false },
{ data: "CREATED_BY", visible: false },
{ data: "MODIFIED_DT", visible: false },
{ data: "MODIFIED_BY", visible: false },
{ data: "NEW_DEVICE_EQUIPMENT", visible: false },
{ data: "NEW_DEVICE_MODEL", visible: false },
{ data: "OLD_DEVICE_EQUIPMENT", visible: false },
{ data: "OLD_DEVICE_MODEL", visible: false },
{ data: "NEW_DEVICE_STATUS", visible: false },
{ data: "NEW_DEVICE_LOCATION", visible: false } ],
tableTools: {
sRowSelect: "os",
sRowSelector: "td:first-child",
aButtons: [
{ sExtends: "editor_edit", "editor": editor },
{ sExtends: "editor_remove", "editor": editor }
]
},
fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull)
{
if ((aData["OLD_XD_OS"] == null) || (aData["OLD_XD_TYPE"] == null))
{
$('td', nRow).css('background-color', '#FFCCCC');
}
}
Editor:
editor = new $.fn.dataTable.Editor({
ajax: "EditSurveyBuild",
table: "#surveyBuild",
fields: [
{
label: "Select XD OS",
name: "NEW_XD_OS"
},
{
label: "Select Workstation Type",
name: "NEW_XD_TYPE"
},
{
label: "Select Custom Software Template",
name: "NEW_XD_CUSTOM_TEMPLATE"
},
{
label: "App Options",
name: "APP_OPTIONS",
type: "select",
options: ["0", "1", "2", "3"]
},
{
label: "Select Facility",
name: "NEW_DEVICE_FACILITY_CODE"
}
]
});
html:
<table id="surveyBuild" class="stripe hover cell-border order-column compact">
<thead>
<tr>
<th>
<th>Clone To</th>
<th>Action</th>
<th>Index</th>
<th>Notes</th>
<th>Current Device Name</th>
<th>Current OS</th>
<th>Current OS Build</th>
<th>Current Workstation Type</th>
<th>Select Facility</th>
<th>Select OS Build</th>
<th>Select Workstation Type</th>
<th>Select Custom Software Template</th>
<th>Select App Options</th>
<th>Remote Survey Status</th>
<th>Remote Survey Status Date</th>
<th>Deployment ID</th>
<th>Project Device ID</th>
<th>Current Device PortfolioID</th>
<th>Current Device Asset Tag</th>
<th>Current Device SN</th>
<th>Current Template</th>
<th>New Device Name</th>
<th>New Device Asset Tag</th>
<th>New Device SN</th>
<th>Created Date</th>
<th>Created By</th>
<th>Modified Date</th>
<th>Modified By</th>
<th>New Device Equipment</th>
<th>New Device Model</th>
<th>Old Device Equipment</th>
<th>Old Device Model</th>
<th>New Device Status</th>
<th>New Device Location</th>
</tr>
</thead>
<tbody></tbody>
</table>
mvc controller code:
public ActionResult EditSurveyBuild(FormCollection fc)
{
String userID = ViewBag.UserID;
// there's no way to pass in the deployment ID so we have to get it from TempData
int deploymentID = Convert.ToInt32(TempData["DeploymentID"]);
TempData.Keep("DeploymentID");
if (fc.AllKeys.Count() == 0)
{
// get build info
List<WLCM_DEPLOYMENT_DEVICE> allDevices = eustr_DB.GetDevicesByDeploymentID(deploymentID);
ext_engineering_DB.GetDeviceMachineBuildInfo(allDevices, deploymentID);
eustr_DB.UpdateDeviceList(allDevices, userID);
}
String sConn = ConfigurationManager.ConnectionStrings["EUSTR_Connection"].ConnectionString;
var db = new Database("sqlserver", sConn);
Editor e = new Editor(db, "WLCM_DEPLOYMENT_DEVICE", "DEPLOYMENT_DEVICE_PK");
e.Model<WLCM_DEPLOYMENT_DEVICE>();
e.Where("DEPLOYMENT_PK", deploymentID);
e.Process(Request.Form);
DtResponse r = e.Data();
return Json(r, JsonRequestBehavior.AllowGet);
}
Please help. Datatables debugger code: aparin
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Hi,
Thanks for the information. However, I'm afraid I'm not immediately seeing what would cause the issue at hand - the code above looks good!
Two things do spring to mind:
inline()shouldn't be required there. Editor should be able to automatically detect which field is to be edited.Regards,
Allan
Thank you for the quick response. Yes, I have 3 datatables on the page but right now I'm only trying to make 1 editable. I'll remove the global variable and the 2nd parameter to the inline() function. I'll also create a new project isolating this one datatable and editor to try and rule out any conflicts. Thanks.
Resolved: I was able to fix the problem by adding a wrapper around the javascript.
```
(function ($)
{
$(document).ready(function ()
{
})(jQuery);
```
Excellent - good to hear. Thanks for letting me know.
Allan