Apex action function method is not getting called, only the page is getting refreshed/rendered

Question

Here in the below code when i click commandbutton(test() function) js function is getting called and after that page is getting refreshed and it is not calling the action function method. {!redirectSSO} method is not even getting called. Below is the vf page code:

<script>
 function test(){
            var ste = new URL(top.frames["ifrm"].location.href).searchParams.get('state');
            console.log('st value--> '+ste); //printing
            console.log('hello'); //printing
            callContollerMethod();  // After this page is refreshed, action function method is not called
            }
 </script>



<apex:outputPanel id="tstpopup566"  rendered="{!showIframe}" >
    <apex:iframe id="ifrm"  src="{!embedUrl}" scrolling="false" width="50%" height="40px"  />
</apex:outputPanel>


 <apex:commandButton rerender="none" onclick="test()" value="{!$Label.PP_SaveContinue}" 
                                    id="saveButton" />
<apex:actionFunction  name="callContollerMethod" action="{!redirectSSO}"  >
</apex:actionFunction>

Apex:

 public PageReference redirectSSO() {
    PageReference pr = new PageReference('https://www.google.com');
    return pr;
 } 

Answer 1

It looks like the page is refreshing before the callContollerMethod action function is called. This can happen if the form is being submitted when the button is clicked. To prevent this, you can use event.preventDefault() in your JavaScript function to stop the default form submission behavior.

<script>
        function test(event) {
                event.preventDefault();
                var ste = new URL(top.frames["ifrm"].location.href).searchParams.get('state');
                console.log('st value--> ' + ste); //printing
                console.log('hello'); //printing
                callContollerMethod();  // After this page is refreshed, action function method is not called
        }
</script>

<apex:outputPanel id="tstpopup566" rendered="{!showIframe}">
        <apex:iframe id="ifrm" src="{!embedUrl}" scrolling="false" width="50%" height="40px" />
</apex:outputPanel>

<apex:commandButton rerender="none" onclick="test(event)" value="{!$Label.PP_SaveContinue}" id="saveButton" />
<apex:actionFunction name="callContollerMethod" action="{!redirectSSO}" />

Update:

• Make sure that your apex:actionFunction and apex:commandButton are inside the same apex:form. The pex:iframe should not disrupt the form structure.
• Wrap the apex:commandButton and apex:actionFunction in an apex:actionRegion to isolate them from other components on the page.

<apex:page>
        <apex:form>
                <apex:outputPanel id="tstpopup566" rendered="{!showIframe}">
                        <apex:iframe id="ifrm" src="{!embedUrl}" scrolling="false" width="50%" height="40px" />
                </apex:outputPanel>

                <apex:actionRegion>
                        <apex:commandButton rerender="none" onclick="test(event)" value="{!$Label.PP_SaveContinue}" id="saveButton" />
                        <apex:actionFunction name="callContollerMethod" action="{!redirectSSO}" />
                </apex:actionRegion>
        </apex:form>

        <script>
                function test(event) {
                        event.preventDefault();
                        var ste = new URL(top.frames["ifrm"].location.href).searchParams.get('state');
                        console.log('st value--> ' + ste); //printing
                        console.log('hello'); //printing
                        callContollerMethod();  // After this page is refreshed, action function method is not called
                }
        </script>
</apex:page>