2

I have to call an apex function only when javascript validation passes. Hence,initially I tried the below code:

<apex:commandButton value="Submit" onclick="return addDomain();" action="{!submitRecord}" rendered="{!engCollabCon.id==null}" styleClass="green-btn btn submit" reRender="collabPanel,pageMessage" status="LoadingStatusSpinner">
    <apex:param value="submit" name="submit" assignTo="{!action}" />
</apex:commandButton>

JS:

function addDomain(){
    var regExpr = new RegExp('^[a-zA-Z0-9.-]+$');
     if(!($( "input[id$='domaininputfield']" ).val() == null || $( "input[id$='domaininputfield']" ).val() == '' ))   {
          var input = $("input[id$='domaininputfield']").val();
          if(!regExpr.test(input)){
               alert('The Domain name only allows alphanumeric and "."');
               $("input[id$='domaininputfield']").val('');
               return false;
          }
          else{

              return true;
          }
      }
      else{
          alert('Please enter a domain name');
          return false;
      }
}

This did not call the apex. Hence I tried to use action function instead :

<apex:commandButton value="Submit" onclick="addDomain();"  rendered="{!engCollabCon.id==null}" styleClass="green-btn btn submit" reRender="collabPanel,pageMessage" status="LoadingStatusSpinner"/>
<apex:actionFunction name="backendAction" action="{!submitRecord}" reRender="collabPanel,pageMessage" status="LoadingStatusSpinner">
      <apex:param value="submit" name="submit" assignTo="{!action}" />
</apex:actionFunction>

JS:

function addDomain(){
            var regExpr = new RegExp('^[a-zA-Z0-9.-]+$');
            if(!($( "input[id$='domaininputfield']" ).val() == null || $( "input[id$='domaininputfield']" ).val() == '' ))   {
                var input = $("input[id$='domaininputfield']").val();
                if(!regExpr.test(input)){
                    alert('The Domain name only allows alphanumeric and "."');
                    $("input[id$='domaininputfield']").val('');

                }
                else{

                backendAction();


                }
            }
            else{
                alert('Please enter a domain name');

            }
        }

This is making the apex call after unsuccessful JS validation as well.

  • Is your regular expression check failing? – Reshma Feb 2 '17 at 4:43
  • no. It is passing . Infact i just found out that it (whole code)works if i keep return in the onclick part. However that works if the rerender is kept on button rather than action function. strange.. – starhunter Feb 2 '17 at 4:46
3

If you want to abort the action, return a value. If you do not want to abort the action, do not return a value.

Example:

<apex:commandButton value="Do Something" 
                    onclick="if(!confirm('Are you sure?')) return false;" />

Replace "confirm" with your custom logic, this was a simple copy-paste example to get you started.


To modify your example:

<apex:commandButton value="Submit" onclick="if(!addDomain()) return false;"
                    action="{!submitRecord}" rendered="{!engCollabCon.id==null}" 
                    styleClass="green-btn btn submit" reRender="collabPanel,pageMessage" 
                    status="LoadingStatusSpinner">
    <apex:param value="submit" name="submit" assignTo="{!action}" />
</apex:commandButton>
  • Got it! But just to extend the concept why is it that(without keeping return false condition) when the JS flow encounters the method backendAction(), action function is not called. Should the system not just jump into the action function and let apex action be called, irrespective of whether onclick contains return condition or not – starhunter Feb 2 '17 at 10:49
  • @starhunter If you don't return a value, then the commandButton gets submitted as one action, and the actionFunction as a second action; if you return false, then only one action occurs. If more than one action is submitted, the view state then becomes a race condition; whichever one finishes last will take precedence with regards to the final view state. You should always avoid calling multiple action methods simultaneously. – sfdcfox Feb 2 '17 at 14:09
1

You were right while choosing your second approach. You should have a button calling JavaScript validation function and finally JavaScript calls actionfunction if validations are successful. Below corrections would be needed in your button code:

  <apex:commandButton value="Submit" onclick="addDomain();"  rendered="{!engCollabCon.id==null}" styleClass="green-btn btn submit" OnComplete="return null;"/>

Here are explanations:

  • As your actionFunction is doing final submission now, rerender and status attribute of button should be moved to actionfunction and they should not be present on button.
  • You can notice there is a new attribute named onComplete specified to return null on command button. Command buttons are translated to input type of submit which have behavior of refreshing page on completion of action.Specifying this attribute will avoid reload of page on button click.

I hope that helps.

  • 2
    onclick="addDomain(); return false" would be just as effective. – sfdcfox Feb 2 '17 at 6:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.