Editor adds hidden fields to datatable after new entry submission

carlg

Hi,

When I submit a new entry using Editor, it attempts to cram all of the columns into the DataTable. I'm only displaying 4 or 5 columns of data, and the rest are all hidden. When I refresh the page after adding a new entry, it displays properly - hiding all the hidden fields. This doesn't happen with edit, just create.

So I'm just wondering how I can stop that from happening after the initial submission, possibly by refreshing the table onSubmitComplete or onPostSubmit? I don't quite understand the best way to reload the table after a successful Editor form submission.

Thanks,
Carl

allan

Hi Carl,

Not sure I quite understand the issue I'm afraid. Can you link me to an example that shows this occurring? This example shows how Editor should be able to cope with fields which are shown in the form only: http://editor.datatables.net/release/DataTables/extras/Editor/examples/formOnlyData.html

Regards,
Allan

carlg

Here is the code I'm using. I messaged you the location of my test server.

[code]
var editor = new $.fn.dataTable.Editor( {
"domTable": "##locationTable",
"display": "envelope",
"i18n": {
"create": {
"button": "New",
"title": "Create New Location",
"submit": "Add Location"
},
"edit": {
"button": "Edit",
"title": "Edit Location",
"submit": "Update Location"
},
"remove": {
"button": "Delete",
"title": "Delete Location",
"submit": "Delete Location",
"confirm": {
"_": "Are you sure you want to delete %d locations?",
"1": "Are you sure you want to delete this location?"
}
},
"error": {
"system": "There was an error submitting the form."
}
},
"ajax": function ( method, url, data, successCallback, errorCallback ) {
if (( data.action === 'create') || ( data.action === 'edit')) {
$.ajax({
"type": method,
"url": '/arch/locations/Utils.cfc',
"data": {
method: "ajaxCall",
returnFormat: "json"
,action:data.action
,location_id:data.data.location_id
,name:data.data.name
,status_cde: data.data.status_cde
,addr1:data.data.addr1
,addr2:data.data.addr2
,city:data.data.city
,state:data.data.state
,zip:data.data.zip
,country:data.data.country
,phone:data.data.phone
,fax:data.data.fax
,email:data.data.email
,latitude:data.data.latitude
,longitude:data.data.longitude
,timezone:data.data.timezone
,observes_dst:data.data.observes_dst
},
"dataType": "json",
"success": function (json) {
successCallback( json );
},
"error": function (xhr, error, thrown) {
errorCallback( xhr, error, thrown );
}
});
} else if ( data.action === 'remove' ) {
$.ajax({
"type": method,
"url": '/arch/locations/Utils.cfc',
"data": [{
method: "ajaxCall",
returnFormat: "json"
,action:data.action
,location_id:data.data.location_id
}],
"dataType": "json",
"success": function (json) {
successCallback( json );
},
"error": function (xhr, error, thrown) {
errorCallback( xhr, error, thrown );
}
});
}
},
"events": {
"onPreSubmit": function ( o ) {
// if ( o.data.browser === "" ) {
// this.error('browser', 'A browser must be given');
// return false;
// }
// else if ( o.data.browser.length >= 10 ) {
// this.error('browser', 'The browser name length must be less that 10 characters');
// return false;
// }
if (o.action === "remove") {
return true;
} else if ( o.data.name === "" ) {
this.error('name', 'The location name cannot be blank');
return false;
} else if ( o.data.latitude === "" ) {
this.error('latitude', 'The latitude cannot be blank');
return false;
} else if ( o.data.longitude === "" ) {
this.error('longitude', 'The longitude cannot be blank');
return false;
} else {
return true;
}
}
// "onOpen": function ( o ) {
// $('form').addClass('locationForm');
// $('.locationForm').parsley();
// }
}
});

editor.add( [
{
"name": "location_id",
"type": "hidden"
}, {
"label": "Name:",
"name": "name"
}, {
"label": "Status:",
"name": "status_cde",
"type": "select",
"ipOpts": [






{ "label": "#decode#", "value": "#code#", "selected": "#selected#" },

]
}, {
"label": "Address:",
"name": "addr1"
}, {
"label": "Address 2:",
"name": "addr2"
}, {
"label": "City:",
"name": "city"
}, {
"label": "State:",
"name": "state"
}, {
"label": "Zip:",
"name": "zip"
}, {
"label": "Country:",
"name": "country",
"default": "United States"
}, {
"label": "Email:",
"name": "email"
}, {
"label": "Phone:",
"name": "phone"
}, {
"label": "Fax:",
"name": "fax"
}, {
"label": "Latitude:",
"name": "latitude"
}, {
"label": "Longitude:",
"name": "longitude"
}, {
"label": "Time Zone:",
"name": "timezone",
"type": "select",
"ipOpts": [

{ "label": "#decode#", "value": "#code#", "selected": "" },

]
}, {
"label": "Daylight Savings Time:",
"name": "observes_dst",
"type": "select",
"ipOpts": [

{ "label": "#decode#", "value": "#code#", "selected": "" },

]
}
] );

// When the editor is opened, bind a key listener to the window
editor.on('onOpen', function () {
$(document).bind('keyup', function (e) {
if ( e.keyCode === 13 ) {
// On return, submit the form
editor.submit();
}
else if ( e.keyCode === 27 ) {
// On escape, close the form
editor.close();
}
} );
} );

// When the editor is closed, remove the bound key listener
editor.on('onClose', function () {
$(document).unbind('keyup');
} );

var oTable = $('##locationTable').dataTable( {
"sDom": "<'row-fluid'<'span4'T><'span4'l><'span4'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"sInfoFiltered": "(_MAX_ total)"
},
"aoColumnDefs": [
{ "aDataSort": [ 2, 0, 1 ], "aTargets": [ 2 ] },
{ "mData": "name", "aTargets": [ 0 ] },
{ "mData": "city", "aTargets": [ 1 ] },
{ "mData": "state", "aTargets": [ 2 ] },
{ "mData": "zip", "aTargets": [ 3 ] },
{ "mData": "location_id", "aTargets": [ 4 ] },
{ "mData": "status_cde", "aTargets": [ 5 ] },
{ "mData": "addr1", "aTargets": [ 6 ] },
{ "mData": "addr2", "aTargets": [ 7 ] },
{ "mData": "country", "aTargets": [ 8 ] },
{ "mData": "email", "aTargets": [ 9 ] },
{ "mData": "phone", "aTargets": [ 10 ] },
{ "mData": "fax", "aTargets": [ 11 ] },
{ "mData": "latitude", "aTargets": [ 12 ] },
{ "mData": "longitude", "aTargets": [ 13 ] },
{ "mData": "timezone", "aTargets": [ 14 ] },
{ "mData": "observes_dst", "aTargets": [ 15 ] },
],
"oTableTools": {
"sRowSelect": "single",
"sSelectedClass": "row_selected",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
} );
[/code]

allan

Thanks for the code and the PM with the log-in details.

So the problem is that you are using CSS to hide the columns rather than the DataTables ability to hide columns. This means that Editor has no idea that your columns should be hidden (they are actually in the table, just display:none).

So there are two options:

1. Use bVisible (or fnSetColumnVis) to have DataTables hide the columns, rather than using CSS.

2. Use sClass on the columns that should be hidden to add the `hide` class to rows that are added.

I'd recommend you take the approach in 1 - not 2. I've not had a good experience of using display:none to hide columns across browsers (which is why DataTables doesn't do it that way, it manipulates the DOM).

Regards,
Allan

carlg

That makes much more sense. Thanks Allan!