Double click insert button creates 2 records

[[email protected]]

I noticed a database of mine had a number of duplicate records in it and I've traced it back to users double clicking the insert button on a UX.

It's easy to replicate, just add a few fields to a UX, add a button and use the CRUD action js to perform the insert. When you test the UX, a double click will cause the insert to fire twice. A triple click will cause 3 records to be inserted (yikes).

I'm running the latest build 5028_5088 according to Alpha's "Check for New Version"

Any suggestions as to how to stop the duplicate inserts?

[Garry Flanigan]

Re: Double click insert button creates 2 records

See here for discussion and a great implementation

[[email protected]]

Re: Double click insert button creates 2 records

Thanks Garry, a few ideas there to play with. Makes me wonder though why this is still an issue in 2018 (not just for Alpha). Especially given the percentage of computer users that double click everything!

[[email protected]]

Re: Double click insert button creates 2 records

It's worth noting that disabling the insert button via any of the methods in the post mentioned above doesn't stop a double-click inserting 2 records, or even a rapid-fire triple-click inserting 3 records.

[Garry Flanigan]

Re: Double click insert button creates 2 records

The method described works so you must have some other stuff happening than a plain submit button.

[[email protected]]

Re: Double click insert button creates 2 records

It's not a standard submit button, it's a button that calls the Action JS CRUD operations to Insert a record.

After reading the suggestions, OnClick of the button I had the following 3 actions defined, running synchronously:
1 Disable the button
2 Perform the insert
3 Enable the button

A fast double-click of the button still inserts 2 records which is a pity as I would think this should fix the issue.

I contacted Alpha about this and was advised to convert these actions into a singe plain text action which does seem to avoid duplicate inserts. However, on an intermittent basis, insert isn't happening at all... still trying to work that out but here is a snippet for anyone reading this post.


var obj = {Dialog.object}.getControl('BUTTON_5');
obj.setDisabled(true);

{dialog.object}.ajaxCallback('','','system:CRUDaction','','_xbfunction=CRUDAction_21178ae9a7c149f49f71796e4bc34c19'); //this line of code is auto created by converting the AJS to text.

[[email protected]]

Re: Double click insert button creates 2 records

I came up with another approach that works well for me.

Setup the insert button using the action js CRUD function then hide the button client side. In my case the button ID is BUTTON_HIDDEN_INSERT.

Create another button that the user will click to submit their data and do whatever else you need the button to do, such as navigate to another page. In my case the button ID is BUTTON_INSERT.

Behind the Click event of BUTTON_INSERT enter this code:

{dialog.object}.setDisabled('BUTTON_INSERT');

{dialog.object}.buttonClick('BUTTON_HIDDEN_INSERT');

This approach mitigates the issue of multiple record inserts when a user double-clicks.

[RichCPT]

Re: Double click insert button creates 2 records

A fast double-click of the button still inserts 2 records...However, on an intermittent basis, insert isn't happening at all...

Yep, multiple clicks on action buttons and action buttons not responding are familiar issues. Double-click on an Insert/save button is not so much an issue for me as that would get caught by the duplicate key constraints. However, I can see in a compilation of user events logs that users are clicking buttons twice in a row, but I don't know if that is leading to problems or not. I can also see that for the short 24-hour period where I captured users events, that there were a couple of times where the ajax request timed-out (response not completed within 30 seconds).

Ajax timeout conditions are not handled consistently by Alpha in applications built with a tabbedUI and Grids and UXs. I have noticed some Ajax calls are setup with a timeout period and others are set up with no timeout. Also, I have noticed that when a timeout does occur that AA's behavior is to either inform the user, clear the "please wait" message, or to do nothing. I thing a lot of work needs to be done in this area - error handling of when the server does not respond.

[iRadiate]

Re: Double click insert button creates 2 records

I came up with another approach that works well for me.

Setup the insert button using the action js CRUD function then hide the button client side. In my case the button ID is BUTTON_HIDDEN_INSERT.

Create another button that the user will click to submit their data and do whatever else you need the button to do, such as navigate to another page. In my case the button ID is BUTTON_INSERT.

Behind the Click event of BUTTON_INSERT enter this code:

{dialog.object}.setDisabled('BUTTON_INSERT');

{dialog.object}.buttonClick('BUTTON_HIDDEN_INSERT');

This approach mitigates the issue of multiple record inserts when a user double-clicks.

Hey Richard,

I have finally gotten around to trying your method of preventing double-clicks and it works great!
There are a number of suggestions on this forum on how to handle this and Alpha has a solution using a temporary '_locked' variable and a timeout counter.

But .. in my opinion your method works the best as it works well and overcomes some of the other method limitations such as validation problems and arbitrary timeouts.

Thanks for this great idea !!!