[ Editor ] - Field2 depending on field1 input

VascoOliveira

I have one field (field2) which value depends on another field (field1).
Basically, when field1 changes, the values from field2 will need to be updated, as they depend on field1.

I assume that there are 2 ways to achieve this:

1. detecting onChange
2. configure a dependent field

Detecting onChange

    editor.field('field1').input().on('change', function (e, d) {
        if ( d && d.editor ) return;
        //Code to change field2 according to field1 value ($(this).val())
    });

configure a dependent field

           editor.dependent( 'field1', function ( val ) {
               //Code to change field2 according to field1 value (val)
            } );

I'm using the following versions:
Jquery: 1.12.4
Datatables: 1.10.16
Editor: 1.7.3
KeyTables: 2.4.0-dev
Select: 1.2.5

I have two specific questions:

1. Which is the best approach?
2. On method 1), using onChange, the value for d.editor is ALWAYS true, even if i the user changed the value

Thank you very much.

allan

The dependent() method basically does what you've shown in the onChange code. My preference is to use dependent() since I can generally do what I need in less code, but really, its up to you!

On method 1), using onChange, the value for d.editor is ALWAYS true, even if i the user changed the value

It appears to work okay for me on this page:

editor.field('users.site').input().on('change', function (e, d) {
  console.log( d );
});

Allan

VascoOliveira

Please see here a live example.

Moreover, it seems that not only the d.editor is always true, but its also triggered by ALL fields, and not only on the dependent field.

allan

No - it appears to work as expected for me. If I click on a cell in the "Name" column, it does show that editorSet is applied. Then edit the value, and click inside the same cell, but not in the input element, the console.log statement prints undefined. The value changed by the end user, so this is correct.

Allan

VascoOliveira

The problem is that as i'm using KeyTable to simulate an Excel navigation, the user will only use the KeyPad.

In this scenario, is there any way to detect when a change happens in just a specific field?

VascoSaavedra

The use case i want to implement is very "simple": i have a specific field, that i need to monitor for changes, as every time it changes, i need to perform a server validation.

I tried to use both methods described above, but both are triggered in all fields, probably due to the Key2Act plugin.

Cold you please inform me on what would be the best way to handle the scenario i described, taking into account the components i'm using:

• Jquery: 1.12.4
• Datatables: 1.10.16
• Editor: 1.7.3
• KeyTables: 2.4.0-dev
• Select: 1.2.5

allan

I don't know what the Key2Act plug-in is I'm afraid.

Do you want to run validation as the user types, or when they've finished typing? When using inline editing, they will typically submit the form, so you don't gain anything by adding validation at that point, since you'd have your validation done by the server when the value is submitted anywhere.

Allan

VascoSaavedra

I'm sorry, i meant KeyTables Plugin.

Our interface is based on the Excel type navigation described here.

There are a few specific details:

1. The Editor works with local data, that is submitted to the server by pressing the Submit button (no submit is performed by the Editor).

2. There is a specific column that needs to verified, immediately after the user finishes typing. This should only be triggered if the field value actually changed.

3. The navigation is controlled by the KeyTable plugin, to allow a full Editing with the Keyboard only.

Using the above example, it would be something like this:

• Assume that the Position field needs to be validated every time the field changes. So when the user finishes typing on the Position field, and the Position field loose its focus, if the value changed, an event should be triggered.

As mentioned before, and as show in this live example, with the KeyTable navigation, every time a field receives the focus, it triggers both the onchange and the dependent "events".

Now, what we are trying to achieve, and this is critical , is simply to be able to detect a change on a specific field value, having the guarantee that its only triggered when a change effectively occurs.

There are a lot of approaches that could be used to achieve this, but all of them have some unwanted complexity, and its something that i was expecting that the Editor plugin would provide as simple method/event/etc.

Does the Editor offer this specific functionality ?
And if not, is it something that could be implemented in the near future

Assuming its not, what would be the best approach to achieve this?

allan

Listening for the change event and checking for extra data being passed in is the way to do that. If I just add a check in your code for !d in the change callback it works as you are looking for - at least as I understand you are looking for:

http://live.datatables.net/ziyinuju/1/edit

Only if the user actually changes the value does the console message get written. Is that not what you want?

Allan

VascoSaavedra

Thank you very much, it seems to be working as expected!

VascoSaavedra

..

VascoSaavedra

I'm sorry for the above messages, i was trying to Edit the message, but everytime i edited, a new one was created

Regarding your example here: http://live.datatables.net/ziyinuju/1/edit

• Its seems to be working on Chrome, but not on Edge and Firefox.

I've replicated the code to my application, and:
- Works as expected on Chrome
- Needs an Enter after editing on firefox and Edge

Could you please verify?

allan

I agree - in Firefox and Edge it would appear that the change event is never triggered from the input element as it is removed from the document before that event fires.

Would a keyup event listener work for you? That way you can get the event as the user is typing their information in. The other option is to use preSubmit to check if the value is valid or not.

Allan

VascoSaavedra

Unfortunately, none of those would work, at least the way we were expecting.
Is this something that you could address in a future release?

allan

Could you clarify how you are going to use this? I'm not certain exactly what it is that you are actually trying to do (I know at the technical level that you are trying to get the user input when it changes, but why wouldn't preSubmit or keyup work)?

If you can explain what you are trying to do at a higher level, then I might be able to suggest something or be able to add something to Editor is appropriate.

I don't currently see how the change event for inline editing can be made to work for Edge and Firefox if they don't trigger that event before the item is removed from the document. So a workaround for what you want to do would be needed.

Allan

VascoSaavedra

I'm sorry if i'm not being 100% clear, as i'n not a native speaker, and sometimes there might be some nuances that i'm missing.

The use case is very simple:

• I have a datatable that contains a list of Bank Accounts, one Account per Row
• As a user, i can add new empty rows
• As a user, i want to be able to type an Account number,
• As a user, every i insert an Account number, the Account number must be immediately validated to check if the Account is Valid.

NOTE: The above use case if for the Account field only, but in the same row, i have 3 more fields that use the same use case.

Issues regarding KeyUp:
- i would need to implement some type of a debounce functionality to detect when the user stopped typing,
- i would need to maintain the status of all the Accounts, per row, in order to understand if the value has changes, in order to perform a server validation.

Issues regarding PreSubmit:
- If i understood the documentation correctly, this is only triggered before submitting the full form to the Server, so it wouldn't allow us to implement the above use case.

The advantage of using the onChange event, is that it automatically avoids all the complexity of having to save the state of the fields, in order to detect if the field has changed.

Assuming that its not possible to address the Edge/FF issues, is there any functionality on the Editor that could help tracking the field values in order to detect a concrete change?

VascoSaavedra

@allan, could you please add your views on the above message?

allan

Hi,

Apologies for the delay in replying. Thank you for the additional information. I'm not clear on why you want to use an onChange event handler for this rather than just validating the data when it is submitted to the server (e.g. using server-side validation). You have to validate it at the server regardless, so doing validation on change and then immediately validating it again on submit appears a little redundant to me. Or am I missing something?

To my mind, either you do on-the-fly validation using something like keyup, or you use server-side validation when the field is submitted. I don't see the advantage of also adding onChange validation (specifically in the case of inline editing).

If i understood the documentation correctly, this is only triggered before submitting the full form

The preSubmit event will be triggered whenever Editor's submit() is activated - that includes submitting a value from an inline edit.

Regards,
Allan