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

问题

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.

回答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.

回答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
}

回答3:

A derivation of the @user2393398 tip.

Do not update the p:captcha, use the p:ajaxStatus to reload it.

<h:form style="width: 400px;" >
    <h:outputText value="Informe seu CPF/CNPJ ou E-mail abaixo, e um e-mail de recuperação será enviado para seu endereço." />
    <br /><br />
    <p:messages id="messageGlobal" globalOnly="true" />
    <h:panelGrid columns="3" cellspacing="5" >
        <h:outputLabel for="inputUsuarioRecuperacao" value="CPF/CNPJ ou E-mail: " style="float: right;"/>    
        <p:inputText id="inputUsuarioRecuperacao" value="#{loginController.usuario}" required="true" size="30" />
        <p:message id="messageUsuarioRecuperacao" for="inputUsuarioRecuperacao" display="icon" />
        <p:spacer />
        <p:captcha id="inputCaptcha" theme="white" secure="true" validatorMessage="Os caracteres inseridos não correspondem à verificação de palavras. Tente novamente." />
        <p:message id="messageCaptcha" for="inputCaptcha" display="icon" />
        <p:spacer />
        <p:commandButton value="Enviar" actionListener="#{loginController.enviarEmailRecuperarSenha()}" update="messageGlobal messageCaptcha messageUsuarioRecuperacao" />
    </h:panelGrid>
    <p:ajaxStatus onsuccess="Recaptcha.reload();" />
</h:form>