Primefaces Captcha disappears or doesn't update/refresh on invalid input?

Question

I have the following piece of code inside an h:form

<h:panelGrid id="captchaGrid">
    <p:captcha id="captcha" label="Captcha" required="true"
        requiredMessage="required"
        validatorMessage="...">
    </p:captcha>
    <p:message id="captchaMessage" for="captcha" />
</h:panelGrid>

<p:commandButton id="submitButton" value="save"
    actionListener="#{userBean.save}" update="captchaGrid"
    onstart="doSomething()"
    oncomplete="doSomethingElse(xhr, status, args)" icon="ui-icon-check">
</p:commandButton>

This works fine if I enter the captcha correctly. However, if I enter an invalid value, the captcha component just disappears.

I tried removing the update="captchaGrid" attribute. This time, the captcha didn't disappear. Instead, it didn't refresh visually but (I guess) internally. Because typing the two words correctly still generates a validation error.

Furthermore; I don't want to use ajax="false".

Update: I also tried oncomplete="Recaptcha.reload()". Didn't work. There is a bug. But I don't know if it's my code or Primefaces 3.0 :)

Update 2: As maple_shaft pointed out, it turns out that this is a problem with Primefaces/Recaptcha. So I'm looking for any dirty hacks you might suggest.

Any help appreciated.

Answer 1

You are not going to like my answer, but this is not a bug.

Primefaces Issue 1642 is marked as Won't Fix.

The Primefaces Captcha utilizes Recaptcha, which does not and cannot support Ajax refresh. You must do a full page postback for this component to work properly. Keep in mind this also affects the ability to use the Captcha in components that require Ajax refresh of a panel, such as a Tab View or Wizard component.

EDIT: On another note, it might be possible to use the captcha component within an <iframe> to achieve a similar effect, but that seems like a dirty hack. Sorry I couldn't be more of a help.

Answer 2

It is dirty but try using captcha on on dialog. it is working for me....

  <p:dialog widgetVar="captchaDlgWar" modal="true" closable="false" resizable="false"
              header="Prove you are human..." width="350" height="200">

        <h:form>
            <h:panelGrid columns="1">

                <p:captcha label="Captcha"
                           id="captchaId"
                           language="tr"
                           theme="white"
                           required="true"
                           requiredMessage="Please Enter Capcha Text"
                           validatorMessage="Captcha text does not match."/>
                <p:commandButton id="btnContinue"
                                 ajax="false"
                                 value="Continue"
                                 actionListener="#{MyBean.onButtonAction}"/>

            </h:panelGrid>
        </h:form>
    </p:dialog>

MyBean------->

public void onButtonAction(ActionEvent e) {
   RequestContext.getCurrentInstance().execute("captchaDlgWar.hide()");
   //Do your stuff
}