+ Start a Discussion
Thomas_MillerThomas_Miller 

Command Button - Ability to Use JS confirm pop-up User Response & reRender Attribute Simaltaneously

In reference to my own roadblock, and this post:  https://developer.salesforce.com/forums/?id=906F000000099TBIAY

Unless I'm missing something, it seems as though it is not possible to utilize both a user response "confirm" call (JS) and a reRender attribute on a command button. Here is the page and controller to test what I am pointing out; perhaps I'm making an error or there is another way.

Page
<apex:page controller="JSForwardToActionCon">
    <apex:form >

    <script>
    
        var x;
    
        function AreYouSure() { 
            x = confirm("Are you sure?");
            console.log('x: ' + x);
            return x;
        }
    </script>


  <!-- Begin Default Content REMOVE THIS -->
  <h1>Congratulations</h1>
  This is your new Page: JSforwardToAction
  <!-- End Default Content REMOVE THIS -->
  
    <br/><br/>
    <apex:outputLabel id="label" value="{!TheString}" />
    <br/><br/>
    <apex:commandButton action="{!AssignTheString}" value="Test" onClick="return AreYouSure();" >
        </apex:commandButton>
    
    </apex:form>
</apex:page>
Controller
public class JSForwardToActionCon {

    public String TheString;
    public String getTheString() {
        if (TheString == null) {
            TheString = 'test';
        }
        return TheString;
    }
    
    public Boolean UserResponse {get; set;}
    public void AssignTheString() {
        system.debug('UserResponse: ' + UserResponse);
    
        if (TheString == 'Assigned')
            TheString = 'test';    
        else if (TheString == 'test')
            TheString = 'Assigned';
    }

}

Now, modify the page and add a reRender="label" attribute to the command button. The user response no longer applies to the action method call in the controller. I believe this is due to the translation that occurs when VF is translated to HTML/AJAX calls when the reRender is used (uses JS to do this) and is a platform issue. I can confirm this is happening by viewing the source of both versions and locating the syntax error that occurs in the command button's onClick attribute of the HTML.

My question is - is there another way to accomplish this same task, or is this something that needs to go in Ideas and be implemented/fixed?

 
Best Answer chosen by Thomas_Miller
Shweta_AgarwalShweta_Agarwal
Hi Thomas

You can replace commandButton with html button tag and can use action function to call controller method and rendering 
 
<button type="button" onClick="AreYouSure();" style="cursor:pointer">Test2</button>
<apex:actionFunction name="callContoller" action="{!AssignTheString}" reRender="label"/>
 
<script>
    
        var x;
    
        function AreYouSure() { 
            x = confirm("Are you sure?");
            console.log('x: ' + x);
            if(x == true){
                callContoller();
            }
        }
    </script>

Hope it will help...

Thanks
Shweta

All Answers

Shweta_AgarwalShweta_Agarwal
Hi Thomas

You can replace commandButton with html button tag and can use action function to call controller method and rendering 
 
<button type="button" onClick="AreYouSure();" style="cursor:pointer">Test2</button>
<apex:actionFunction name="callContoller" action="{!AssignTheString}" reRender="label"/>
 
<script>
    
        var x;
    
        function AreYouSure() { 
            x = confirm("Are you sure?");
            console.log('x: ' + x);
            if(x == true){
                callContoller();
            }
        }
    </script>

Hope it will help...

Thanks
Shweta
This was selected as the best answer
Thomas_MillerThomas_Miller
This is exactly the solution that is needed - thank you!