function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
cmoynihancmoynihan 

Call commandlink action from Javascript

I want to be able to call an Apex commandlink action from Javascript. Can I do that?

 

Here is what I have:

 

<apex:commandlink action="{!register}" styleClass="button" id="regSubmit">Register</apex:commandlink>

 And I would like to be able to do something like this in JS:

/* Link in page */
<a href="#" class="button" id="regSubmit">Register</a> </div>


/* JS code */
$("#regSubmit").click(function() {
   var validated = myValidator.data("validator").checkValidity();
   if (validated) {
      /* Do the commandlink action here */
   }
});

 Anyone have any ideas? Thanks.

Best Answer chosen by Admin (Salesforce Developers) 
cmoynihancmoynihan

My solution was actually stupidly simple.

 

After talking with SF Support, they realized that the render="false" caused the actionFunction to not get rendered into HTML, so there was no JS function. Setting it to true fixed the problem.

 

Newbie mistake. Thanks everyone for your help.

All Answers

Shashikant SharmaShashikant Sharma

No you can not do it like this calling a command link action from JS, istead what you can do is create actionFunction with immediate="false" and use same action in that.

vhanson222vhanson222

Here is what i have done in the past when i would like to perform a validation:

 

<script>
    function validateRegistration() {
        var validated = myValidator.data("validator").checkValidity();
        if (validated) {
            submitRegistration();
        }
    }
</script>

<apex:actionFunction name="submitRegistration" action="{!submitRegistration}" />

<apex:commandlink onClick="validateRegistration" styleClass="button" id="regSubmit">Register</apex:commandlink>

 the commandlink executes some javascript that validates the page.  Assuming the page passes validation, it calls the 'submitRegistration' function.

cmoynihancmoynihan

Thanks for the ideas.

 

I now have this code:

 

<apex:form >
    <apex:actionFunction name="submitRegistration" action="{!register}" rendered="false" immediate="false" focus="sfRegister" />
</apex:form>


<a href="#" class="button" id="regSubmit">Register</a>


<script>
        function doSubmit(){
            rslt = submitRegistration();
            return rslt;
        }
        
        var regApexForm = "{!$Component.sfRegister}";
        var regForm = esc(regApexForm);

        // Trigger the registration validation, and if valid, submit
        $("#regSubmit").click(function() {
            $(regForm).validator();
            $(regForm).validator().attr("novalidate","novalidate");
            var validated = $(regForm).validator().data("validator").checkValidity();
            if (validated) {
                var result = doSubmit();
                $(regForm).submit();
            }
        });
</script>

 It tells me that submitRegistration is not defined. I also tried calling submitRegistration in place of doSubmit, just to see if that would make any difference but it didn't.

vhanson222vhanson222

I believe you should wrap all that code inside the form with the actionFunction...

 

<apex:form >
    <apex:actionFunction name="submitRegistration" action="{!register}" rendered="false" immediate="false" focus="sfRegister" />



<a href="#" class="button" id="regSubmit">Register</a>


<script>
        function doSubmit(){
            rslt = submitRegistration();
            return rslt;
        }
        
        var regApexForm = "{!$Component.sfRegister}";
        var regForm = esc(regApexForm);

        // Trigger the registration validation, and if valid, submit
        $("#regSubmit").click(function() {
            $(regForm).validator();
            $(regForm).validator().attr("novalidate","novalidate");
            var validated = $(regForm).validator().data("validator").checkValidity();
            if (validated) {
                var result = doSubmit();
                $(regForm).submit();
            }
        });
</script>
</apex:form>

 

cmoynihancmoynihan

Even if my doSubmit() is inside the actionFunction form, it says that submitRegistration is undefined.

 

Maybe something is wrong with my definition?

Shashikant SharmaShashikant Sharma

Hi vhanson, Use this will surely work, Sorry I missd to see your code in last reply. Also replace rerender="anysectionID" this with any appropriate id.

 

<script>
    function validateRegistration() {
        var validated = myValidator.data("validator").checkValidity();
        if (validated) {
            submitRegistration();
        }
        return false;
    }
</script>

<apex:actionFunction name="submitRegistration" immediate="false" action="{!submitRegistration}" rerender="anysectionID"/>

<apex:commandlink onClick="retrun validateRegistration();" styleClass="button" id="regSubmit">Register</apex:commandlink>

 

cmoynihancmoynihan

Where does the actionFunction need to go? In the same apexForm as the actual form data? Its own apexForm?

 

And where does the script that actually calls the actionFunction need to be? Anywhere on the page? In a specific place?

 

The SF documentation on actionFunction leaves a lot to be desired. I ahve tried a ton of variations, but I still get the error that the function is undefined.

 

And, Shashikant, as far as your suggestion goes, I appreciate the help but I want to call my "validateRegistration" function from an anchor tag, not an Apex commandLink. I want to bypass that link altogether, which is the reason for the actionFunction in the first place.

cmoynihancmoynihan

My solution was actually stupidly simple.

 

After talking with SF Support, they realized that the render="false" caused the actionFunction to not get rendered into HTML, so there was no JS function. Setting it to true fixed the problem.

 

Newbie mistake. Thanks everyone for your help.

This was selected as the best answer