Question

I need advice on how to use jQuery / Javascript for resetting the password after a wrong login using JSF + PrimeFaces dialog.

<p:dialog header="Login" id="loginDlgId" widgetVar="loginDlg" >
    <h:form id="loginForm">
        <h:panelGrid columns="2">
            <h:outputLabel for="username" value="Username:" />
            <p:inputText value="#{loginBean.username}" id="username" required="true" label="username" />
            <h:outputLabel for="password" value="Password:" />
            <h:inputSecret value="#{loginBean.password}" id="password" required="true" label="password" />
            <p:commandButton value="Login" id="loginDlgButton" update=":loginButtonForm" 
                                action="#{loginBean.login}" 
                                oncomplete="handleLoginRequest(xhr, status, args)"/>
        </h:panelGrid>
    </h:form>
</p:dialog>
<script type="text/javascript">
    function handleLoginRequest(xhr, status, args) {
        if(args.validationFailed || !args.loggedIn) {
            jQuery('#loginDlgId').effect("shake", { times:3 }, 100);
            if (!args.validationFailed) {
                $('#loginForm:password').html('');  // this doesn't have any effect
                jQuery('#loginForm:password').text('');   // this doesnt' have any effect, too
            }
        }
    }
</script>    

As you can see, in the Javascript function handleLoginRequest I have made 2 efforts to reset the password text, but with no result (and appearently no error either). Additionally, any link / reference to give some light in using jQuery in this situation, would be welcome.

Answer 1

Put a space between #loginForm and :password in the selector, and use val method to reset password value:

$("#loginForm :password").val("");

Space in the selector actually makes search for :password element in #loginForm.