Reset password using jQuery/Javascript in JSF login dialog

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.

Daniel · Answer 1 · 2012-05-23T19:31:04.887

2

Add \\ before the :

Your selector should look like this '#loginForm\\:password'

INMO '#loginForm\\:password' is more efficient (fast) than "#loginForm :password" (but this is my personal thoughts)

Explanation

The presence of : (colon) causes problem to JQuery. So, we need to escape : (colon) using two \ characters before colon

edited May 23 '12 at 19:31

answered May 23 '12 at 19:15

Daniel

36,833
10
119
200

That's an interesting issue. Where can I read about `\\\` in JQuery selector? – VisioN May 23 '12 at 19:25
Well... jQuery don't like the : (colon) that JSF uses between the ids... edited my answer – Daniel May 23 '12 at 19:34

score 0 · Accepted Answer · answered May 23 '12 at 19:09

0

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.

answered May 23 '12 at 19:09

VisioN

143,310
32
282
281

Thanks, it works. Is this a jQuery feature? I have been working on Dojo, but have never seen such a thing as a space in the selector. – perissf May 23 '12 at 19:14
@perissf Well, it works in the same way as JQuery [`find`](http://api.jquery.com/find/) method. BTW, make sure to remove `!` before `args.validationFailed` in your `if` statement. Otherwise, it won't work ever :) – VisioN May 23 '12 at 19:17
@perissf I can't answer for sure is that **only** JQuery feature, since I haven't ever worked with Dojo. But I can definitely state that JQuery works in this way. – VisioN May 23 '12 at 19:22
1

The coincidence and confusion is here that `:password` in jQuery selects all `` elements and that perissf has given it an `id="password"`. But to select the real element by ids ID, the ID has to be escaped. See also Daniel's answer and http://stackoverflow.com/questions/7927716/how-to-select-primefaces-ui-or-jsf-components-using-jquery – BalusC May 23 '12 at 21:38
@BalusC It is really coincidence :) I have already found the problem with colon, however I haven't faced it by myself. The only thing, I doubt that `html` method works for `input` fields in JSF :) At least from this side my answer should be helpful. – VisioN May 23 '12 at 21:51

Reset password using jQuery/Javascript in JSF login dialog

2 Answers2