Multi editable Datatables and Forms.

ronald.put

Hi there,

I have following html5 page, copied from the Codeproject site and edited it a little. This Page contains 2 Datatables and Editable functions. How can I make this work with two forms? Because I always get the last form that's on the page.

[code]
@{
ViewBag.Title = "Customization";
Layout = "~/Views/Invoice/JQueryDataTableEditableLayout.cshtml";
}

@section head{






$(document).ready(function () {
$('#myDataTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": false
}).makeEditable({
sUpdateURL: "/Invoice/UpdateData",
sAddURL: "/Invoice/AddData",
sDeleteURL: "/Invoice/DeleteData",

sAddNewRowFormId: "formAddNewInvoice",
sAddNewRowButtonId: "btnAddNewInvoice",
sAddNewRowOkButtonId: "btnAddNewInvoiceOk",
sAddNewRowCancelButtonId: "btnAddNewInvoiceCancel",
sDeleteRowButtonId: "btnDeleteInvoice",


fnShowError: function (message, action) {
switch (action) {
case "update":
jAlert(message, "Update failed");
break;
case "delete":
jAlert(message, "Delete failed");
break;
case "add":
$("#lblAddError").html(message);
$("#lblAddError").show();
break;
}
},
fnStartProcessingMode: function () {
$("#processing_message").dialog();
},
fnEndProcessingMode: function () {
$("#processing_message").dialog("close");
}
});
});




$(document).ready(function () {
$('#InvoiceRecords').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": false,
"aoColumns": [
/* Index */ null,
/* Description */ null,
/* Country */ null,
/* Removable */ { "bVisible": false }
]
}).makeEditable({
sUpdateURL: "/Invoice/UpdateDataR",
sAddURL: "/Invoice/AddDataR",
sDeleteURL: "/Invoice/DeleteDataR",

sAddNewRowFormId: "formAddNewInvoiceR",
sAddNewRowButtonId: "btnAddNewInvoiceR",
sAddNewRowOkButtonId: "btnAddNewInvoiceOkR",
sAddNewRowCancelButtonId: "btnAddNewInvoiceCancelR",
sDeleteRowButtonId: "btnDeleteInvoiceR",


fnShowError: function (message, action) {
switch (action) {
case "update":
jAlert(message, "Update failed");
break;
case "delete":
jAlert(message, "Delete failed");
break;
case "add":
$("#lblAddErrors").html(message);
$("#lblAddErrors").show();
break;
}
},
fnStartProcessingMode: function () {
$("#processing_message").dialog();
},
fnEndProcessingMode: function () {
$("#processing_message").dialog("close");
}
});
});



.dataTables_filter
{
display: none;
}

}




Invoice records



V. Nr.
Omschrijving
Land
rem



@foreach (var item in Model.Records)
{

@item.Index
@item.Description
@item.Country
@item.Removable

}









Invoices




Invoice number



@foreach (var item in Model.Invoices)
{

@item.Number

}










Please wait while your request is being processed...



Add Invoice
Cancel



Number









Omschrijving
Country

Nederland
Belgie
Duitsland



Add Invoice <&nbsp/>
Cancel





[/code]