Double click issue

Sirish Reddy

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.

John 'JB' Brock-Oracle

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.

John 'JB' Brock-Oracle

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

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>