7 Replies Latest reply on Feb 5, 2013 2:06 AM by Siva P

    a4j:commandButton does nothing on first click, works on second

    sandeep kamath Newbie

      I am using richfaces 4.3, JSF 2.2

       

      My requirement is simple, once i login a page is displayed which consists of 2 panel only one of which is displayed initially.
      On selecting some value from combo box when i click on button it should execute some statements. I have used action="#{myBeam.makeBDEntry}" for it.
      Then it should render another panel which displays the values selected after some calculation. I have used render="out" for it.

       

      I am new to JSF & richfaces..

      is there something like onclick="document.getElementById(this).submit()" where i can render panel on click but after executing some statements(calculation).

       

       

      in the below example i have combobox to select hours & mins and a button.
      After clicking button

      1. The hours & mins are added to current time.
      2. Database entry is done.(I am doing it in makeBDEntry() of myBeam )
      3. The target time is displayed to user.

       

      first time when I click nothing happens .works correctly from next time onwards...

       

      Please help me with the code

       

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <ui:composition lang="en" xmlns="http://www.w3.org/1999/xhtml"

          xmlns:h="http://java.sun.com/jsf/html"

          xmlns:f="http://java.sun.com/jsf/core"

          xmlns:ui="http://java.sun.com/jsf/facelets"

          xmlns:rich="http://richfaces.org/rich"

          xmlns:a4j="http://richfaces.org/a4j">

          <h:body>

              <h:form>

                  <div id="container">

                         <!--// header contains another a4j:commandButton for logout... //-->

                      <div id="content">

                          <rich:panel>

                              <h:panelGrid columns="2" columnClasses="mainPanelColumn">

                                  <h:outputText value="Enter the Hours" />

                                  <h:selectOneMenu value="#{myBeam.hours}">

                                      <f:selectItem itemLabel="1  hour" itemValue="1" />

                                      <f:selectItem itemLabel="2  hour" itemValue="2" />

                                      <f:selectItem itemLabel="3  hour" itemValue="3" />

                                      <f:selectItem itemLabel="4  hour" itemValue="4" />

                                      <f:selectItem itemLabel="5  hour" itemValue="5" />

                                  </h:selectOneMenu>

                                  <h:outputText value="Enter the Minutes" />

                                  <h:selectOneMenu value="#{myBeam.minutes}">

                                      <f:selectItem itemLabel="00 min" itemValue="0" />

                                      <f:selectItem itemLabel="15 min" itemValue="15" />

                                      <f:selectItem itemLabel="30 min" itemValue="30" />

                                      <f:selectItem itemLabel="45 min" itemValue="45" />

                                  </h:selectOneMenu>

                                  <br />

                                  <a4j:commandButton value="Submit" action="#{myBeam.makeBDEntry}"

                                      render="out" />

                              </h:panelGrid>

                          </rich:panel>

                          <br />

                          <a4j:outputPanel id="out">

                              <rich:panel rendered="#{not empty myBeam.entryTime and myBeam.checkFlag}">

                                  <p>current time + (hours and minutes entered by user) is displayed as target time</p>

                                  <h:panelGrid columns="2" rendered="#{not empty myBeam.entryTime and myBeam.checkFlag}" columnClasses="mainPanelColumn">

                                      <h:outputText value="Target Time" columnClasses="mainPanelColumn" rendered="#{not empty myBeam.targetTime and myBeam.checkFlag}" />

                                      <h:outputText value="#{myBeam.targetTime}" rendered="#{not empty myBeam.targetTime and myBeam.checkFlag}" />

                                  </h:panelGrid>

                              </rich:panel>

                          </a4j:outputPanel>

                      </div>

                  </div>

              </h:form>

          </h:body>

      </ui:composition>

        • 1. Re: a4j:commandButton does nothing on first click, works on second
          Siva P Master

          Hi,

          Try change the following code,

          ajax region is used to refresh only the specific area in the page.try to rerender the region id in the screen,

          I have worked only in 3.X version of richfaces,So it shoud work.

          check rendered="#{not empty myBeam.entryTime and myBeam.checkFlag}" because some time it creates problem in screen display.

           

            <a4j:commandButton value="Submit" action="#{myBeam.makeBDEntry}"

                                          render="regionTime,out,displayPanel" />

           

          <a4j:region id="regionTime">

          <a4j:outputPanel id="out" ajaxRendered="true">

                                  <rich:panel id="displayPanel" rendered="#{not empty myBeam.entryTime and myBeam.checkFlag}">

                                      <p>current time + (hours and minutes entered by user) is displayed as target time</p>

                                      <h:panelGrid columns="2" rendered="#{not empty myBeam.entryTime and myBeam.checkFlag}" columnClasses="mainPanelColumn">

                                          <h:outputText value="Target Time" columnClasses="mainPanelColumn" rendered="#{not empty myBeam.targetTime and myBeam.checkFlag}" />

                                          <h:outputText value="#{myBeam.targetTime}" rendered="#{not empty myBeam.targetTime and myBeam.checkFlag}" />

                                      </h:panelGrid>

                                  </rich:panel>

          </a4j:outputPanel>

          </a4j:region>

           

          Thanks,

          Siva

          • 2. Re: a4j:commandButton does nothing on first click, works on second
            Chris Dollar Novice

            I'm not using JFS2.2, but there is a known bug dealing with ajax requests and rendering forms in earlier versions. See: http://webcache.googleusercontent.com/search?q=cache:http://java.net/jira/browse/JAVASERVERFACES_SPEC_PUBLIC-790 (note this is a cached version of the page due to http://www.java.net/forum/topic/site-help/browsing-jira-now-requires-login). Using the 790-js-workaround attached to the issue got us past the second click issue.  Or, if you're a fan of BalusC (we all are, right!), you can see his solution for that here: http://stackoverflow.com/questions/11408130/jsf-commandbutton-works-on-second-click

            • 3. Re: a4j:commandButton does nothing on first click, works on second
              sandeep kamath Newbie

              Siva Prasad : I tried your code but unfortunately it did not work for me...

              Now onclick the ajax regoin is not displaying not even after second click. Hope i am not doing anything wrong or not missing anything.

               

              the only reason for me to add "#{not empty myBeam.entryTime and myBeam.checkFlag}" was to avoid the panel(second) to be loaded initially.(Please check the attached image before.png)
              The second panel should be rendered only on click of the button present in panel1.

               

              as i am new to richfaces i did not know how to do this so i added "#{not empty myBeam.entryTime and myBeam.checkFlag}".

              Is there any other way to do that ? Please advise

              • 4. Re: a4j:commandButton does nothing on first click, works on second
                sandeep kamath Newbie

                Chris Dollar: Thanks for the information. This was helpful but did not solve my problem.

                After adding the script provided in the link by BalusC, I am able to see the POST in firebug even for the first click.
                But even now rendering of panel is not done correctly.

                 

                Can anyone clarify my doubt on cycle of events in the below line..

                  <a4j:commandButton value="Submit" action="#{myBeam.makeBDEntry}" render="out" />

                 

                when i click the button

                1. first makeBDEntry() method is called which does some predefined task
                2. then it will render the the item with id "out".....

                correct!!!


                Am i missing something ?

                • 5. Re: a4j:commandButton does nothing on first click, works on second
                  Chris Dollar Novice

                  What exactly isn't working when you say the rendering still isn't done correctly?

                   

                  And for what it's worth, I think Siva's advice isn't correct. Any time you have an a4j:outputPanel with ajaxRendered="true" then that panel will get re-rendered for each any every ajax request that is fired. You don't have to explicitly use it's id in the render attribute on the button. (Well, there are exceptions to this, like the limitToList attribute, but that's a whole different can of worms). Also, you only have to specifiy the parent ID of areas to re-render. Rendering a parent will also render all it's children.

                   

                  Perhaps post your latest code with more details about how it's failing? Also, adding an a4j:log to the page and making sure it has no errors is also a good idea for troubleshooting.

                  • 6. Re: a4j:commandButton does nothing on first click, works on second
                    sandeep kamath Newbie

                    Even after adding the script provided in the link by BalusC the outputPanel with id="out" is rendered only on second click.
                    Actually i was using jsf 2 but after seeing the bug i tried jsf 2.2 (just changed jar file in my classpath & nothing else).

                     

                    I have not changed anything in the code just copied the script file & included it in my XHTML

                    <h:outputScript library="javax.faces" name="jsf.js" target="head" />

                     

                     

                    My requirement is simple initially only one panel is shown(Please check the attached image) which consists of some combobox & button.

                    On click of that button a new panel is shown at the bottom which shows the selected values.

                    The problem that I am facing is on Click for the second time panel is displayed. not on the first time.

                     

                    As siva told can "#{not empty myBeam.entryTime and myBeam.checkFlag}" cause some problem ?

                    i have added this just to hide it for the first time when page loads.
                    Is there any other way to hide the panel for the first time when page loads?

                    • 7. Re: a4j:commandButton does nothing on first click, works on second
                      Siva P Master

                      May be you can try changing the Richfaces version.

                      JSF API and implementation JAR and check the click on it and debug with Firebug also.

                       

                      Thanks,

                      Siva