CODEWITHSUNDEEP
javascriptjsfprimefaces
Alessandro
Alessandro

Reputation: 4472

Primeface's ajax event blur prevents form submit

I have a JSF page with some Primefaces components, including an input text and a submit button. In the <p:inputText> there's the <p:ajax event="blur" update="@this" />.

When I left the caret (text cursor) outside the input text, the submit works fine, otherwise, if I left the caret inside the input text, the submit doesn't occur, but clicking again on that button the form submits fine.

Debugging the ajax call with Chrome I can see what is sending:

XHR

I think that's just the blur event and that the submit doesn't occur. Any help? Thanks

Upvotes: 1

Views: 3565

Answers (2)

gogognome
gogognome

Reputation: 759

Another solution using Javascript to fix it for all buttons can be found in this StackOverflow question. That also works for other JSF implementations, like ICEFaces.

Upvotes: 0

Jasper de Vries
Jasper de Vries

Reputation: 20253

I tried to reproduce this with PrimeFaces 10 and Chrome 89, but was unable to. So it could be that upgrading your PrimeFaces version (if you are not on 10 already) might help. If that does not help for you, it might be worth reporting the issue at the PrimeFaces GitHub repo. If you do so, please create a reproducer and include version numbers.

You could try to workaround the issue by:

  • Using async="true", so that your Ajax requests are not queued. You can try this on both p:ajax and p:commandButton.
  • Setting a slight delay on your p:ajax, for example delay="50" (value is in milliseconds).

For what it's worth, this is working for me:

<h:form id="frmTest">
    <h:panelGroup id="header">
        <h1>#{testView.string}</h1>
    </h:panelGroup>

    <p:inputText value="#{testView.string}"
                 maxlength="#{testView.string.length()}">
        <p:ajax event="blur"
                update="@this" />
    </p:inputText>

    <p:commandButton value="Submit"
                     update="header"/>
</h:form>

Changing the input, leaving the focus in the input and clicking the submit button results in two request. The first updates the input, the second updates the header.

Upvotes: 1

Related Questions