-
1. Re: h:form within rich:tab
nbelaevski Apr 13, 2010 7:21 AM (in response to nimo22)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
nimo22 Apr 13, 2010 7:43 AM (in response to nbelaevski)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
nimo22 Apr 14, 2010 7:11 AM (in response to nimo22)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
nbelaevski Apr 14, 2010 7:37 AM (in response to nimo22)1 of 1 people found this helpfulYou can use a4j:jsFunction.
-
5. Re: h:form within rich:tab
nimo22 Apr 14, 2010 8:44 AM (in response to nbelaevski)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 Apr 14, 2010 8:56 AM (in response to nimo22)add parantheses to jsFunction name when you are calling it
ontabenter="callTab();"
-
7. Re: h:form within rich:tab
nimo22 Apr 14, 2010 9:04 AM (in response to harut)Oh that was my fault..forgot that.
thanks!
-
8. Re: h:form within rich:tab
nimo22 Apr 14, 2010 10:46 AM (in response to nimo22)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
nbelaevski Apr 14, 2010 2:51 PM (in response to nimo22)You can use single h:form and even single a4j:jsFunction as it allows to specify parameters.