Trying to show/hide different inputs based on editor action

carlg

Hi,

I'm having some trouble with editor's input fields. My current Editor instance (when doing a 'create') displays several selections to the user, and shows/hides more select boxes based on what they select. I accomplish this by hiding and showing with jQuery inside the editor.on('onOpen', function()){} . I tried to specify what is shown based on the action by saying if (editor.create) { //show & hide inputs }

then, else if (editor.edit) { //populate all current fields & show relevant select boxes, hide the rest }

I also tried saying if (editor.action === 'edit'){} , but that didn't work either. It is just displaying the fields I have for the 'create' logic no matter what. Is there a good way to display different 'fields' based on the user's action?

Thanks,
Carl

allan

Hi Carl,

What you could do is use the `node` method ( http://editor.datatables.net/docs/current/Editor.html#node ) to get the HTML nodes for the form elements and attach the listeners needed up front (i.e. just after the initialisation). This way the event will be present when Editor sets the values itself (during the edit setup) and the form should be correctly displayed at all time.

You might do this something like this:

[code]
$( 'input', editor.node( 'account_type' )).on( 'change', function () {
if ( editor.get( 'account_type' ) === 'admin' ) {
editor.show( 'admin_options' ); // etc
}
else {
editor.hide( 'admin_options' ); // etc
}
} );
[/code]

Hope this helps.

Regards,
Allan

carlg

Thanks Allan, that makes sense. One small question, though.

[quote]allan said: attach the listeners needed up front (i.e. just after the initialisation)[/quote]

So this doesn't need to use the Editor API or anything, just add it right after the initialization is closed out?

-Carl

allan

Well it uses the Editor API in that there are calls to the `node` , `get` , `show` and `hide` methods (in the above code), but it isn't doing in the initialisation, no.

So the code might look something like:

[code]
var editor = $.fn.dataTable.Editor( {
// editor options
...
} );

// Add events handlers to the DOM nodes created by Editor
...

$('#example').dataTable( {
// DataTables options
...
} );
[/code]

Regards,
Allan

carlg

Thanks much!

carlg

Hi Allan,

I have a follow-up question. This isn't working for me like I expected. I am using ajax to get the records for the datatable, and I am also using another ajax method for editor actions. This must be what is causing a problem.

Do you have an idea for how I could include this logic inside my Editor initialization so that I have access to the ajax method's properties?

Thanks,
Carl

allan

When you say the ajax method's properties, do you mean the parameters that are to be sent by Ajax, or the result returned from the server? I presume the latter, in which case you would simply perform your Editor initialisation inside the Ajax callback, where the JSON data (assuming it is JSON) will be fully available for use.

Regards,
Allan