+ Start a Discussion
LinkYogiLinkYogi 

onclick function not working for commandlink

Hi All,

Below is my code:

VF Page:

<apex:page controller="SummaryPdfDispController" standardStylesheets="false" showHeader="false" sidebar="false">


<apex:form >
     <apex:pageBlock Id="status1">

<apex:commandLink action="{!SendEmail}" value="Email Dossier" reRender="status1" styleClass="element" onclick="this.value = 'Sending...'"/>
    </apex:pageBlock>
</apex:form>
</apex:page>

Note:
1. If I omit the onclick functionality then action- SendEmail is called.
2. I could not use commandbutton as per project purpose.
3. I have used javascript on onclick functionality, but it did not work.

 
Amit Chaudhary 8Amit Chaudhary 8
Try link below code :-

<apex:commandbutton id = "s1" value="Submit" onclick="performValidation()"/>
<apex:actionFunction name="afterValidation" action="{!callAction" rerender="ids of the components you want to refresh" />

Now in javascript function,
function performValidation()
{
//after your stuff
//invoke the actionFunction
afterValidation();
}

http://salesforce.stackexchange.com/questions/24250/get-commandlink-value-using-js
https://developer.salesforce.com/forums?id=906F000000098yTIAQ

Please let us know if this will help u
Mohit Bansal6Mohit Bansal6
Hi

You can try below dummy code.
 
<apex:page controller="TestController">
    <head>
        <script type='text/javascript'>
function confirmMessage(recId)
       {
confirm('Are you sure');
document.getElementById('{!$Component.formID.delRecID}').value = recId;
delRecAction();
}
</script>
    </head>
<apex:pageMessages />
 
  <apex:form id="formID">
 
    <apex:actionFunction name="delRecAction" action="{!delrec}" rerender="ListBlock"/>
    <apex:inputHidden value="{!delRecVal}" id="delRecID"></apex:inputHidden>
 
    <apex:pageBlock title="Test" id="ListBlock">
        <apex:pageBlockTable value="{!Records}" var="i">
            <apex:column headerValue="Action">
                    <apex:commandLink onclick="return confirmMessage('{!i}')" rerender="ListBlock" >Del
                        <apex:param name="delid" value="{!i}"/>
                    </apex:commandLink>
            </apex:column>
            <apex:column headerValue="ID"  > 
                    <apex:outputtext value="{!i}" />
            </apex:column>        
        </apex:pageBlockTable> 
       </apex:pageBlock> 
  </apex:form>
</apex:page>
 
**********************************************
In Apex class , add variable delRecVal
 
public with sharing class TestController {
    Map<string,Integer> x;
public String delRecVal {get; set;}
 
    public TestController() {
        delRecVal = null;
     x = new Map<string,Integer>();
     x.put('1',1);
     x.put('2',2);
     x.put('3',3);
    }
 
    public List<Integer> getRecords() {
        return x.values();
    }
 
    public PageReference delRec() {
     x.remove(delRecVal);   
        return null;
    }
}

It uses onclick on commandlink, which calls a javascript function and which calls a backend function using actionFunction.

Regards
Mohit Bansal

In case, you face any issue, drop me message on forum or Skype me @mohit_bansal17, if you need any help.

Please mark this as solution by selecting it as best answer if this solves your problem, So that if anyone has this issue this post can help
LinkYogiLinkYogi
Hi @Mohit, @Amit- Thanks for your reply. on click function is working but my aim to show Sending... in a button when I click it is not happening. as per discussion. below is my code.

<apex:page controller="SummaryPdfDispController"  standardStylesheets="false" showHeader="false" sidebar="false"  >

<script>
     function send()
     {
         alert('Hi');
         this.value='Sending... ';
         alert('Yes');
         send1();
     }
 </script>
 
   
  <apex:form Id="status">
      <apex:actionFunction action="{!SendEmail}" name="send1" reRender="status1"/>
      <apex:pageBlock Id="status1">
  <apex:commandLink value="Email Dossier" styleClass="element" onclick="send()"/>
          </apex:pageBlock>
  </apex:form>
</apex:page>

Note: I could not use the actionstatus function, as it is showing Sending... progress outside the button, but not inside it.
Amit Chaudhary 8Amit Chaudhary 8

