Command buttons invokes actions on second push (js

问题:

I came to strange behaviour of my application. Command buttons start to invoke actions on second hit. On first - nothing happens. It takes effect on firefox and chromium, but in epiphany works as usual.

My environment: - ubuntu 11.04 - glassfish 3.1.1 - jsf 2.X - primefaces 3.2 - firefox 12.0 - epiphany 2.30.6

Code example:

    <ui:define name="content">
       <h:form id="form">
            <h:panelGrid id="panelGrid" columns="3">

                <h:outputText value="#{msg.fieUserName}:"/>
                <h:inputText  id="name"  value="#{userBb.editedUser.username}" />
                <h:message    for="name" styleClass="error_msg"/>

                <h:outputText value="#{msg.fieUserDescription}:"/>
                <h:inputText  id="description"  value="#{userBb.editedUser.description}" />
                <h:message    for="description" styleClass="error_msg"/>

                <h:outputText   value="#{msg.fieUserPassword}:"/>
                <h:inputSecret  id="password" value="#{userBb.editedUser.password}" redisplay="true"/>
                <h:message      for="password" styleClass="error_msg"/>

                <h:outputText value="#{msg.fieUserRights}:"/>
                <p:selectOneMenu id=       "rights"
                                 value=    "#{userBb.editedUserGroup}"
                                 converter="#{pGroupOfUsersConverter}">
                    <f:selectItems
                        value    ="#{groupDao.findAll()}"
                        var      ="row"
                        itemLabel="#{groupDao.rightsDescription(row.id)}"
                        itemValue="#{row.groupname}" 
                        >
                    </f:selectItems>
                </p:selectOneMenu>
                <h:message for="rights" styleClass="error_msg"/>

                <h:outputText value="#{msg.fiePorofolioName}:" rendered="#{userBb.chosenNew}"/>
                <h:inputText  id="portName" value="#{userBb.portfelForNewUser.nazwa}" rendered="#{userBb.chosenNew}">
                    <f:validateBean disabled="true" />
                </h:inputText>
                <h:message for="portName" styleClass="error_msg" rendered="#{userBb.chosenNew}"/>

                <h:outputText    value="#{msg.fiePotofolioCurrency}:" rendered="#{userBb.chosenNew}"/>
                <p:selectOneMenu id=       "waldep" 
                                 value=    "#{userBb.portfelForNewUser.walutaDepozytowa}"
                                 converter="#{igConverter}"
                                 rendered= "#{userBb.chosenNew}"
                                 >
                   <f:selectItems value=    "#{igDao.waluty}" 
                                  var=      "row"
                                  itemLabel="#{row.nazwa}"/>
                </p:selectOneMenu>
                <h:message for="waldep" styleClass="error_msg" rendered="#{userBb.chosenNew}"/>

            </h:panelGrid>
            <h:panelGrid columns="2">
               <h:commandButton value="#{msg.butCreate}" action="#{userBb.formCreate()}" rendered="#{userBb.chosenNew}" />
               <h:commandButton value="#{msg.butSave}"   action="#{userBb.formEdit()}"   rendered="#{!userBb.chosenNew}"/>
               <h:commandButton value="#{msg.butBack}"   action="#{userBb.formBack()}"/>
            </h:panelGrid>
        </h:form>
    </ui:define>

In this example method userBb.formCreate() is invoked only on second click on command button although button is visible. When fields are not properly filled up than appropriate messages appear next to them, but... only on second click! Any advice?

I check out points from: this advice, but not found solution.

回答1:

Ok, I found what was wrong. So:

Appearance of the problem: I've got a page for user data. Some input items and command buttons. When clicking "Create" button, input data is checked out. If data is ok user is created and table of users appears, or when there are errors - errors messages appear and user stays on the same page:

I found some erratic behavior. Nothing has happened on first click (action), only second and subsequent actions have an effect. But. This behavior was related to kind of web browser I use.

All actions takes place from the first click, in webrowsers: epiphany and konqueror. Although in firefox and chromium I observed this erratic behavior which I described above. Code for a command button was:

<h:commandButton value="#{msg.butCreate}" action="#{userBb.formCreate()}" rendered="#{userBb.chosenNew}"/>

Different behaviors in different webbrowsers.

The cause. The cause was enumerated by @Balusc in his note, which I read roughly first time. It was indeed pt. 7.

The solution. I've tried to change button declaration this way:

<h:commandButton value="#{msg.butCreate}" action="#{userBb.formCreate()}" rendered="#{userBb.chosenNew}">
   <f:ajax render="userForm"/>
</h:commandButton> 

where userForm was proper id of h:form. No result, still only second and subsequent clicks has an effect - shows error messages.

So I changed declaration command button from previous page, that invoked erratic behavior page. Originally it was:

<p:commandButton value="#{msg.butNew}"    action="#{userBb.actionNew()}"/>

primefaces command button. And that was it, as Balusc wrote: "If a parent of the with the UICommand button is been rendered/updated by an ajax request beforehand, then the first action will always fail."

So I changed declaration to:

<p:commandButton value="#{msg.butNew}"    action="#{userBb.actionNew()}" ajax="false"/>

And that's it. It works fine in any browser, for the first action.