Apex Code Development You need to sign in to do that
Don't have an account?
DCS Disable apex command button
I have an apex command button as below calling a custom controller method
<apex:commandButton value="Save" id="Save" action="{!save}" onclick="this.disabled=true;"/>
The method saves the item and navigate to another page. It is not a partial page update call.
I would like to disable button after the first click. I tried using onclick and calling a javascript to set the disabled status as true. When I use onclick even to make the javascript call, the button becomes disabled, but the save method on the controller is not being called.
I changed the button onclick event to just alert 'hi' as below and it works. It alerts and then also makes the method call
<apex:commandButton value="Save" id="Save" action="{!save}" onclick="alert('hi');"/>
But when I added the code to disable the button too as shown below, it stops calling the controller method.
<apex:commandButton value="Add Item(s)" id="addItem" action="{!addItems}" onclick="alert('hi');this.disabled=true;"/>
Is there a different way to solve this?
Hello everyone this is a solution!!, a few days ago I presented a requirement where I needed to disable the button was pressed once, the easiest way to do this is by using the tag <apex:actionStatus> and then I leave <apex:facet> a small example of implementation. Greetings.
<apex:actionStatus id="mySaveStatus1">
<apex:facet name="stop">
<apex:commandButton action="{!youmethod}" status="mySaveStatus1" value="Save" disabled="false" rerender="mySaveStatus"/>
</apex:facet>
<apex:facet name="start">
<apex:commandButton action="{!youmethod}" status="mySaveStatus1" value="Processing..." disabled="true"/> </apex:facet>
</apex:actionStatus>
All Answers
Could you set the value of the commandButton's disabled attribute based upon a Boolean in the controller? This would toggle the button on and off for you.
Jeff Douglas
Informa Plc
http://blog.jeffdouglas.com
<apex:form>
<apex:commandButton value="Click" action="{!save}" disabled="{!isDisabled}" onclick="alert('hi');"/>
</apex:form>
</apex:page>
Hello TLF;
It's difficult to answere your question without seeing your javascript. But note that, if your javascript returns a "false" (Boolean) value, the action method is not invoked.
I've tried adding a javascript onclick function directly to the commandButton that looks like this:
. . . <apex:commandButton id="myButton" action="{!complete}" value="Complete" onclick="return buttonClicked(this);" /> </apex:form> <script> function buttonClicked(myButton) { myButton.disabled=true; return true; } </script> . . .
I've also tried adding a similar function to the form's onsubmit event that uses the $Component global to get the button by ID and disable it. In both cases, the javascript function disables the button, and returns true. I've verified with a javascript debugger that the functions are called and behave as expected. I've also observed that the form is posted when the button is clicked, however, the post does not contain the value of the command button as a parameter. If I remove my code that disables the button, the post does contain the button value as a parameter. My action function is not invoked when the button is disabled.
Hello everyone this is a solution!!, a few days ago I presented a requirement where I needed to disable the button was pressed once, the easiest way to do this is by using the tag <apex:actionStatus> and then I leave <apex:facet> a small example of implementation. Greetings.
<apex:actionStatus id="mySaveStatus1">
<apex:facet name="stop">
<apex:commandButton action="{!youmethod}" status="mySaveStatus1" value="Save" disabled="false" rerender="mySaveStatus"/>
</apex:facet>
<apex:facet name="start">
<apex:commandButton action="{!youmethod}" status="mySaveStatus1" value="Processing..." disabled="true"/> </apex:facet>
</apex:actionStatus>
Yes, I ended up doing excatly the same.
<apex:actionStatus id="mySaveStatus"><apex:facet name="stop">
<apex:commandButton value="Add Item(s)" id="addItem" action="{!addItems}" status="mySaveStatus" rerender="LitList"/>
</apex:facet><apex:facet name="start">
<apex:commandButton value="Adding Item(s)" disabled="true"/>
</apex:facet>
</apex:actionStatus>
Hi ,
As we do in javascript in html like id some javascript validation is false we return false to button and click
event is not fired. but here i am not able to do that. even if i return false it is executed what to do.
Thanks for posting this solution.
That really solved my problem :)
Just do this :-
<apex:commandButton action="{!submitform}" value="Submit" onclick="return checkform()"/>
make it onclick="return checkform()" // add return in end the it work fine
Hello All,
Just want to share my approach to solve the isue.
Approach to disable the button using call from controller does not
work, because the button is not disabled until the action completes -
this take time. We can not also disable the button by JavaScript
(disabled = true). "onClick" event is executed first. If the "onClick"
event will disable the button, the AJAX action will not executed.
So the best solution in this case is to not try to "disable" buttons, but call
custom modal window which will prevent user from multiple clicks and
multiple form submission.
Here is a code example:
VF page components
*** CSS ***
<style>
#modalWindow {display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; }
</style
<script>
function revealModal(divID) {
window.onscroll = function () { document.getElementById(divID).style.top = document.body.scrollTop; };
document.getElementById(divID).style.display = "block";
document.getElementById(divID).style.position = "relative";
document.getElementById(divID).style.top = document.body.scrollTop;
}
</script>
*** Command Button ***
<apex:commandButton value="Save As Draft" action="{!saveAsDraft}" onclick="revealModal('modalWindow');" />
*** Modal Window ***
<apex:outputPanel>
<!-- Modal Window to Prevent Users from Submitting a Form Twice -->
<div id="modalPage0">
<div class="modalBackground"></div>
<div style=" position: fixed; z-index: 750; left: 45%; top: 40%; width: 200px; padding: 20px; border: solid 2px #ccc; background-color: white;">
<img src="{!$Resource.LoadingSm}" style=" float: left; padding-right: 5px;"/><b>Processing. Please wait...</b>
</div>
</div>
</apex:outputPanel>
P.S.
As a $Resource.LoadingSm you can use any .gif animated "in progress" image
Regards,
Evgeny
I tried most of the techiniques described in this thread, and a few of my own. All of them have problems. First it seems if you overload the onclick event, and the action returns in error, then the visual force page will never show the error message. If you don't set the onclick the the refresh works as expected and you'll see the error message. The other method of using actionStatus is more successful, and seems to acheive the goal of blocking multiple clicks but the one downside to that is the user can actually see the one button removed and the disabled button added, rather than just a smooth change of display class like you get with the onclick method.