You Can use loading image in this case. You can add actionstatus in action function to show loading image.
 
<apex:page >
<apex:form >
    <apex:pageBlock id="PB1">
        <apex:pageBlockSection >
            <apex:commandButton status="waitStatus" value="Load Image" reRender="PB1"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
<apex:actionStatus id="waitStatus" style="align:center;">      
            <apex:facet name="start">
                 <apex:image value="/img/loading.gif" title="Processing..."/>
             </apex:facet>
            <apex:facet name="stop"></apex:facet>
</apex:actionStatus>
</apex:form>
</apex:page>

http://amitsalesforce.blogspot.in/2015/02/progress-barloading-image-on_11.html

 
LinkYogiLinkYogi

Thanks@Amit- The functionality as per your code is working. But, I wanted to show Sending... in the button for progress, not outside it. Please reply for the same. Please check my code just above (2nd one). If we keep alert on "this.value", it shows undefined. I wanted to change "Email Dossier" to "Sending..." when we click the button. 
Note: I wanted to show button as a link & I could not use commandbutton.

Mohit Bansal6Mohit Bansal6
Hi LinkYogi

You can use apex:commandLink and set styleClass = "btn", using this it will represent link as button.

Secondly for displaying dynamic text on button click,kindly refer below code:
 
<apex:page >
<apex:form >
    <apex:pageBlock id="PB1">
        <apex:pageBlockSection >
            <apex:commandLink status="waitStatus" styleClass="btn"  value="Email Dossler" reRender="PB1"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
<apex:actionStatus id="waitStatus" style="align:center;">      
            <apex:facet name="start">
                 <apex:outputText  value="Sending..."/>
             </apex:facet>
            <apex:facet name="stop"><apex:outputText  value="Email Dossler"/></apex:facet>
</apex:actionStatus>
</apex:form>
</apex:page>
Regards
Mohit Bansal

In case, you face any issue, drop me message on forum or Skype me @mohit_bansal17, if you need any help.

Please mark this as solution by selecting it as best answer if this solves your problem, So that if anyone has this issue this post can help.
Mohit Bansal6Mohit Bansal6
Hi LinkYogi

You can use apex:commandLink and set styleClass = "btn", using this it will represent link as button.

Secondly for displaying dynamic text on button click,kindly refer below code:
 
<apex:page >
<apex:form >
    <apex:pageBlock id="PB1">
        <apex:pageBlockSection >
            <apex:commandLink status="waitStatus" styleClass="btn"  value="Email Dossler" reRender="PB1"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
<apex:actionStatus id="waitStatus" style="align:center;">      
            <apex:facet name="start">
                 <apex:outputText  value="Sending..."/>
             </apex:facet>
            <apex:facet name="stop"><apex:outputText  value="Email Dossler"/></apex:facet>
</apex:actionStatus>
</apex:form>
</apex:page>
Regards
Mohit Bansal

In case, you face any issue, drop me message on forum or Skype me @mohit_bansal17, if you need any help.

Please mark this as solution by selecting it as best answer if this solves your problem, So that if anyone has this issue this post can help.
Mohit Bansal6Mohit Bansal6
Hi LinkYogi

Kindly share, my solution, helped you to resolve your issue or you still need any assistance.

Regards
Mohit Bansal
LinkYogiLinkYogi
@All, I have found a solution of my problem.

Please look at the below code:
VF Page:

<apex:page controller="SummaryPdfDispController"  standardStylesheets="false" showHeader="false" sidebar="false"  >
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
<script>
function send() { $("#j_id0\\:status\\:status1\\:email_1").html("Sending..."); }
</script>
 
  <apex:form Id="status">
      <apex:actionFunction action="{!SendEmail}" name="send1" reRender="status1"/>
         <apex:pageBlock Id="status1">
             <apex:commandLink action="{!SendEmail}" value="Email Dossier" onclick="send()" id="email_1" reRender="status1" />
         </apex:pageBlock>
  </apex:form>
</apex:page>

Note:
1. Function send() is tedious one. We have to go to console & paste the id as shown above. You could also use this example as the solution to show the progress.
2. We have to use jquery. The function is $(selector).html (to point out the inner html of the commandlink function).
 
LinkYogiLinkYogi
Thanks to all for replying of my issue.