You need to sign in to do that
Don't have an account?
![parkerAPT parkerAPT](https://dfc-org-production.my.site.com/img/userprofile/default_profile_45_v2.png)
How to disable button on Click and Renable on completed AJAX request
I'd like to prevent users from repeatedly clicking on a custom button I've created.
Right now I have a button that will create a custom task via an AJAX call on the contacts page. On the returning AJAX call, I reRender the list of Activites associated with this contact.
However, I need a way to provide visual feedback to disable the button after a user clicks it.
I've seen this work on QuickSave button and am wondering how to implement this.
Thanks
-P
Here is the code for reference. (I've removed the inital "
apex:page standardController="Contact" extensions="customController" tabStyle="Contact">
apex:detail subject="{!contact}" relatedList="false"/>
apex:form >
apex:commandButton reRender="activitiesPanel" status="activityStatus" action="{!markContactAsSentEmail}" value="Add task for contact"/>
/apex:form>
apex:outputPanel id="activitiesPanel">
apex:actionStatus id="activityStatus" startText="Refreshing Activity History...">
apex:facet name="stop">
apex:relatedList id="activitiesList" list="ActivityHistories" />
/apex:facet>
/apex:actionStatus>
/apex:outputPanel>
Message Edited by parkerAPT on 12-23-2008 02:15 PM
Right now I have a button that will create a custom task via an AJAX call on the contacts page. On the returning AJAX call, I reRender the list of Activites associated with this contact.
However, I need a way to provide visual feedback to disable the button after a user clicks it.
I've seen this work on QuickSave button and am wondering how to implement this.
Thanks
-P
Here is the code for reference. (I've removed the inital "
apex:page standardController="Contact" extensions="customController" tabStyle="Contact">
apex:detail subject="{!contact}" relatedList="false"/>
apex:form >
apex:commandButton reRender="activitiesPanel" status="activityStatus" action="{!markContactAsSentEmail}" value="Add task for contact"/>
/apex:form>
apex:outputPanel id="activitiesPanel">
apex:actionStatus id="activityStatus" startText="Refreshing Activity History...">
apex:facet name="stop">
apex:relatedList id="activitiesList" list="ActivityHistories" />
/apex:facet>
/apex:actionStatus>
/apex:outputPanel>
Message Edited by parkerAPT on 12-23-2008 02:15 PM
Hi..
This may help u...
<apex:actionStatus id="AjaxStatus" onstart="DisableButton()" onstop="EnableButton()" ></apex:actionStatus>
<apex:commandbutton value="Test Button" id="btnTest"/>
<script>
function DisableButton()
{
document.getElementById("{!$Copmponent.btnTest}").disabled=true;
}
function EnableButton()
{
document.getElementById("{!$Copmponent.btnTest}").disabled=false;
}
</script>
Use Actionstatus id when u call any ajax call like actionsupport..
All Answers
I would do this .. my changes are in bold.
<apex:commandButton reRender="activitiesPanel,idActStatButt" disabled="{!buttonStatus}" status="activityStatus" action="{!markContactAsSentEmail}" value="Add task for contact" id="idActStatButt"/>
On the constructor of the controller, I would set the buttonStatus = false. And on the markContactAsSentEmail method, I would set buttonStatus = true.
HTH.
I think your solution solves a different problem. Your solution will set the button to be disabled after the AJAX call returns and reRenders. Am I misinterpreting your solution, or is this how it was designed?
However, I only want the button to be disabled during the processing of the AJAX call returns. Users should be able to resubmit the button after processing occurs but not during processing.
Furthermore, is there a way to disable all actionable items within an actionRegion while an AJAX call is processing?
Thanks
P
Hi.. Parker.
Try onstart ,onstop property in actionstatus tag..
U call js function for disable ur button in onstart and enable ur btn in onstop ..
I hope its make sense...
Do you have any examples of this?
Hi..
This may help u...
<apex:actionStatus id="AjaxStatus" onstart="DisableButton()" onstop="EnableButton()" ></apex:actionStatus>
<apex:commandbutton value="Test Button" id="btnTest"/>
<script>
function DisableButton()
{
document.getElementById("{!$Copmponent.btnTest}").disabled=true;
}
function EnableButton()
{
document.getElementById("{!$Copmponent.btnTest}").disabled=false;
}
</script>
Use Actionstatus id when u call any ajax call like actionsupport..
I ended up modifying your functions slightly to also change the CSS classes. Here is the code for others:
function disableButton(el){
var btn = document.getElementById(el);
if(btn!==null){
btn.disabled = true;
btn.className = 'btnDisabled';
}
}
function enableButton(el){
var btn = document.getElementById(el);
if(btn!==null){
btn.disabled = false;
btn.className = 'btn';
}
}
- I think you need don't normally need to use actionSupport for components like commandLink or commandButton because you can directly specify the action. This action gets fired when a user clicks on the button / link. You should use actionSupport for things that do not directly support the action attribute or if you want to attach the action to an event other than click. (like on blur in your case). I've modified the code to reflect the changes.
- I don't think you need to specify the entire chain of ids like: "$Component.frmMain.pbSearch.pbbSearch.btnSearch"
- I've modified the code by replacing this with: $Component.btnSearch
So your code would look like:Let me know if this works because I have not testing it.
Message Edited by parkerAPT on 01-14-2009 12:55 PM
Hi,
Thanks for your help, that worked. Couple of thing that I noticed was,
- I had the Command Button inside the PageBlockSection so it was only disabling the top one not the bottom one, so now I placed the command button outside the pageblock section.
- In IE you can visually see that the button has been disabled, but in FireFox even though it's disabled, it looks like the button is enabled.
Thanks again.
btn.className = 'btnDisabled';
btn.className = 'btn';
The following link illustrates some of the button classes in Salesforce by default:
http://www.salesforce.com/us/developer/docs/pages/Content/pages_styling_salesforce.htm#kanchor240
{!$Component.frmMain.pbMatchingResults.btnCreateNew}
Have you tried:
document.getElementById("{!$Component.btnCreateNew}").disabled=true;
The $Component notation you need to specify ID structure relative to where the $Component notation exists. If you think of the DOM as a tree structure, you will need to specify a common ancestor and then traverse down each tree branch using the named Ids.
I know that isn't a great explanation, but hopefully the following example will demonstrate how $Component resolves which ID you actually are referencing.
The Two Key examples from this that should help you are the $Component reference in the onclick for button:
btnAlertTwo_Outside and alertOutsideDom.
Also note that you will NEED to have an ID on the pageBlockButtons. Notice that the onclick $Component reference for btnAlertThree_Outside cannot resolve the id of:Component.block2.btnAlertFour
In your case, add an id to the PageBlockButtons in pbMatchingResults to something like: blkbtns.
Your $Component reference should now hopefully look something like:
$Component.frmMain.pbMatchingResults.blkbtns.btnCreateNew
Hope that helps.
Message Edited by parkerAPT on 01-16-2009 10:38 AM