Set field focus after validation in dialog (Extension Library Dialog)

Question

I have the following dialog, the password field focus is set when the dialog has focus but this only works when first loaded, I want to set the password field focus when the passwords don't match (i.e. after clicking the OK button and running the SSJS).

    <xe:dialog id="dialogConfirmPassword" title="Confirm Your Password">
    <xe:dialogContent id="dialogConfirmPasswordContent">
        <xp:messages id="messagesConfirmPassword" layout="table" />

        <xp:table style="width:100%" id="tableConfirmPassword">
            <xp:tr>
                <xp:td>
                    <xp:label value="Password" id="lblPassword"
                        for="confirmPassword" />
                </xp:td>
                <xp:td>
                    <xp:inputText id="confirmPassword"
                        password="true">
                                        </xp:inputText>
                </xp:td>
            </xp:tr>
        </xp:table>
    </xe:dialogContent>

    <xe:dialogButtonBar id="dialogButtonBarConfirmPassword">
        <xp:button value="OK" id="btnConfirmPasswordOk">
            <xp:eventHandler event="onclick" submit="true"
                refreshMode="complete">
                <xp:this.action>
                    <xp:actionGroup>
                        <xp:executeScript>
                            <xp:this.script><![CDATA[#{javascript:try{

            var confirmPassword:String = getComponent("confirmPassword").getValueAsString();

            if (session.verifyPassword(confirmPassword, HTTPPassword)){ 

                /* RUNS NOTES AGENT */

                getComponent('dialogConfirmPassword').hide();

                return true;

            } else {

                facesContext.addMessage("messagesConfirmPassword", new javax.faces.application.FacesMessage("You have entered an incorrect password, please try again.") );

                /*  WANT TO SET FOCUS FOR PASSWORD FIELD */

                return false;

            }
        } catch (e) {
            facesContext.addMessage("messagesConfirmPassword", new javax.faces.application.FacesMessage("ERROR! " + e.toString()) )
            return false;
        }}]]></xp:this.script>
                        </xp:executeScript>
                    </xp:actionGroup>
                </xp:this.action>
            </xp:eventHandler>
        </xp:button>

    </xe:dialogButtonBar>

    <xp:eventHandler event="onFocus" submit="false">
        <xe:this.script><![CDATA[dijit.byId("dialogConfirmPassword").focus();]]></xe:this.script>
    </xp:eventHandler>

</xe:dialog>

Can I set the password field focus after setting the facesContext.addMessage or another way?

Update: The following output script worked:

        <xp:scriptBlock id="scriptBlockConfirmPassword">
        <xp:this.value><![CDATA[#{javascript:   if(viewScope.PWDSuccess === null) {
    return "";
};

var result = "dojo.byId(\"";    
result += getComponent("confirmPassword").getClientId(facesContext);
result += "\").focus();";   

return result;}]]></xp:this.value>
    </xp:scriptBlock>

Answer 1

A few pointers:

• Don't go after components like getComponent("confirmPassword") but bind your component to a scope variable, makes better code
• You can't directly run a Client JavaScript action in your SSJS (where you indicated)
• Your event handler never works since the XPages ID is different from the clientside ID
• A outputscript probably can solve your challenge

So modify your code (only essentials here):

<xp:inputText id="confirmPassword" password="true" value="#{viewScope.confirmPWD}">
</xp:inputText>

<xp:button value="OK" id="btnConfirmPasswordOk">
    <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
        <xp:this.action>
            <xp:actionGroup>
                <xp:executeScript>
                    <xp:this.script><![CDATA[#{javascript:try{
                      viewScope.PWDSuccess = session.verifyPassword(viewScope.confirmPWD, HTTPPassword);
                      if (viewScope.PWDSuccess){ 
                         /* RUNS NOTES AGENT */ 
                         getComponent('dialogConfirmPassword').hide();
                     } else {
                       facesContext.addMessage("messagesConfirmPassword", new javax.faces.application.FacesMessage("You have entered an incorrect password, please try again.") );
                     }

              } catch (e) {
        facesContext.addMessage("messagesConfirmPassword", new javax.faces.application.FacesMessage("ERROR! " + e.toString()) );
        viewScope.PWDSuccess = false;
            }
        return viewScope.PWDSuccess
     }]]></xp:this.script>
                    </xp:executeScript>
                </xp:actionGroup>
            </xp:this.action>
        </xp:eventHandler>
    </xp:button>

   <xp:outputScript>
         <this.value><!CDATA[#{javascript:if(viewScope.PWDSuccess) {return "";};
         var result = "dijit.byId(\"";
         result += getComponent("confirmPassword").getClientId();
         result += "\").focus();";
         return result;
         }]]</this.value>
   </xp:outputScript>

(Typed off my head - will contain errors). Let us know how it goes.