p:commandButton only works with two clicks (JSF 2.2 Bug?)

Question

i'm trying to update (merge) a field from a ListDataModel and I'm experiencing what I think is a bug in Jsf (Mojara) 2.2. The update only works if the PrimeFaces command button is clicked twice. I've read a number of posts on here and tried the solutions but nothing seems to be working:

h:commandButton/h:commandLink does not work on first click, works only on second click

commandButton only works on the second click

p:commandButton with p:fileDownload and no ajax only works in second click

The list comes from

            <h:form>
                <p:dataTable value="#{proDocFolBean.selectedProDocs}" var="docs">


                    <p:column headerText="Document Name:">
                        <h:outputText value="#{docs.docName}"/>
                    </p:column>

                    <p:column headerText="Description">
                        <h:outputText value="#{docs.description}"/>
                    </p:column>



                    <p:column headerText="Date Created">
                        <h:outputText value="#{docs.dateCreated}">
                            <f:convertDateTime pattern="dd-MMM-yyyy" />
                        </h:outputText>
                    </p:column>

                    <p:column headerText="Classification">
                        <h:outputText value="#{docs.classification}"/>
                    </p:column>

                    <p:column>
***                        <p:commandLink value="Update" action="#{proDocFolBean.prepareUpdateDoc}"/> ***

                    </p:column>


                    <p:column>

                        <p:commandLink id="downLoadLink" value="Download" ajax="false">
                            <p:fileDownload value="#{proDocFolBean.downloadFromFolders}" 
                                            contentDisposition="attachment"/>
                        </p:commandLink>
....
                </h:form>

Clicking the Update link in the above form calls a preparedUpdate method in the bean:

public String prepareUpdateDoc() {
    docToUpdate = selectedProDocs.getRowData();
    selectedId = docToUpdate.getProjectDocId();
    docsFacade.find(selectedId);

        return "UpdateProDoc";
}

The above method populates the update form:

<h:outputScript name="js/formbugfix.js" target="head" /> 
                <p:inputTextarea rows="30" cols="60" value="#{proDocFolBean.docToUpdate.description}" immediate="true"/>
                        <p>
                    <p:commandButton value="Change" action="#{proDocFolBean.updateProjectDoc}">
                        <!-- <f:ajax execute="@form"/> -->
                    </p:commandButton>

I included a js script although I realize that PF has already fixed view state through embedded js. I thought possibility including a script as stated in this question.

might solve the problem but it results in the same behavior.

Finally, the form calls the following merge method in the bean:

public String updateProjectDoc() {
    docsFacade.update(docToUpdate);
    return "ProSysHome";
}

If I try to use an h:commandbutton or set ajax to false using the p:commandButton (without the js script), the form is simply refreshed and the updated value is not merged into the database. If i use the p:commandButton on its own, I am able to get the operation working but only after two clicks. This is very odd behavior and would appreciate any help. Thanks in advance!

PrimeFaces already provides a view state fix. Just use p:commandButton, no need to include redundant formbugfix.js. — Vsevolod Golovanov
1. prepareUpdateDoc returns an outcome, so there is navigation involved? That makes bean scopes relevant. 2. In p:inputTextarea the immediate="true" doesn't seem necessary. — Vsevolod Golovanov
I realize that PF already provides a view state fix (as it contains embedded jQuery) however using p:commandButton alone results in the same behavior as using the script. Using h:commandButton results in the form refreshing itself and the merge failing altogether — jay tai
Thanks Vsevolod. Yes there is navigation involved and the bean scope is SessionScoped (which works fine with other merge operations in the application). I just put the immediate=true as a long shot but removing it does not alter the behavior. — jay tai
Does a POST request happen on the first click? Does the updateProjectDoc method get called on the first click? — Vsevolod Golovanov

jay tai jay tai · Accepted Answer · 2015-06-16T16:08:20

Well I think I solved this with Vsevolod's help. First it's totally unnecessary to use a separate js script because as Vsevolod says PF has its own fix.

Using p:commandButton alone I was getting a javascript error

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
VM94:25 Uncaught TypeError: Cannot read property 'debug' of undefined

It seems that this error comes from the original list form at the point I click the UPDATE link to call the prepareUpdateDoc method and populate the update form. Setting the ajax to false on this column solved the problem:

 <p:column>
 <p:commandLink value="Update" action="#    {proDocFolBean.prepareUpdateDoc}" ajax="false"/>

  </p:column>

The form now works after a single click but I would still like to know if the cause was due to two repeated ajax calls (one from the list form p:commandLink and the second from the actual update call by the p:commandButton) and why the js error disappears after setting ajax to false?

p:commandButton only works with two clicks (JSF 2.2 Bug?)

3 Answers