Editor Dependent is not Synchronous with Submission

HassanDomeDenea

Greetings
I have a count field, I thought of providing calculation in it, so user can put 2+3 to get 5.
I'm using field.dependent for that.
Here is my code

let field = 'item_count';
editor.dependent(field, (val) => {
                            let obj = {values: {}};
                            try {
                                let r = eval(val);
                                if (r != val) {
                                    obj.values[field] = r;
                                }
                            } catch (e) {
                                obj.values[field] = 0;
                            }
                            return obj;
                        });

This works fine, when I put 2+5 and switch to another field, it will directly be 5.
The problem is when I put 2+5 and then click submit button. It seems that the editor send the data with the originial ("2+5") before the depenent funcion finishes.
Is there a way to make all depenedencies resolve and applied before submissionis sent ?

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

dependent() listens for the change event by default. That only triggers when you blur from the field, and it sounds like the submit is happening before that blur / change is being fully enacted (which is a bit odd, I'll look into that).

What I'd suggest in this case is listening for keyup as well as change:

                        let field = 'item_count';
                        editor.dependent(field, (val) => {
                            let obj = {values: {}};
                            try {
                                let r = eval(val);
                                if (r != val) {
                                    obj.values[field] = r;
                                }
                            } catch (e) {
                                obj.values[field] = 0;
                            }
                            return obj;
                        }, {event: 'keyup change'});

Allan

HassanDomeDenea

I see. I noticed that If I mousedowned the submission button without releasing the mouse click, the value do get calculated, then I can release it to submit.

Keyup can't work because the user maybe still typing his equation (180 - 3 / 4 + (1+2) ).
Also I guess some users will hit enter directly if they are not wishing to enter the rest of the fields.

Is there a way to setTimeout that delay submision or something like that ?

(And Thanks for the guideline of highlighting my code, will take care next time)

allan

Is there a way to setTimeout that delay submision or something like that ?

Yes - you could use buttons() like this:

editor.buttons({
  text: 'Save',
  action: function () {
    var that = this;
    setTimeout( function () {
      that.submit();
    }, 10 );
  }
});

its a bit of a hack, but it would work...

How are you currently displaying the editor form - is it via a Button, or are you using inline editing or something else? How to actually configure the buttons will depend upon that.

Allan

HassanDomeDenea

Yes I'm using the buttons. But only extending the originals.
I'm thinking of modifying the preSubmit event, so it return false, while having timeout in it which submit it back. And it worked.

window['delaySubmit'] = true;
                    editor.on('preSubmit', function (e, o, a) {
                        let that = this;
                        setTimeout(function () {
                            window['delaySubmit'] = false;
                            that.submit();
                        }, 20)
                        if (window['delaySubmit']) {
                            return false;
                        } else {
                            window['delaySubmit'] = true;
                        }
                    })

The reamining problem is when the user hit enter, this does not change the field in first place, can I add a trigger like (keydown.enter) ? So only that key can trigger the dependent function ?

allan

When you say you are using the Buttons, do you mean edit etc? If so, try this:

{
  extend: "create",
  editor: editor,
  formButtons: {
    text: 'Save',
    action: function () {
      var that = this;
      setTimeout( function () {
        that.submit();
      }, 10 );
    }
  }
}

Allan

HassanDomeDenea

Yes, Thank you and it worked by setting timeout when the user move the mouse and click the submit button in the form.
But when user is still in the input field, and hit enter to submit, the dependent method doesn't work in first place.
So is their a trigger for dependent when the user hit enter key?

allan

You could use the form-options onReturn parameter to do something similar:

formOptions: {
  main: {
    onReturn: function () {
      var that = this;
      setTimeout( function () {
        that.submit();
      }, 10);
    }
  }
}

its a big of a hack really, but I think that should work.

Allan