9 Replies Latest reply on Apr 14, 2010 2:51 PM by Nick Belaevski

    h:form within rich:tab

    nimo stephan Master

      I want to trigger the event "onlabelclick" when clicking a tab - but the event is never triggered:

       

      <rich:tabPanel switchType="client">

      <rich:tab >
        <h:form>
          <a4j:support event="onlabelclick" action="#{myBean.doAction}" reRender=".." ajaxSingle="true" limitToList="true" ignoreDupResponses="true"/>
        </h:form>

      </rich:tab>

       

       

      You see, I have the form within the tab.

       

      When using h:form around the whole rich:tabPanel, then it works - but I need to avoid to use h:form around the whole component.

       

      Why is onlabelclick not called?

        • 1. Re: h:form within rich:tab
          Nick Belaevski Master

          Hi,

           

          It's not called, because there's no "onlabelclick" event at form. Wrapping tab panel with form is a normal case, why do you want to avoid that?

          • 2. Re: h:form within rich:tab
            nimo stephan Master

            I have many tabs and each tab has many tags.

             

            There are a few reasons, why I cannot use h:form around tabPanel:

            - I want to reduce the amount of tags within a form.

            - I have many includes within a tab which itself has a form and with jsf (rf, trinidad) it is not allowed to cascade forms.

            - I do not want to use immediate="true" for all commandLinks only to bypass required fields.

             

             

            {quote}It's not called, because there's no "onlabelclick" event at form{quote}

             

            Is there a way to get that working without wrapping the whole tab panel with form?

             

            I have also tried it with "onclick", it does not work, either.

             

             

            When using this code,

            I can avoid to wrap the rich:tabPanel with h:form, but then I need to click the commandLink (this is not a good solution) - I want to trigger the action when tab is clicked:


            <rich:tab>
            <f:facet name="label">
            <h:form>
            <a4j:commandLink value="Hobby" action="#{myBean.doAction}" ../>
            </h:form>
            </f:facet>
            <h:form>


                         ..

            </rich:tab>

            • 3. Re: h:form within rich:tab
              nimo stephan Master

              Are my reasons, why I want to avoid the h:form around the rich:tabPanel reasonable?

               

              I have also tried to wrap a div into a tab to the tabs size and attach the even "onclick" to that div,

              but the action is not fired when clicking within the div_label:

               

              <rich:tabPanel switchType="client">

               

                      <rich:tab id="tab_1">
                          <f:facet name="label">
                              <h:form>
                             <s:div id="div_label" style="width:100px; height: 100%; padding:0;border:0;margin:0;
              background-color:blue;">
                                  <h:outputText value="Tab 1"/>
                              <a4j:support event="onclick" action="#{myBean.doAction}" reRender="
              tab_1" limitToList="true"/>
                              </s:div>
                              </h:form>
                          </f:facet>
                      

                            <!-- so you see, I need multiple forms within my tab, which have to be separeted-->  

                          <h:form id="form_1">

                          <a4j:outputPanel>
                              <ui:include src="h1.xhtml"/>
                          </a4j:outputPanel>

                         </h:form>


                          <h:form id="form_2">

                          <a4j:outputPanel>
                               <ui:include src="h2.xhtml"/>
                           </a4j:outputPanel>

                         </h:form>


                          <h:form id="form_3">

                          <a4j:outputPanel>
                                <ui:include src="h3.xhtml"/>
                            </a4j:outputPanel>

                         </h:form>


                          <h:form id="form_4">

                           <a4j:outputPanel>
                                <ui:include  src="h4.xhtml"/>
                            </a4j:outputPanel>

                         </h:form>

               

                      </rich:tab>


              ..


              </rich:tabPanel>

              • 4. Re: h:form within rich:tab
                Nick Belaevski Master

                You can use a4j:jsFunction.

                1 of 1 people found this helpful
                • 5. Re: h:form within rich:tab
                  nimo stephan Master

                  Yes, indeed, aj4:function is the way to go, but unfortunately the jsFunction "callTab" is not called:

                   

                  <rich:tab id="tab1" ontabenter="callTab">
                              <f:facet name="label">
                                  <h:form>
                                  <a4j:outputPanel>
                                      <h:outputText value="My Tab" />
                                      <a4j:jsFunction name="callTab" action="#{myBean.doAction}" reRender="tab1" ajaxSingle="true" limitToList="true" ignoreDupResponses="true"/>
                                  </a4j:outputPanel>
                                  </h:form>
                              </f:facet>

                  ..

                  </rich:tab>

                   

                  I have also tried it with tab-events onlabelclick="callTab", onclick="callTab", ontabenter="callTab". callTab is not called.

                   

                  However, when using a4j:commandLink, action is called:

                   

                  <rich:tab  id="tab1" ontabenter="callTab">
                               <f:facet name="label">
                                   <h:form>
                                   <a4j:outputPanel>
                                       <a4j:commandLink value="My Tab" action="#{myBean.doAction}"  reRender="tab1" ajaxSingle="true" limitToList="true"  ignoreDupResponses="true"/>
                                   </a4j:outputPanel>
                                   </h:form>
                               </f:facet>

                  ..

                  </rich:tab>

                   

                   

                  Why does a4j:jsFunction not work?

                  • 6. Re: h:form within rich:tab
                    Harut Sargsyan Apprentice

                    add parantheses to jsFunction name when you are calling it

                    ontabenter="callTab();"

                    • 7. Re: h:form within rich:tab
                      nimo stephan Master

                      Oh that was my fault..forgot that.

                       

                      thanks!

                      • 8. Re: h:form within rich:tab
                        nimo stephan Master

                        Okay I have done it. However, maybe I found a little little bug:

                         

                        The first rich:tab within a rich:tabPanel will not be selectable, if the first rich:tab has the event "ontabenter" defined and the label-facet has a form-component:

                         

                        <rich:tabPanel switchType="client" >

                         

                                <rich:tab id="tab_1" ontabenter="myJs1();">
                                     <f:facet name="label">

                                    <h:form>

                                    <h:outputText value="Tab 2"/>

                                     <a4j:jsFunction  name="myJs1" action=".." reRender=".." ajaxSingle="true"  limitToList="true" ignoreDupResponses="true"/>

                                      </h:form>
                                      </f:facet>

                                  ..
                                 </rich:tab>

                         

                               <rich:tab id="tab_2" ontabenter="myJs2();">
                                      <f:facet name="label">

                                     <h:form>

                                     <h:outputText value="Tab 2"/>

                                      <a4j:jsFunction  name="myJs2" action=".." reRender=".."  ajaxSingle="true"  limitToList="true" ignoreDupResponses="true"/>

                                       </h:form>

                                    </f:facet>

                         

                                  ..
                                 </rich:tab>

                         

                                <rich:tab  id="tab_3" ontabenter="..">
                                      <f:facet name="label">

                                      <h:form>

                                      <h:outputText value="Tab3"/>

                                       <a4j:jsFunction  name="myJs3" action=".." reRender=".."   ajaxSingle="true"  limitToList="true" ignoreDupResponses="true"/>

                                        </h:form>

                                    </f:facet>

                         

                                  ..
                                 </rich:tab>

                         

                        </rich:tabPanel>

                         

                        When  defining ontabenter="myJs2();" or ontabenter="myJs3();" for tab_1, then tab_1 is selectable.

                         

                        When putting the a4j:jsFunction of tab_1 outside of the rich:tabPanel within a form, then tab_1 is  selectable:

                         

                        <h:form>

                        <a4j:jsFunction  name="myJs1" action=".."  reRender=".."  ajaxSingle="true"  limitToList="true"  ignoreDupResponses="true"/>

                        <h:form>

                         

                        <rich:tabPanel   switchType="client" >

                         

                                <rich:tab id="tab_1"  ontabenter="myJs1();">
                                     <f:facet name="label">

                                     <h:outputText value="Tab 2"/>

                                     </f:facet>

                                  ..
                                 </rich:tab>

                         

                        ..

                        </rich:tabPanel>

                         

                         

                        The  strange thing is,

                        that other tabs (coming after the first  tab) are selectable,

                        without the need to put the  a4j:jsFunctions outside of the rich:tabPanel.

                         

                         

                        I am using RF 3.3.3 Final.

                         

                        However, it is not critical, as we can put the  a4j:jsFunction outside of the rich:tabPanel, then the first tab is also  selectable.

                        • 9. Re: h:form within rich:tab
                          Nick Belaevski Master

                          You can use single h:form and even single a4j:jsFunction as it allows to specify parameters.