You need to sign in to do that
Don't have an account?
rcher
Disabling command button after one click
Hi,
I am trying to disable the command button "Quote>CW" once clicked. I am using JQuery for this. For some reason, the button is not getting disabled after one click. Let me know what the issue could be.
Below is the code:-
<apex:page controller="Quote_To_CW_Test" sidebar="false" id="page">
<apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" / >
<script>
function validateFunction(paramval,paramval1){
if(paramval=='Sent'){
alert('The quote has already been sent to CW. Cick Cancel to go back to the quote');
return false;
}
if(paramval1=='false'){
alert("Your Quote has not been synced. Please sync your quote before continuing");
return false;
}
}
j$ = jQuery.noConflict();
function disableSave() {
j$(".saveButtonId").prop("disabled","true");
j$(".saveButtonId").val("Sending quote to CW...");
j$(".saveButtonId").css( "border-color", "#c4c4c4" );
j$(".saveButtonId").css( "color", "#909090" );
}
function enableSave() { j$(".saveButtonId").removeProp( "disabled" ) j$(".saveButtonId").val("Save");
j$(".saveButtonId").css( "border-color", "#7f7f7f" ); j$(".saveButtonId").css( "color", "#333" );
}
</script>
<apex:form id="form">
<apex:pageBlock id="pageblock">
<style>
body .bPageBlock .pbBody .red .pbSubheader{
background-color:#c00000;
}
body .bPageBlock .pbBody .grey .pbSubheader{
background-color:#c0c0c0;
}
body .bPageBlock .pbBody .grey .pbSubheader h3{
color:#000;
}
{
text-align:center;
}
</style>
<style type="text/css">
.wrapper {
text-align:center;
}
</style>
<apex:outputPanel styleClass="red" id="outputpanel">
<apex:pageBlockSection title="Click on the Quote>CW button below to send the Quote to CW" id="pbSection">
</apex:pageBlockSection>
<div align="center" draggable="false">
<!-----apex:actionStatus id="mySaveStatus"------>
<!-------apex:facet name="stop"------->
<apex:commandbutton action="{!invokeMule}" onclick="disableSave()"
status="savingStatus" styleclass="saveButtonId" value="Quote>CW" id="saveButtonId"/>
<!------/div-------->
<!-------/apex:facet------->
<apex:commandButton action="{!Cancel}" value="Cancel" disabled="false" id="theCancelButton"/>
</div>
</apex:outputPanel>
</apex:pageBlock>
</apex:form>
</apex:page>
I am trying to disable the command button "Quote>CW" once clicked. I am using JQuery for this. For some reason, the button is not getting disabled after one click. Let me know what the issue could be.
Below is the code:-
<apex:page controller="Quote_To_CW_Test" sidebar="false" id="page">
<apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" / >
<script>
function validateFunction(paramval,paramval1){
if(paramval=='Sent'){
alert('The quote has already been sent to CW. Cick Cancel to go back to the quote');
return false;
}
if(paramval1=='false'){
alert("Your Quote has not been synced. Please sync your quote before continuing");
return false;
}
}
j$ = jQuery.noConflict();
function disableSave() {
j$(".saveButtonId").prop("disabled","true");
j$(".saveButtonId").val("Sending quote to CW...");
j$(".saveButtonId").css( "border-color", "#c4c4c4" );
j$(".saveButtonId").css( "color", "#909090" );
}
function enableSave() { j$(".saveButtonId").removeProp( "disabled" ) j$(".saveButtonId").val("Save");
j$(".saveButtonId").css( "border-color", "#7f7f7f" ); j$(".saveButtonId").css( "color", "#333" );
}
</script>
<apex:form id="form">
<apex:pageBlock id="pageblock">
<style>
body .bPageBlock .pbBody .red .pbSubheader{
background-color:#c00000;
}
body .bPageBlock .pbBody .grey .pbSubheader{
background-color:#c0c0c0;
}
body .bPageBlock .pbBody .grey .pbSubheader h3{
color:#000;
}
{
text-align:center;
}
</style>
<style type="text/css">
.wrapper {
text-align:center;
}
</style>
<apex:outputPanel styleClass="red" id="outputpanel">
<apex:pageBlockSection title="Click on the Quote>CW button below to send the Quote to CW" id="pbSection">
</apex:pageBlockSection>
<div align="center" draggable="false">
<!-----apex:actionStatus id="mySaveStatus"------>
<!-------apex:facet name="stop"------->
<apex:commandbutton action="{!invokeMule}" onclick="disableSave()"
status="savingStatus" styleclass="saveButtonId" value="Quote>CW" id="saveButtonId"/>
<!------/div-------->
<!-------/apex:facet------->
<apex:commandButton action="{!Cancel}" value="Cancel" disabled="false" id="theCancelButton"/>
</div>
</apex:outputPanel>
</apex:pageBlock>
</apex:form>
</apex:page>
You can look into the below example:
Here using the onComplete it is able to achieve.
You can also achieve this without using the JQuery, just by using the boolean variable with rendered attribute.
Also look into below URLs:
http://salesforce.stackexchange.com/questions/44856/how-to-disable-an-apex-commandbutton-after-first-click
http://salesforce.stackexchange.com/questions/7729/disable-commandbutton-after-first-click-to-prevent-double-submission
http://salesforce.stackexchange.com/questions/84077/how-to-enable-disable-the-commandbutton
Please do let me know if it helps you.
Regards,
Mahesh