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, Jun 16 '15 at 15:06
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, Jun 16 '15 at 15:13
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, Jun 16 '15 at 15:16
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, Jun 16 '15 at 15:19
Does a POST request happen on the first click? Does the `updateProjectDoc` method get called on the first click? — Vsevolod Golovanov, Jun 16 '15 at 15:24
No. The Post happens only on the second click and the values are passed into the DB only after the second click — jay tai, Jun 16 '15 at 15:27
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/80687/discussion-between-jay-tai-and-vsevolod-golovanov). — jay tai, Jun 16 '15 at 15:29
Can you reproduce this "bug" with a simpler example? e.g. One commandButton inside one form? — DavidS, Jun 16 '15 at 15:55
Doesn't seem like a bug after all :) but I'd like to know if you agree with my answer. Thanks — jay tai, Jun 16 '15 at 20:23

jay tai · Accepted Answer · 2015-06-16T16:34:30.507

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?

score 1 · Answer 2 · answered Oct 23 '19 at 14:38

1

I had this "2 click" problem as well. In my case the solution was to use

<p:commandLink value="Update" id="sButton" action="#{myBean.myAction}" update=":myForm"/>

and not

<p:commandLink value="Update" id="sButton" action="#{myBean.myAction}">
                        <p:ajax event="click" update=":myForm"/>
                    </p:commandLink>

answered Oct 23 '19 at 14:38

nettie

628
1
11
23

Do you know the difference? – Kukeltje Oct 23 '19 at 20:54
Looking at BalusC's post I'm seeing that they only update requested components but I see no mention of the difference between commandButton and ajax "update" https://stackoverflow.com/questions/25339056/understanding-primefaces-process-update-and-jsf-fajax-execute-render-attributes – nettie Oct 24 '19 at 21:13
1

`p:commandButton` has ajax built-in, so by ding an ajax inside it, you make the behaviour sort of undefined. Not explicitly your fault since I would have expected (or at least hoped) the pf component to warn about this – Kukeltje Oct 24 '19 at 22:20

score 0 · Answer 3 · answered Apr 10 '19 at 00:43

0

I had this problem, but in my case there was ajavax.faces.application.ViewExpiredException Here is a good article about it javax.faces.application.ViewExpiredException: View could not be restored

answered Apr 10 '19 at 00:43

Carlos UCR

299
3
6

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

3 Answers3