CODEWITHSUNDEEP
javascriptajaxjsfprimefacesjsf-2.2
jay tai
jay tai

Reputation: 489

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

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!

Upvotes: 0

Views: 4506

Answers (3)

nettie
nettie

Reputation: 692

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>

Upvotes: 1

Carlos UCR
Carlos UCR

Reputation: 359

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

Upvotes: 0

jay tai
jay tai

Reputation: 489

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?

Upvotes: 1

Related Questions