tab view problem

[tamizharasi]

Hi,

We are creating tabs in which it has 4 tabs. In one of the tab I am opening a dialog window after submitting the dialog details I am doing a update=@form. So it is updating the values and focus has gone to first tab. It is not on the existing tab.


I don't know how to solve this issue.

Let me know any one has solved this issue.

I am using primfaces 2.2 with JSF 2.0 & Jboss 4.3

[smithh032772]

You might want to copy/paste your code here, so others can advise or answer your question.

[tamizharasi]

<p:tabView>

<p:tab title="My Access">
<h:form id="myForm">
<h:panelGrid width="100%" columns="2" columnClasses="basic_share_pane,basic_minorshare_pane" rowClasses="basic_row">
<h:panelGrid column="1" width="100%" >
<ui:include src="/user/geidm/user_forms/req_rev.xhtml"/>
</h:panelGrid>
<h:panelGrid width="100%" column="1" >
<ui:include src="/user/geidm/user_forms/right_pane.xhtml"/>
</h:panelGrid>

</h:panelGrid>
</h:form>
</p:tab>
<p:tab title="Manage Ownership">
<h:form id="myOwnerForm">
<h:panelGrid columns="2" width="100%" columnClasses="basic_share_pane,basic_minorshare_pane" rowClasses="basic_row" >
<h:panelGrid column="1" width="100%">

<ui:include src="/user/geidm/user_forms/manage_ownership.xhtml"/>
</h:panelGrid>
<h:panelGrid column="1" width="100%">
<ui:include src="/user/geidm/user_forms/manage_right_pane.xhtml"/>
</h:panelGrid>
</h:panelGrid>
</h:form>
</p:tab>


<p:tab title="Quota increase">
<h:form id="myQuotaForm">
<h:panelGrid width="100%" columns="2" columnClasses="basic_share_pane,basic_minorshare_pane" rowClasses="basic_row">
<h:panelGrid column="1" width="100%">
<ui:include src="/user/geidm/user_forms/quota_increase.xhtml"/>
</h:panelGrid>
<h:panelGrid width="100%" column="1" >
<ui:include src="/user/geidm/user_forms/quota_increase_right_panel.xhtml"/>
</h:panelGrid>
</h:panelGrid>
</h:form>
</p:tab>
<p:tab title="Manage Users">
<h:form id="myManUsersForm">
<h:panelGrid width="100%" columns="2" columnClasses="basic_share_pane,basic_minorshare_pane" rowClasses="basic_row">
<h:panelGrid column="1" width="100%">
<ui:include src="/user/geidm/user_forms/manage_users.xhtml"/>
</h:panelGrid>
<h:panelGrid width="100%" column="1" >
<ui:include src="/user/geidm/user_forms/manage_users_right_pane.xhtml"/>
</h:panelGrid>
</h:panelGrid>
</h:form>
</p:tab>
<p:tab title="Create Share">
<h:form id="myCreateForm">
<h:panelGrid width="100%" columns="2" columnClasses="basic_share_pane,basic_minorshare_pane" rowClasses="basic_row">
<h:panelGrid column="1" width="100%">
<ui:include src="/user/geidm/user_forms/create_shares.xhtml"/>
</h:panelGrid>
<h:panelGrid width="100%" column="1" >
<ui:include src="/user/geidm/user_forms/create_shares_right_pane.xhtml"/>
</h:panelGrid>
</h:panelGrid>
</h:form>
</p:tab>


</p:tabView>

The above is my tabview code...

In one of the include file(/user/geidm/user_forms/manage_ownership.xhtml) i am having dialog.

<p:outputPanel id="gen4_shares_users" styleClass="ui-panel-title" >
<p:dialog header="Users having access" widgetVar="dlgUsers"
position="center" id="gen4_sharesDia"
closable="false" height="500" modal="true" width="500" rendered="#{ManageUsrsShare.usersDia}">

