[richfaces-issues] [JBoss JIRA] (RF-12765) Rich:tabPanel not possible to switch tabs when only dynamic tabs are present
Lukáš Fryč (JIRA)
jira-events at lists.jboss.org
Tue Mar 5 07:30:57 EST 2013
[ https://issues.jboss.org/browse/RF-12765?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=12758463#comment-12758463 ]
Lukáš Fryč commented on RF-12765:
---------------------------------
The visible issue on client-side is in XML response:
1. open the page http://localhost:8080/richfaces-showcase-tomcat6/richfaces/component-sample.jsf?demo=tabPanel&sample=dynamic&skin=blueSky
2. switch to classic (second) tab
{code}
<?xml version='1.0' encoding='UTF-8'?>
<partial-response><changes><update id="j_idt102:j_idt106:1:j_idt107"><![CDATA[<div id="j_idt102:j_idt106:1:j_idt107" class="rf-tab"><div class="rf-tab-cnt" id="j_idt102:j_idt106:1:j_idt107:content">
<i> All the controls below are just standard JSF components skinned with RichFaces: </i>
<hr />
<form id="j_idt102:j_idt106:1:j_idt110" name="j_idt102:j_idt106:1:j_idt110" method="post" action="/richfaces-showcase-tomcat6/richfaces/component-sample.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt102:j_idt106:1:j_idt110" value="j_idt102:j_idt106:1:j_idt110" />
<table>
<tbody>
<tr>
<td>Enter Name:</td>
<td><input id="j_idt102:j_idt106:1:j_idt110:input" type="text" name="j_idt102:j_idt106:1:j_idt110:input" /></td>
</tr>
<tr>
<td>Enter you interests:</td>
<td><textarea name="j_idt102:j_idt106:1:j_idt110:j_idt114" cols="17" rows="3"></textarea></td>
</tr>
<tr>
<td>Choose your favourite color</td>
<td><select name="j_idt102:j_idt106:1:j_idt110:j_idt116" size="1"> <option value="0">Red</option>
<option value="1">Black</option>
<option value="2">Green</option>
<option value="3">White</option>
</select></td>
</tr>
</tbody>
</table>
<hr />
<script type="text/javascript" src="/richfaces-showcase-tomcat6/javax.faces.resource/jsf.js.jsf?ln=javax.faces"></script>
<input type="submit" name="j_idt102:j_idt106:1:j_idt110:j_idt122" value="Switch to classic skin" onclick="mojarra.jsfcljs(document.getElementById('j_idt102:j_idt106:1:j_idt110'),{'j_idt102:j_idt106:1:j_idt110:j_idt122':'j_idt102:j_idt106:1:j_idt110:j_idt122','skin':'classic'},'');return false" />
</form></div></div>]]></update><update id="javax.faces.ViewState"><![CDATA[7571343461767236909:3115954825780142748]]></update><extension id="org.richfaces.extension"><complete>new RichFaces.ui.Tab("j_idt102:j_idt106:1:j_idt107",{"index":1,"leave":null,"togglePanelId":"j_idt102:j_idt103","switchMode":"ajax","name":"classic","enter":null,"disabled":false} );RichFaces.$('j_idt102:j_idt103').onCompleteHandler('classic');;RichFaces.javascriptServiceComplete();;</complete><render>j_idt102:j_idt103 at activeItem</render></extension></changes></partial-response>
{code}
2. switch to blueSky (first) tab
{code}
<?xml version='1.0' encoding='UTF-8'?>
<partial-response><changes><update id="j_idt102:j_idt103"><![CDATA[<div id="j_idt102:j_idt103" class="rf-tbp"><input id="j_idt102:j_idt103-value" name="j_idt102:j_idt103-value" type="hidden" value="blueSky" /><div class="rf-tab-hdr-tabline-vis rf-tab-hdr-tabline-top"><table class="rf-tab-hdr-tabs" cellspacing="0"><tbody><tr><td style="padding-left: 5px;" class="rf-tab-hdr-spcr"><br /></td><td id="j_idt102:j_idt106:0:j_idt107:header:inactive" class="rf-tab-hdr rf-tab-hdr-inact rf-tab-hdr-top" style="display : none"><span class="rf-tab-lbl">blueSky</span></td><td id="j_idt102:j_idt106:0:j_idt107:header:active" class="rf-tab-hdr rf-tab-hdr-act rf-tab-hdr-top" style=""><span class="rf-tab-lbl">blueSky</span></td><td id="j_idt102:j_idt106:0:j_idt107:header:disabled" class="rf-tab-hdr rf-tab-hdr-dis rf-tab-hdr-top" style="display : none"><span class="rf-tab-lbl">blueSky</span></td><td style="" class="rf-tab-hdr-spcr rf-tab-hortab-tabspcr-wdh"><br /></td><td id="j_idt102:j_idt106:1:j_idt107:header:inactive" class="rf-tab-hdr rf-tab-hdr-inact rf-tab-hdr-top" style=""><span class="rf-tab-lbl">classic</span></td><td id="j_idt102:j_idt106:1:j_idt107:header:active" class="rf-tab-hdr rf-tab-hdr-act rf-tab-hdr-top" style="display : none"><span class="rf-tab-lbl">classic</span></td><td id="j_idt102:j_idt106:1:j_idt107:header:disabled" class="rf-tab-hdr rf-tab-hdr-dis rf-tab-hdr-top" style="display : none"><span class="rf-tab-lbl">classic</span></td><td style="" class="rf-tab-hdr-spcr rf-tab-hortab-tabspcr-wdh"><br /></td><td id="j_idt102:j_idt106:2:j_idt107:header:inactive" class="rf-tab-hdr rf-tab-hdr-inact rf-tab-hdr-top" style=""><span class="rf-tab-lbl">deepMarine</span></td><td id="j_idt102:j_idt106:2:j_idt107:header:active" class="rf-tab-hdr rf-tab-hdr-act rf-tab-hdr-top" style="display : none"><span class="rf-tab-lbl">deepMarine</span></td><td id="j_idt102:j_idt106:2:j_idt107:header:disabled" class="rf-tab-hdr rf-tab-hdr-dis rf-tab-hdr-top" style="display : none"><span class="rf-tab-lbl">deepMarine</span></td><td style="" class="rf-tab-hdr-spcr rf-tab-hortab-tabspcr-wdh"><br /></td><td id="j_idt102:j_idt106:3:j_idt107:header:inactive" class="rf-tab-hdr rf-tab-hdr-inact rf-tab-hdr-top" style=""><span class="rf-tab-lbl">emeraldTown</span></td><td id="j_idt102:j_idt106:3:j_idt107:header:active" class="rf-tab-hdr rf-tab-hdr-act rf-tab-hdr-top" style="display : none"><span class="rf-tab-lbl">emeraldTown</span></td><td id="j_idt102:j_idt106:3:j_idt107:header:disabled" class="rf-tab-hdr rf-tab-hdr-dis rf-tab-hdr-top" style="display : none"><span class="rf-tab-lbl">emeraldTown</span></td><td style="" class="rf-tab-hdr-spcr rf-tab-hortab-tabspcr-wdh"><br /></td><td id="j_idt102:j_idt106:4:j_idt107:header:inactive" class="rf-tab-hdr rf-tab-hdr-inact rf-tab-hdr-top" style=""><span class="rf-tab-lbl">japanCherry</span></td><td id="j_idt102:j_idt106:4:j_idt107:header:active" class="rf-tab-hdr rf-tab-hdr-act rf-tab-hdr-top" style="display : none"><span class="rf-tab-lbl">japanCherry</span></td><td id="j_idt102:j_idt106:4:j_idt107:header:disabled" class="rf-tab-hdr rf-tab-hdr-dis rf-tab-hdr-top" style="display : none"><span class="rf-tab-lbl">japanCherry</span></td><td style="" class="rf-tab-hdr-spcr rf-tab-hortab-tabspcr-wdh"><br /></td><td id="j_idt102:j_idt106:5:j_idt107:header:inactive" class="rf-tab-hdr rf-tab-hdr-inact rf-tab-hdr-top" style=""><span class="rf-tab-lbl">ruby</span></td><td id="j_idt102:j_idt106:5:j_idt107:header:active" class="rf-tab-hdr rf-tab-hdr-act rf-tab-hdr-top" style="display : none"><span class="rf-tab-lbl">ruby</span></td><td id="j_idt102:j_idt106:5:j_idt107:header:disabled" class="rf-tab-hdr rf-tab-hdr-dis rf-tab-hdr-top" style="display : none"><span class="rf-tab-lbl">ruby</span></td><td style="" class="rf-tab-hdr-spcr rf-tab-hortab-tabspcr-wdh"><br /></td><td id="j_idt102:j_idt106:6:j_idt107:header:inactive" class="rf-tab-hdr rf-tab-hdr-inact rf-tab-hdr-top" style=""><span class="rf-tab-lbl">wine</span></td><td id="j_idt102:j_idt106:6:j_idt107:header:active" class="rf-tab-hdr rf-tab-hdr-act rf-tab-hdr-top" style="display : none"><span class="rf-tab-lbl">wine</span></td><td id="j_idt102:j_idt106:6:j_idt107:header:disabled" class="rf-tab-hdr rf-tab-hdr-dis rf-tab-hdr-top" style="display : none"><span class="rf-tab-lbl">wine</span></td><td style="" class="rf-tab-hdr-spcr rf-tab-hortab-tabspcr-wdh"><br /></td><td style="padding-right: 5px; width: 100%;" class="rf-tab-hdr-spcr"><br /></td></tr></tbody></table><div class="rf-tab-hdr-scrl-lft rf-tab-hdn">«</div><div class="rf-tab-hdr-tablst rf-tab-hdn">↓</div><div class="rf-tab-hdr-scrl-rgh rf-tab-hdn">»</div></div><div class="rf-tab-hdr-brd"></div><div id="j_idt102:j_idt106:0:j_idt107" class="rf-tab"><div class="rf-tab-cnt" id="j_idt102:j_idt106:0:j_idt107:content">
<i> All the controls below are just standard JSF components skinned with RichFaces: </i>
<hr />
<form id="j_idt102:j_idt106:0:j_idt110" name="j_idt102:j_idt106:0:j_idt110" method="post" action="/richfaces-showcase-tomcat6/richfaces/component-sample.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt102:j_idt106:0:j_idt110" value="j_idt102:j_idt106:0:j_idt110" />
<table>
<tbody>
<tr>
<td>Enter Name:</td>
<td><input id="j_idt102:j_idt106:0:j_idt110:input" type="text" name="j_idt102:j_idt106:0:j_idt110:input" /></td>
</tr>
<tr>
<td>Enter you interests:</td>
<td><textarea name="j_idt102:j_idt106:0:j_idt110:j_idt114" cols="17" rows="3"></textarea></td>
</tr>
<tr>
<td>Choose your favourite color</td>
<td><select name="j_idt102:j_idt106:0:j_idt110:j_idt116" size="1"> <option value="0">Red</option>
<option value="1">Black</option>
<option value="2">Green</option>
<option value="3">White</option>
</select></td>
</tr>
</tbody>
</table>
<hr />
<script type="text/javascript" src="/richfaces-showcase-tomcat6/javax.faces.resource/jsf.js.jsf?ln=javax.faces"></script>
<input type="submit" name="j_idt102:j_idt106:0:j_idt110:j_idt122" value="Switch to blueSky skin" onclick="mojarra.jsfcljs(document.getElementById('j_idt102:j_idt106:0:j_idt110'),{'j_idt102:j_idt106:0:j_idt110:j_idt122':'j_idt102:j_idt106:0:j_idt110:j_idt122','skin':'blueSky'},'');return false" />
</form></div></div><div id="j_idt102:j_idt106:1:j_idt107" style="display:none;"></div><div id="j_idt102:j_idt106:2:j_idt107" style="display:none;"></div><div id="j_idt102:j_idt106:3:j_idt107" style="display:none;"></div><div id="j_idt102:j_idt106:4:j_idt107" style="display:none;"></div><div id="j_idt102:j_idt106:5:j_idt107" style="display:none;"></div><div id="j_idt102:j_idt106:6:j_idt107" style="display:none;"></div></div>]]></update><update id="javax.faces.ViewState"><![CDATA[7571343461767236909:3115954825780142748]]></update><extension id="org.richfaces.extension"><complete>new RichFaces.ui.TabPanel("j_idt102:j_idt103",{"ajax":{"incId":"1"} ,"activeItem":"blueSky","isKeepHeight":false,"cycledSwitching":false} );new RichFaces.ui.Tab("j_idt102:j_idt106:0:j_idt107",{"index":0,"leave":null,"togglePanelId":"j_idt102:j_idt103","switchMode":"ajax","name":"blueSky","enter":null,"disabled":false} );new RichFaces.ui.Tab("j_idt102:j_idt106:1:j_idt107",{"index":1,"leave":null,"togglePanelId":"j_idt102:j_idt103","switchMode":"ajax","name":"classic","enter":null,"disabled":false} );new RichFaces.ui.Tab("j_idt102:j_idt106:2:j_idt107",{"index":2,"leave":null,"togglePanelId":"j_idt102:j_idt103","switchMode":"ajax","name":"deepMarine","enter":null,"disabled":false} );new RichFaces.ui.Tab("j_idt102:j_idt106:3:j_idt107",{"index":3,"leave":null,"togglePanelId":"j_idt102:j_idt103","switchMode":"ajax","name":"emeraldTown","enter":null,"disabled":false} );new RichFaces.ui.Tab("j_idt102:j_idt106:4:j_idt107",{"index":4,"leave":null,"togglePanelId":"j_idt102:j_idt103","switchMode":"ajax","name":"japanCherry","enter":null,"disabled":false} );new RichFaces.ui.Tab("j_idt102:j_idt106:5:j_idt107",{"index":5,"leave":null,"togglePanelId":"j_idt102:j_idt103","switchMode":"ajax","name":"ruby","enter":null,"disabled":false} );new RichFaces.ui.Tab("j_idt102:j_idt106:6:j_idt107",{"index":6,"leave":null,"togglePanelId":"j_idt102:j_idt103","switchMode":"ajax","name":"wine","enter":null,"disabled":false} );RichFaces.$('j_idt102:j_idt103').onCompleteHandler('blueSky');;RichFaces.javascriptServiceComplete();;</complete><render>j_idt102:j_idt103 at activeItem</render></extension></changes></partial-response>
{code}
3. switch to class (second) tab again
{code}
<?xml version='1.0' encoding='UTF-8'?>
<partial-response><changes><update id="javax.faces.ViewState"><![CDATA[-5836673545862203024:-6654894790524010288]]></update></changes></partial-response>
{code}
Note that after first and second request, the jsf.js is re-loaded, but after third request, it is not reloaded.
> Rich:tabPanel not possible to switch tabs when only dynamic tabs are present
> ----------------------------------------------------------------------------
>
> Key: RF-12765
> URL: https://issues.jboss.org/browse/RF-12765
> Project: RichFaces
> Issue Type: Bug
> Security Level: Public(Everyone can see)
> Components: component-output
> Affects Versions: 4.3.0.M3, 4.3.0.CR2
> Environment: Linux, windows any browser Chrom, Mozilla
> Reporter: Tali Han
> Assignee: Lukáš Fryč
> Original Estimate: 2 hours
> Remaining Estimate: 2 hours
>
> Rih:Tab panel functionality is broken.
> If you have dynamically generated tabs, you'll be able to switch from first to last, and then to first, but you'll not be able to switch to any other tab again.
> Remove from example that comes with richfaces distribution first static tab for dynamic tabs and you'll be able to reproduce this behaviour.
> richfaces/tabPanel/samples/dynamic-sample.xhtml
> {code}
> <rich:tabPanel activeItem="#{dynamicPanelBean.activeTab}">
> <ui:remove>
> <rich:tab header="Static">
> <p>This tab is static one.</p>
>
> <p>All of the following tabs are dynamically generated using <b>a4j:repeat</b>.</p>
> </rich:tab>
> </ui:remove>
> <a4j:repeat value="#{skinBean.skins}" var="skinName">
>
> <rich:tab header="#{skinName}" name="#{skinName}">
> <f:facet name="header">#{skinName}</f:facet>
> <i> All the controls below are just standard JSF components skinned with RichFaces: </i>
> <hr />
> <h:form>
> {code}
--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators
For more information on JIRA, see: http://www.atlassian.com/software/jira
More information about the richfaces-issues
mailing list