13 Replies Latest reply on Jun 28, 2013 12:39 PM by Brian Leathem

    Trouble using commandLink in dataTable

    Mitchel Poe Newbie

      I am having some trouble getting a method of a bean to fire with in a dataTable that is nested within a popupPanel. The dataTable populates as is should, includeing the commandLinks. The problem comes up when I click on one of the command links. It act as if it is submitting the wrong form. The popup dissapears and the method never happens.

       

      At this point the method the link is pointing at is very simple,  because I am jsut trying to get someting to work. Once I solve the issue, I would like to pass that method "i" so that it can be processed.

       

      I am very new to all of this, so if I am doing something backwards I am very open to chaning implementation.


      Thanks in advance!

       

            <ui:define name="content">

       

       

                  <h:form id="outterForm">

                      <h:commandButton value="Select Customer">

                          <rich:componentControl target="popup" operation="show" />

                      </h:commandButton>

                  </h:form>   

       

       

                  <rich:popupPanel id="popup" modal="false" autosized="false" resizeable="true" width="700" height="700">

                      <f:facet name="header">

                          <h:outputText value="Select your customer" />

                      </f:facet>

                      <f:facet name="controls">

                          <h:outputLink value="#" onclick="#{rich:component('popup')}.hide();

                                  return false;">

                              X

                          </h:outputLink>

                      </f:facet>

       

       

                      <h:panelGrid columns="3">

                          <h:form>

                              <h:outputText value="Company Name:" />

                              <h:inputText value="#{temp.tempString}" />

                              <a4j:commandButton value="Search" render="out" execute="@form" />

                          </h:form>

                      </h:panelGrid>

       

       

                      <br />

                      <a4j:outputPanel id="out">

                          <h:dataTable value="#{dbController.findCustomer(temp.tempString)}" var="i" rendered="#{not empty temp.tempString}" styleClass="order-table"

                                       headerClass="order-table-header"

                                       rowClasses="order-table-odd-row,order-table-even-row">

                              <h:column  >

                                  <f:facet name="header">ShopWorks Customer Number</f:facet>

                                      #{i.idCustomer}

                              </h:column>

                              <h:column>

                                  <f:facet name="header">Company</f:facet>

                                      #{i.company}

                              </h:column>

                              <h:column>

                                  <f:facet name="header">Select</f:facet>

       

       

                                  <h:form>

                                      <h:commandLink  value="Select" action="#{dbController.test()}"  />

                                  </h:form>

                              </h:column>

       

       

                          </h:dataTable>

       

       

       

       

                      </a4j:outputPanel>

       

       

                  </rich:popupPanel>

       

       

       

       

       

      Bean code :

       

      public String test(){

              System.out.println("test");

              return "#";

          }

        • 1. Re: Trouble using commandLink in dataTable
          Siva P Master

          As you know JSFwill not allow nested forms.try with ajax command button for calling the action bean.So you no need to submit the whole page.

           

          Thanks,

          Siva

          • 2. Re: Trouble using commandLink in dataTable
            Sandeep Singh Newbie

            Easy solution would be to embed all the code within one form. Everything will work fine. Some times the mutilple form that too with POPUP intraction does not work properly.

            Or else as suggested above you can use a4j:command button.

            Hope this help you.

             

            Cheers,

            Sandy.

            • 3. Re: Trouble using commandLink in dataTable
              dageisz Newbie

              In your example code the from around the dataTable (and it s containing links) is missing. 

               

              You have to be very cautious with popupPanel s form handling, see the hints on placement here:

              http://docs.jboss.org/richfaces/latest_4_0_X/Component_Reference/en-US/html/chap-Component_Reference-Panels.html#sect-Component_Reference-Panels-richpopupPanel  

               

              So what you have to do is embed the interactive content of your popupPanel into a form (just expand the scope of the form around the company). 

               

              And be careful if you like to render the popup before showing it.

              Do not render the whole popup (or the ViewScoped ManagedBeans will be recreated), but just render the form itself or content inside the form.

              • 4. Re: Trouble using commandLink in dataTable
                Brian Leathem Master

                Your popup panel is not in a form, commandButtons will not evaluate if not in a form.  Use domElementAttachment to attach your popup element to a form:

                http://docs.jboss.org/richfaces/latest_4_X/vdldoc/rich/popupPanel.html

                • 5. Re: Trouble using commandLink in dataTable
                  Mitchel Poe Newbie

                  Ok, I have tried out a lot of your suggestions, but I can still not get things cooking. I have changed my buttons over to a4j:commandButtons and have made everything in the popup participate with in one form. When I made this changes some other problems have cleared up… So here is the code that I am working with now. The buttons with in the dataTable with the value="Select" still do not do anything... I have tried execute, action and actionListner

                   

                   

                   

                  <ui:define name="content">

                   

                   

                              <h:form id="outterForm">

                                  <h:commandButton value="Select Customer">

                                      <rich:componentControl target="popup" operation="show" />

                                  </h:commandButton>

                              </h:form>   

                   

                   

                              <rich:popupPanel id="popup" modal="false" autosized="false" resizeable="true" width="700" height="700" >

                   

                   

                                  <f:facet name="header">

                                      <h:outputText value="Select your customer" />

                                  </f:facet>

                                  <f:facet name="controls">

                                      <h:outputLink value="#" onclick="#{rich:component('popup')}.hide();

                                              return false;">

                                          X

                                      </h:outputLink>

                                  </f:facet>

                   

                   

                   

                   

                                  <h:panelGrid columns="3">

                                      <h:form>

                                          <h:outputText value="Company Name:" />

                                          <h:inputText value="#{temp.tempString}">

                                              <a4j:ajax event="keyup" render="out2" />

                                          </h:inputText>

                   

                   

                   

                   

                                          <a4j:commandButton  actionListener="#{temp.setListBlockCusotmer(dbController, temp.tempString)}" value="Search" render="out" />

                                      </h:form>

                                  </h:panelGrid>

                   

                   

                                  <br />

                                  <a4j:outputPanel id="out">

                                      <h:dataTable value="#{temp.tempListBlockCusotmer}" var="i" rendered="#{not empty temp.tempString}" styleClass="order-table"

                                                   headerClass="order-table-header"

                                                   rowClasses="order-table-odd-row,order-table-even-row">

                                          <h:column  >

                                              <f:facet name="header">ShopWorks Customer Number</f:facet>

                                                  #{i.idCustomer}

                                          </h:column>

                                          <h:column>

                                              <f:facet name="header">Company</f:facet>

                                                  #{i.company}

                                          </h:column>

                                          <h:column>

                                              <f:facet name="header">Select</f:facet>

                   

                   

                                              <h:form>

                                                  <a4j:commandButton execute="#{dbController.test()}" value="Select"/>

                                              </h:form>

                                          </h:column>

                   

                   

                                      </h:dataTable>

                   

                   

                   

                   

                                  </a4j:outputPanel>

                   

                   

                   

                   

                              </rich:popupPanel>

                   

                   

                   

                   

                   

                   

                   

                   

                          </ui:define>

                  • 7. Re: Trouble using commandLink in dataTable
                    dageisz Newbie

                    Normaly you don't have to use domElementAttach, i even don't like it, cause you ll end up with a form containing inputs that will be validated even if you don't need them (e.g. using execute="@form" on commands outside the popup).

                     

                    But as it seems it s not enough to embed only the link into a form but maybe the whole table.

                    The thing i can immagine is that the forms inside the table get their viewState broken when rerendering the dataTable (see https://java.net/jira/browse/JAVASERVERFACES_SPEC_PUBLIC-1024).

                     

                    You better use ONE form around your dataTable and do NOT render it's parent. For your example you could replace <a4j:outputPanel id="out"> with <h:form id="out"> and remove the forms you have inside the dataTable.

                    • 8. Re: Trouble using commandLink in dataTable
                      Mitchel Poe Newbie

                      In order to isolate the problem, I have removed the popup.

                       

                      dageisz, I have done as you have suggested... I have put the whole datatable within one form... still no luck.

                       

                      Here is what I am left wiht... the select buttons still do not function.

                       

                      <ui:define name="content">

                       

                       

                                  <h:form>

                                      <h:panelGrid columns="3">

                       

                       

                                          <h:outputText value="Company Name:" />

                                          <h:inputText value="#{temp.tempString}">

                                              <a4j:ajax event="keyup" render="out2" />

                                          </h:inputText>

                                          <a4j:commandButton  actionListener="#{temp.setListBlockCusotmer(dbController, temp.tempString)}" value="Search" render="out" />

                                      </h:panelGrid>

                                  </h:form>

                                  <br />

                       

                       

                                  <h:form id="out">

                       

                       

                                      <h:dataTable value="#{temp.tempListBlockCusotmer}" var="i" rendered="#{not empty temp.tempString}" styleClass="order-table"

                                                   headerClass="order-table-header"

                                                   rowClasses="order-table-odd-row,order-table-even-row">

                                          <h:column  >

                                              <f:facet name="header">ShopWorks Customer Number</f:facet>

                                                  #{i.idCustomer}

                                          </h:column>

                                          <h:column>

                                              <f:facet name="header">Company</f:facet>

                                                  #{i.company}

                                          </h:column>

                                          <h:column>

                                              <f:facet name="header">Select</f:facet>

                       

                       

                                              <a4j:commandButton execute="#{dbController.test()}" value="Select"/>

                       

                       

                                          </h:column>

                       

                       

                                      </h:dataTable>

                       

                       

                                  </h:form>

                              </ui:define>

                      • 9. Re: Trouble using commandLink in dataTable
                        Brian Leathem Master

                        It looks like you are mis-using the execute attribute of the commandButton here:

                                                <a4j:commandButton execute="#{dbController.test()}" value="Select"/>

                         

                        The execute attribute is meant to list the id's of components you want to include in the ajax request.  I think rather you are looking for the action attribute.

                        • 10. Re: Trouble using commandLink in dataTable
                          Mitchel Poe Newbie

                          I have switched the attribute over to action... Still nothing happens on click of the button... I am pulling out my hair on this one.

                          • 11. Re: Trouble using commandLink in dataTable
                            Brian Leathem Master

                            Can you start fesh?  Post your simplified code, explain what you expect to happen, and what you instead observe.

                            • 12. Re: Trouble using commandLink in dataTable
                              Mitchel Poe Newbie

                              Brian, I have started over and found where the problem is...

                               

                              I started of using a static value for the dataTable, this produced results where "printLn" button worked.

                              When I use a dynamic value and render the dable with a4j:commandbuttion "search" then the generated "printLn" buttons do not work.

                               

                                          <h:form >

                                              <h:inputText value="#{temp.tempString}"/>

                               

                                              <a4j:commandButton  action="#{temp.setListBlockCusotmer(dbController, temp.tempString)}" value="Search" render="table" />

                               

                                              <h:dataTable value="#{temp.tempListBlockCusotmer}" var="i" id="table">

                                                  <h:column>

                                                      <f:facet name="header">Number</f:facet>

                                                          #{i}

                                                  </h:column>

                                                  <h:column>

                                                      <f:facet name="header">Button</f:facet>

                                                      <a4j:commandButton action="#{dbController.test()}" value="printLn" limitRender="true"/>

                                                  </h:column>

                               

                               

                                              </h:dataTable>

                                          </h:form>

                              • 13. Re: Trouble using commandLink in dataTable
                                Brian Leathem Master

                                Nice - this reduction is far simpler to evaluate.  Nice job!

                                 

                                Can you similarly provide a simplified backing bean that I can use to reproduce this behaviour locally?