inline editing validation not working - JQUERY DATATABLES
inline editing validation not working - JQUERY DATATABLES
misbah_awan
Posts: 4Questions: 2Answers: 0
Hello Everyone,
My JQUERY DATATABLES are working perfectly fine. However,when I applied inline editing validation it did not reflect in code. I searched a lot on net but didn't find any reason why it is not working.
This is in my JS:
...
function makeTable()
{
var originalContent;
$( "#formAddNewRow" ).dialog({ autoOpen: false, title: 'Please fill the form:', open: function(event, ui){$('body').css('overflow','hidden');$('.ui-widget-overlay').css('width','100%'); /for removing extra page height when dialog ox appears/ document.getElementById("sno").value=$('#companies').dataTable().fnSettings().fnRecordsTotal()+1; originalContent= $("#formAddNewRow").html(); changeLabel(); }, close: function(event, ui){$('body').css('overflow','auto')}, resizeable: false, minWidth: 300,maxWidth: 300,minHeight: 330,maxHeight: 330, modal: true });
$("#companies").dataTable({
"bServerSide": true,
"sAjaxSource": "../CpaNcrObjServlet?headerId="+document.getElementById("headerId").value,
"bProcessing": true,
"bRetrieve": true,
"bDestroy": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"sScrollX": "100%",
"sScrollXInner": "100%",
"bScrollCollapse": true,
"bAutoWidth": false, // Disable the auto width calculation
oAddNewRowFormOptions: {
show: "blind",
hide: "explode"
},
"aoColumns": [
{ "sName": "ID",
"bSearchable": false,
"bSortable": false,
"bVisible": false
},
{ "sName": "SNO", "bSearchable": false,"bSortable": false, "width": "10%" },
{ "sName": "Employee Name" , "width": "10%"},
{ "sName": "Employee No" , "width": "10%"},
{ "sName": "CPA/NCR/Objectives and Targets ID", "width": "10%" },
{ "sName": "Status" , "width": "10%"},
{ "sName": "Description", "width": "10%"},
{ "sName": "Remarks" , "width": "10%"}
]
}).makeEditable({
sAddURL: "../CpaNcrObjDetailServlet?action=addDetail",//&HID="+document.getElementById("headerId").value,
sUpdateURL: "../CpaNcrObjDetailServlet?action=updateDetail&userID="+document.getElementById("userID").value,
sDeleteURL: "../CpaNcrObjDetailServlet?action=deleteDetail",
fnShowError: function (message, action) {
switch (action) {
case "update":
if (message=="")alert("Update successful");
else alert(message);
break;
default: alert(message);
}
},
"aoColumns": [null,
{
cssclass: "required",
indicator: 'Saving...',
tooltip: 'You may change the field by double click ',
loadtext: 'loading...',
type: 'text',
onblur: 'submit',
oValidationOptions:
{
rules:{
value: {
required: true,
minlength: 3,
maxlength: 20
}
},
messages: {
value: {
required: "Please enter Name.", minlength:"Please enter atleast 3 characters.", maxlength: "Please enter 20 characters atmost."
}
}
}
},
{
oValidationOptions :
{
rules:{
value: {
minlength: 5
}
},
messages: {
value: {
minlength: "Enter at least 5 characters"
}
}
},
cssclass: "required",
indicator: 'Saving...',
tooltip: 'You may change the field by double click ',
loadtext: 'loading...',
type: 'text',
onblur: 'submit'
},
{
cssclass: "required",
indicator: 'Saving...',
tooltip: 'You may change the field by double click ',
loadtext: 'loading...',
type: 'text',
onblur: 'submit'
},
{
cssclass: "required",
indicator: 'Saving...',
tooltip: 'Click to select',
loadtext: 'loading...',
type: 'select',
onblur: 'submit',
data: '{"Initiated":"Initiated","Completed":"Completed","Closed":"Closed"}'
},
{
indicator: 'Saving...',
tooltip: 'Click to select',
loadtext: 'loading...',
type: 'text',
onblur: 'submit'
},
{
indicator: 'Saving...',
tooltip: 'Click to select',
loadtext: 'loading...',
type: 'text',
onblur: 'submit'
}
]
});
}
Answers
This is my jsp:
$(document).ready(function () { document.getElementById("headerId").value=0; document.getElementById("btnEditlHeaderData").disabled=true; document.getElementById("btnClearHeaderData").disabled=true; document.getElementById("btnAddNewRow").disabled=true; changeFocalPointId(); $(".ui-datepicker-div").hide(); makeTable(); /*++++++++++++++++++++++++++++++++++++++++++++++++++++ - Function for validating AddNewRow Form data - ++++++++++++++++++++++++++++++++++++++++++++++*/ $("#formAddNewRow").valid({ rules: { ename: { required: true, minlength: 3, maxlength: 20 }, eno: { required: true, minlength: 6, maxlength: 10 }, ncoid: { required: true, minlength: 5, maxlength: 10 }, status: { required: true //maxlength: 100 }, description: { required: true, maxlength: 100 }, remarks: { required: true, maxlength: 100 } }, messages: { ename: {required: "Please enter Name.", minlength:"Min. 3 characters.", maxlength: "Max 20 characterst."}, eno: {required: "Please enter Employee No.", minlength:"Min. 6 characters.", maxlength: "Max 10 characterst."}, ncoid: {required: "Please enter CPA/NCR/Obj ID.", minlength:"Min. 5 characters.", maxlength: "Max 10 characters."}, status: "Please select Status.", description: {required:"Description: max 100 characters.", maxlength: "Max. 100 characters."}, remarks: {required:"Remarks: max 100 characters.", maxlength: "Max. 100 characters."} } }); });That is 3rd party software that is not supported by myself. As far as I am aware it was abandoned by its author years ago.
Editor is the editing software for DataTables that is fully supported.
Allan
Oh my bad!
Now I have implemented makeEditable. Its too late, I guess...
I managed the validation by adding my own validation function.