0

Sorry if this has already been answered but I can't find any answers or examples that work exactly as I need them to.

I have a JSF (2.0) page where the user is given a code (like a captcha) and has to enter that exact code in an inputText field. I would like to disable (or, even better, to hide) that inputText field as soon as the user has entered the code correctly (and the focus is still on the inputText field).

This works:

<h:inputText id="code" value="#{myBean.code}">
    <f:ajax event="keyup" render="code" />
</h:inputText>

but on every keyup the inputText field loses focus, so that solution is not acceptable. I've also tried setting readonly="true" (using a backing bean boolean) but it is not setting the inputText's readonly attribute to true even though it is setting the corresponding backing bean's corresponding boolean value to true:

<h:inputText id="code" value="#{myBean.code}" readonly="#{myBean.hasCodeBeenMatched}">
    <f:ajax event="keyup" />
</h:inputText>

Any help is greatly appreciated!

UIUXresearcher
  • 1
  • Do you want to ask the server-side after every keypress, if the current code is correct (rises the server load and is annoying for user with slow bandwith), or do you want to do it client-side (sending the correct captcha to the browser is counter intuitive on what you want to achive with a captcha). `f:ajax` does ask the server with every keypress... and as the field is freshly rendered, the focus is lost. – L-Ray Dec 28 '14 at 21:35
  • Yes, I'm willing to take the bandwidth hit of server-side validation after every keypress. – UIUXresearcher Dec 29 '14 at 23:55

1 Answers1

0

If you are fine with client-server-communication after every keypress - Why not take an alternate approach:

  1. add an additional panel id="removingElement" holding javascript to hide the code-input on client side

    • a way to retrieve the unique ID of the code-inputText is described here

  2. give this panel a rendered='#{myBean.hasCodeBeenMatched}'

  3. rerender this element in your f:ajax call

    <f:ajax event="keyup" execute="@this" render="removingElement" />

So, what happens: with every keystroke, the server checks the correctness, but rerenders the panel holding javascript (you should not loose the focus). As soon as the code is correct, the panel gets actually rendered and the javascript in there executed - hiding the input-text.

I am sorry to not provide any working code, as I have no working JSF2-environment by the hand. Anyhow, if you get it working, please let me know. Hope it helps...

Community
  • 1
  • 1
L-Ray
  • 1,637
  • 1
  • 16
  • 29
  • Thanks, L-Ray. I was hoping to achieve the effect without JS, but I'll give this a try when I get a moment. – UIUXresearcher Dec 29 '14 at 23:56
  • Yeah, the issue is that with "render" you trigger a rewrite of the element - loosing the focus. Even when resetting the focus, you would have to take care you get the same position again within the captcha... hope it works. – L-Ray Dec 31 '14 at 18:01