1

I have a custom login page the makes use of the SiteLoginController. When the user inputs their username and password, I need a popup window to appear that they would need to acknowledge before it logs them in. So far, I've tried using some javascript in the command button, but I haven't had any luck.

VF Page:

     <script>
 function showSimpleDialog(){    
   var sd = new SimpleDialog("Test"+Dialogs.getNextId(), false);    
   sd.setTitle("Test Pop up");   
   sd.createDialog();   
   window.parent.sd = sd;   
   sd.setContentInnerHTML("<p align='center'><img src='/img/msg_icons/warning32.png' style='margin:0 5px;'/></p><p align='center'>This is awesome!</p><p align='center'><br /><button class='btn' onclick='window.parent.sd.hide(); return false;'>cancel</button></p>");    
   sd.show();   
 }  
 showSimpleDialog(); //open the popup  
</script>
        <apex:form styleClass="form-login" id="loginForm" forceSSL="true">  
         <apex:actionFunction name="javascriptLogin" action="{!login}" />
         <apex:pageMessages id="error" />

                    <apex:outputLabel styleClass="label"
                        value="{!$Label.site.username}" for="username" />
                    <apex:inputText styleClass="form-control" id="username"
                        value="{!username}" html-placeholder="username"/>
                    <apex:outputLabel styleClass="label"
                        value="{!$Label.site.password}" for="password" />
                    <apex:inputSecret styleClass="form-control" id="password" html-placeholder="password"
                        value="{!password}" onkeypress="return noenter(event);" />      
                    <p>
                        <apex:commandButton value="Login" styleClass="btn btn-sm btn-primary btn-block forgot-password btn-width btn-shade"
                            action="{!login}" id="submitbutton" onclick="showSimpleDialog()"/>
                    </p>

                      </apex:form>

Any ideas on how to solve for this?

Thanks!

1
  • @AviDev9 is probably best to assist as he's the one who wrote the blog article where you obtained this code. Word to the wise, using Salesforce's own libraries to do this is against best practice and you should probably implement it with YUI2 Dialog or jQueryUI Dialog, etc. – Mark Pond Feb 24 '15 at 0:28
2

The commandButton by default will execute both the onClick event as well as the apex action. You will need to replace the commandButton with a normal HTML input button, then from within your JavaScript popup you need to call an apexFunction that will call the actual apex method. So your code should look something like this:

<apex:page>
    <apex:form>
        <script>
            function showDialog()
            {
                // show the dialog with with another button to proceed
                // which will have onclick event to call the function below
            }

            function dialogButtonClicked()
            {
                // do something more JS if needed and then call the apex login method
                controllerLogin();
            }
        </script>
        <apex:actionFunction name="controllerLogin" action="{!login}" />

        <!-- your login form here -->
        <input type="button" value="Login" onclick="showDialog();" />
    </apex:form>
</apex:page>

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.