Forum Stats

  • 3,815,385 Users
  • 2,259,012 Discussions
  • 7,893,063 Comments

Discussions

Double click issue

Sirish Reddy
Sirish Reddy Member Posts: 80 Blue Ribbon
edited Apr 21, 2022 5:04PM in Oracle JET

Hello all, Is there an elegant and standard way within JET framework to prevent user from double clicking on the button?

<oj-button id='submit' on-oj-action='[[submitRequest]]'>Submit</oj-button>

I have tried the following but it doesn't work... It still gets submitted twice.

Being a Java developer, any help on resolving this OJET issue would be highly appreciated.

self.requestInProgress = ko.observable(false);
self.submitRequest = async function (event) {
          console.log('createRequest::submitRequest');
          console.log('self.requestInProgress::'+self.requestInProgress());
          await executeSubmitCall();
};
var executeSubmitCall = async function () {
          if (!self.requestInProgress()) {
            self.requestInProgress(true);
            if (await validateSubmitForm()) {
              await prepareSubmitCall(false);
            }
            self.requestInProgress(false);
          }
};

Thanks.

Tagged:

Best Answer

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,775 Employee
    Answer ✓

    The button itself does have some throttling built-in (you can't click on it really fast), but it does not stop you from clicking twice over a second or even a half-second. You can write your own trap code in the on-oj-action event handler for things like this if you like.

    If you are trying to stop someone from submitting a form twice, or something like that, you can set a binding to the "disabled" property and control the status of that in the on-oj-action event handler.

    Sirish Reddy

Answers

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,775 Employee
    Answer ✓

    The button itself does have some throttling built-in (you can't click on it really fast), but it does not stop you from clicking twice over a second or even a half-second. You can write your own trap code in the on-oj-action event handler for things like this if you like.

    If you are trying to stop someone from submitting a form twice, or something like that, you can set a binding to the "disabled" property and control the status of that in the on-oj-action event handler.

    Sirish Reddy
  • Sirish Reddy
    Sirish Reddy Member Posts: 80 Blue Ribbon

    Thanks John! Binding the disabled property in the on-oj-action event handler and controlling the status worked.

    <oj-button id='submit' on-oj-action='[[submitRequest]]' 
    data-bind="disable: requestInProgress() === true">Submit</oj-button>