Has anyone else seen this? Single click on custom button triggers Apex method twice

Question

In our system we have a custom button on a standard Account detail window that calls an Apex method to create a pre-filled Opportunity. In our environment, where Internet Explorer 11 runs inside a thin client, it is quite easy to double click this button and thus call the Apex method twice. The click is not handled fast enough.

This is not possible using, e.g., Firefox on plain Windows. There the browser + the internet connection is just too fast.

But now I have a user who swears that she doesn't double click, yet the method is called twice. I see that two Opportunity objects are created within 2 seconds. It is not easy to see if this happens to other users as well, it could be that they do not notice or complain.

I trust this user, if she says she doesn't double click, then she doesn't.

Has anyone else seen this? Anyway to prevent it? I am afraid that for the time being, we are stuck with IE11.

The Javascript code is

{!REQUIRESCRIPT("/soap/ajax/41.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/41.0/apex.js")}
window.location = sforce.apex.execute("OpportunityUtil","createOppAndReturnProductPickerURL",{accountId:"{!Account.Id}",contactId:"{!Contact.Id}"});

and to be complete, this is the called Apex code:

webservice static String createOppAndReturnProductPickerURL(Id accountId, Id contactId) {
Account a = [SELECT Id, Name
             FROM Account
             WHERE Id = :accountId][0];

Opportunity o = new Opportunity(
    AccountId = accountId,
    Name = '' + Date.Today().year() + '-' + Date.Today().month() + '-' + Date.Today().day() + ' - ' + a.Name,
    StageName = 'Onderhandeling',
    CloseDate = Date.Today().addDays(14),
    Contactpersoon__c = (contactId == null) || String.isBlank((String)contactId) ? null : contactId);
insert o;

return PICK_PRODUCTS_PAGE + '?oppId=' + o.Id;
}

Answer 1

I tried to reply as a comment, but it is just too much code and it looks horrible...

Why don't you disable your own button before calling your code?

If your button name is disableme, the code would be something like...

function disable(button){
    document.getElementsByName(button)[0].setAttribute("disabled","disabled");
    document.getElementsByName(button)[0].className = "btnDisabled";
    document.getElementsByName(button)[1].setAttribute("disabled","disabled");
    document.getElementsByName(button)[1].className = "btnDisabled";
}
function enable(button){
    document.getElementsByName(button)[0].removeAttribute("disabled");
    document.getElementsByName(button)[0].className = "btn";
    document.getElementsByName(button)[1].removeAttribute("disabled");
    document.getElementsByName(button)[1].className = "btn";
}

disable('disableme');
window.location = sforce.apex.execute(... /* As per @Derek F suggestion */, {
    onSuccess: function(){
        enable("disableme");
    },onFailure: function(){
        alert("call failed"); 
        enable("disableme");
    }
});

Hope it helps.