Multipe Datatables - Add new row form overriding

nikhil_uppaluri

Hi I have multiple datatables on single MVC view (Multiple partial views)

In partial view 1 :
[code]

Add New Contact



First Name
Last Name
Email Address


Some code

[/code]
Partial View 2 :
[code]

Add New Environment



Hello


Some code

[/code]

And my script :

[code]
$('#ContactDataTable').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": '/Contacts/ContactsAjaxHandler',
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sName": "FirstName" },
{ "sName": "LastName" },
{ "sName": "EmailAddress" }
]
}).makeEditable(
{
sUpdateURL: "/Contacts/UpdateContactsData",
sDeleteURL: "/Contacts/DeleteContactsData",
sAddURL: "/Contacts/AddContact",
sAddNewRowFormId: "divAddNewContactRow",
sAddNewRowButtonId: "btnAddNewContactRow",
sAddNewRowOkButtonId: "btnAddNewContactOk",
sAddNewRowCancelButtonId: "btnAddNewContactCancel",
sDeleteRowButtonId: "btnDeleteContact",

fnShowError: function (message, action) {
switch (action) {
case "update":
jAlert(message, "Update failed");
break;
case "delete":
jAlert(message, "Delete failed");
break;
case "add":
$("#lblAddContactError").html(message);
$("#lblAddContactError").show();
break;
}
},
fnStartProcessingMode: function () {
$("#Contact_processing_message").dialog();
},
fnEndProcessingMode: function () {
$("#Contact_processing_message").dialog("close");
}
}).columnFilter(
{
aoColumns: [
{ type: "text" },
{ type: "text" },
{ type: "text" }
]
});

$('#EnvironmentsDataTable').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": '/Environments/EnvironmentsAjaxHandler',
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sName": "EnvironmentName" },
{ "sName": "AccessPathURL" }
]
}).makeEditable(
{
sUpdateURL: "/Environments/UpdateEnvironmentsData",
sDeleteURL: "/Environments/DeleteEnvironmentsData",
sAddURL: "/Environments/AddEnvironment",
sAddNewRowFormId: "divAddNewEnvironmentRow",
sAddNewRowButtonId: "btnAddNewEnvironmentRow",
sAddNewRowOkButtonId: "btnAddNewEnvironmentOk",
sAddNewRowCancelButtonId: "btnAddNewEnvironmentCancel",
sDeleteRowButtonId: "btnDeleteEnvironment",

fnShowError: function (message, action) {
switch (action) {
case "update":
jAlert(message, "Update failed");
break;
case "delete":
jAlert(message, "Delete failed");
break;
case "add":
$("#lblAddEnvironmentError").html(message);
$("#lblAddEnvironmentError").show();
break;
}
},
fnStartProcessingMode: function () {
$("#Environment_processing_message").dialog();
},
fnEndProcessingMode: function () {
$("#Environment_processing_message").dialog("close");
}
}).columnFilter(
{
aoColumns: [
{ type: "text" },
{ type: "text" }
]
});
[/code]

Everything else works fine but when I click "btnAddNewContactRow" button it displays "divAddNewEnvironmentRow" content such as label "Hello" but not "divAddNewContactRow" content.

Please help me to fix this issue.

Thanks In Advance.

nikhil_uppaluri

I have resolved above issue by replacing "jquery.dataTables.editable.js" from below path :

http://jquery-datatables-editable.googlecode.com/svn/trunk/configure-dom.html

Hope this helps to someone!