<p:ajaxStatus style="width:50px;height:50px;">
<f:facet name="start">
<h:graphicImage
value="/user/geidm/resources/images/ajax-loader.gif" />
</f:facet>


<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
<p:dataTable var="resultInt"
value="#{ManageUsrsShare.arrUsersData}" paginator="true" paginatorAlwaysVisible="false" rows="10"
selection="#{ManageUsrsShare.selectedManageAccess}" id="gen4_shares_tab">
<p:column selectionMode="multiple" >


</p:column>
<p:column filterBy="#{resultInt.lastname}" filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="Users having access to #{resultInt.shares} #{resultInt.servers}" />
</f:facet>
<h:outputText value="#{resultInt.displayFormat}"/>
</p:column>


</p:dataTable>
<br></br>
<center>
<p:commandButton styleClass="button" value="Revoke access" action="#{ManageUsrsShare.revokeAccess}" ajax="false" update="@form" oncomplete="dlgUsers.hide()"/>
<p:commandButton styleClass="button" value="Cancel" action="#{ManageUsrsShare.Cancelfn}" ajax="false" update="@form" oncomplete="dlgUsers.hide()"/>
</center>
</p:dialog>
</p:outputPanel>
<p:outputPanel id="transferShares1" styleClass="ui-panel-title" >

<p:dialog header="Transfer Shares" widgetVar="dlgOwn"
position="center"
closable="true" height="300" modal="true" width="300" rendered="#{ManageUsrsShare.showSSO}" >

<h:outputText value=" Enter User SSO to transfer #{ManageUsrsShare.selectedBeanTemp.servers}"></h:outputText>
<h:inputText id="userSSO1"
value="#{ManageUsrsShare.userSSO}"></h:inputText>
<p:commandButton actionListener="#{ManageUsrsShare.updateManage}" styleClass="button" value="Submit" oncomplete="dlgOwn.hide()" update="@form" ajax="false"></p:commandButton>
</p:dialog>
</p:outputPanel>

After selecting in the dialog box and submitting the command button the focus has gone to first tab...But the action is acting as expected...

Let me know how to solve this...

[smithh032772]

I'm assuming that one of the following commandButtons is responsible for the ajax=false (non-partial-page request), correct? ajax=false causes an entire page refresh, which is most likely the reason why the active tab has changed after clicking one of the buttons. See my recommendation below.

Code: Select all

<p:commandButton styleClass="button" value="Revoke access" action="#{ManageUsrsShare.revokeAccess}" ajax="false" update="@form" oncomplete="dlgUsers.hide()"/>
<p:commandButton styleClass="button" value="Cancel" action="#{ManageUsrsShare.Cancelfn}" ajax="false" update="@form" oncomplete="dlgUsers.hide()"/>

or

Code: Select all

<p:commandButton actionListener="#{ManageUsrsShare.updateManage}" styleClass="button" value="Submit" oncomplete="dlgOwn.hide()" update="@form" ajax="false"></p:commandButton>

I would recommend the following:

1. Refer to PrimeFaces user guide (or Showcase samples) and research the activeIndex property of p:tabView
2. Add tabIndex attribute, getter and setter to your bean
3. When dialog submits request (or when user navigates to tab), you may want to call setTabIndex(x), where x = tabIndex (tabIndex starts with 0/zero)
4. Modify your p:tabView as follows:

Code: Select all

<p:tabView activeIndex="#{bean.tabIndex}">

If you can implement something like this, then activeIndex should ensure that the last active tab will have focus after ajax=false request submitted by p:commandbutton. Hope that helps.

FYI, please use Code button that is positioned on top of the Editor when asking questions; Code markup will put your code in an iframe, I think, which will allow others to view your code via scrollbar instead of using page scrollbar.

[tamizharasi]

Excellent...It solved my issue... Thx...


Immediately I am getting quick reply...It reduces my project pressure.