[SalesForce] Using jQuery to disable VF page button onclick

Quick background: I've already tried disabling onclick via apex, but my disable does not execute fast enough in the UI.

I'm trying to incorporate jQuery in my VF page code so that a button is disabled upon the first click. How can I incorporate this code I found online: https://stackoverflow.com/questions/5445431/jquery-disable-submit-button-on-form-submission

to my current VF code:

    <apex:pageBlock mode="edit" rendered="{!passesCheck}" id="mainBlock">
        <apex:pageBlockButtons >
            <apex:actionStatus id="saving">
                <apex:facet name="start" ><apex:image url="{!$Resource.loading}" /></apex:facet>
                <apex:facet name="stop" >
                    <apex:commandButton action="{!save}" status="saving" disabled="{!stopSave}" 
                                        value="{!IF(OR(isAddOn, currencyUpdate), 'Update', 'Create')} Renewal" />
                </apex:facet>
            </apex:actionStatus>
            <apex:commandButton value="Cancel" action="{!cancel}" />
        </apex:pageBlockButtons>

Best Answer

Just for clarification, the reason that this is happening in your page is not that it doesn't execute 'fast enough' but instead the intended behaviors are occurring in the wrong order.

The manner in which I normally accomplish this behavior is like this... a button on the page calls a function (of my own) which first calls the actionFunction to post the data, then disables the buttons. The actionFunction is defined with an oncomplete="" script to call another function in the page to re-enable the buttons in the page when the ajax post is finished.

In this example 'addNewRow' starts the process via the button click and 'addNewRowComplete' is called when the actionFunction is finished.

Simply adding the css class 'btnDisabled' will make the button(s) appear to the user as disabled, but will in fact still be clickable causing the form to post again.

This code should be a functional example as written though you should change the function names to fit your needs.

<apex:page>
    <script>
    // function to control the native css style 
    // and the addition and removal of the disabled attribute on the buttons
    function buttonsEnabled(enable) {
        var $buttons = jQuery('.btn'); // find all buttons in the page
        if (enable === false) {
            $buttons.toggleClass('btnDisabled', true).attr('disabled', 'disabled');
        } else {
            $buttons.toggleClass('btnDisabled', false).attr('disabled', null);
        } 
    }

    // function called by the commandButton
    function addNewRow() {
        // make the ajax post via the actionFunction definition by calling the AF
        // this is case sensitive, match the name of the actionFunction
        doTheSave(); 

        // _then_ disable the buttons on the page
        buttonsEnabled(false);

        // return false to prevent the form from performing the button's click
        // behavior in addition to this function call. note that the onclick 
        // statement of the button returns this false value to the browser.
        return false;
    }

    function addNewRowComplete() {  
        // re-enable the buttons on the page after the actionFunction is finished
        buttonsEnabled(true);   
    }

    </script>


    <apex:form>
    <!-- somewhere in your form -->
    <apex:actionFunction name="doTheSave" action="{!save}" status="saving" rerender="messages" oncomplete="addNewRowComplete();"></apex:actionFunction>

    <!-- your normal button definition with the addition of the onclick script -->
    <apex:commandButton action="{!save}" status="saving" disabled="{!stopSave}" 
        value="{!IF(OR(isAddOn, currencyUpdate), 'Update', 'Create')} Renewal" 
        onclick="return addNewRow();" />
    </apex:form>
</apex:page>

Hope this helps get you going in the right direction!

Related Solutions

[SalesForce] Disable commandButton after first click to prevent double submission

The mechanism I have found to be most maintainable uses a JavaScript function called by an element's click event, which internally calls an actionFunction to post the form, disables the buttons on the page and then returns false on the commandlink/button. This is used in conjunction with an oncomplete on the actionFunction to re-enable the buttons when the form has been (ajax) posted and returns a result to the page.

Without the rerender attribute the form performs a full postback along with the disabling of the buttons.

Note: You can't disable the button(s) before the form is posted or the data sent to the controller will not include which button/link within the form was clicked and thus which action to execute.

<script src="//ajax.googleapis.com/ajax/libs/jquery/latest/jquery.js"></script>
<script>

    function buttonsEnabled(enabled) {
        // retrieve all of the buttons or links on the page
        // with the css class of btn
        var $buttons = jQuery('.btn');
        if (enabled === false) {
            // add the btnDisabled class to give it the look of being disabled
            // add the disabled attribute to actually disable interactability
            $buttons.toggleClass('btnDisabled', true).attr('disabled', 'disabled');
        } else {
            // remove the css class and the disabled attribute
            $buttons.toggleClass('btnDisabled', false).attr('disabled', null);
        } 
    }

    function doSomeWork() {
        // first, call the action function to post the form
        doSomeWorkActionFunction();

        // second, disable the buttons
        buttonsEnabled(false);

        // third, return false to prevent the click from
        // posting the form a second time
        return false;
    }

</script>

<apex:form>

    <apex:actionFunction name="doSomeWorkActionFunction" 
        action="{!yourControllerMethod}" 
        oncomplete="buttonsEnabled(true);"
        rerender="whateverYouNeedToRerender"></apex:actionFunction>

    <apex:commandLink action="{!yourControllerMethod}" 
        value="Your Text Here" 
        id="theCommandLink" 
        onclick="return doSomeWork();" />

</apex:form>

[SalesForce] Use jquery to enable button

Here is a fairly simple implementation. It assumes you've added styleClass="monitored" to the input fields and styleClass="target" to the button fields (though you could use other selectors if you like).

The code disables all the buttons when the page is loaded and for a couple of different events re-enables the buttons by finding the parent "tr" and from there finding the child button.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var j$ = jQuery.noConflict();
j$(document).ready(function() {
    j$('.target').each(function() {
        j$(this)
            .attr('disabled', 'true')
            .addClass('btnDisabled')
            ;
    });
    j$('.monitored').bind('keyup change', function() {
        j$(this).closest('tr').find('.target')
            .removeAttr('disabled')
            .removeClass('btnDisabled')
            ;
    });
});
</script>

If you want to be more precise about the enabling, you can use the approach described in Monitoring a Form for Changes with jQuery.

Best Answer

Related Solutions

[SalesForce] Disable commandButton after first click to prevent double submission

[SalesForce] Use jquery to enable button

Related Topic