点击 Rich:tab 时显示 rich:popupPanel答案

【问题标题】：Show rich:popupPanel on click of rich:tab点击 Rich:tab 时显示 rich:popupPanel
【发布时间】：2015-12-13 19:27:49
【问题描述】：

一页包含富面标签面板并有 4 个标签。在其中一个选项卡中，我有文本框和保存按钮。不保存数据如果我移动到另一个选项卡，它应该显示弹出窗口说未保存的数据并阻止导航。

我尝试使用不同的 java 脚本加载rich:tabPanel 属性调用弹出窗口，但没有达到目的。

这里是代码

    <rich:tabPanel onclick="#{rich:component('confirmation')}.show();return false"  switchType="ajax"  id="wizardTab" itemChangeListener="#{bean.tabChange}" activeItem="#{bean.activeTab}">
    <rich:tab id="tab1" 
              // tab1

    </rich:tab>
    <rich:tab id="tab2" 


    </rich:tab>
    <rich:tab id="tab3" 


    </rich:tab>

    <rich:tab id="tab4" 
                        <h:inputText id="test" 
                                     styleClass="span2" maxlength="25"
                                     value="#{bean.rowForChange.code}">
                                     <f:ajax event="blur" execute="@this"/>
                        </h:inputText>
                        <h:commandButton value="Update" styleClass="button"
                                                     style="width:160px"
                                                     action="#{bean.updtae}">
                                        <a4j:ajax execute="paramValue"
                                                  render="table simeditPnl" />
                        </h:commandButton>

    </rich:tab>

</rich:tabPanel>

    <rich:popupPanel render="#{jCRDataRefreshManagement.updateStatus}" id="confirmation" modal="false" autosized="true" resizeable="false">
           <f:facet name="header">Confirmation</f:facet>
       <h:panelGrid>
          <h:panelGrid columns="2">
             <h:graphicImage value="/alert.png" />
         <h:outputText value="You have unsaved changes. Are you sure?" style="FONT-SIZE: large;" />
          </h:panelGrid>
          <h:panelGroup>
             <input type="button" value="OK"
          onclick="#{rich:component('confirmation')}.hide();submit();return false" />
         <input type="button" value="Cancel"
          onclick="#{rich:component('confirmation')}.hide();return false" />
          </h:panelGroup>
       </h:panelGrid>
    </rich:popupPanel>

如果选项卡 4 上的文本框中有任何未保存的数据并尝试单击任何其他选项卡，则它应保留在选项卡 4 中并显示上述确认弹出窗口。

有了这个实现，每当我点击标签时，我的弹出窗口就会打开。

请指出我正在做的错误或对上述情况提出建议。任何帮助表示赞赏

【问题讨论】：

请添加您正在使用的代码。
添加了代码sn-p

标签： jsf richfaces tabpanel popuppanel

【解决方案1】：

如果您不想切换选项卡，请使用 onbeforeitemchange 而不是单击并返回 false。

如果你想延迟切换使用这样的东西：

saveTabs = function(event) {
    oldItem = event.rf.data.oldItem,
    newItem = event.rf.data.newItem;
}

<rich:tabPanel id="tabPanel" onbeforeitemchange="saveTabs(event); return false;" >

当你决定切换使用时：

RichFaces.component("form:tabPanel").__itemsSwitcher().exec(oldItem, newItem);

【讨论】：