一个页面包含富脸标签面板,并有4个标签。在其中一个标签中,我有文本框和保存按钮。不保存数据如果我移动到另一个选项卡,它应该显示弹出窗口说未保存的数据并阻止导航。
我尝试使用rich:tabPanel的不同java脚本加载属性来调用弹出窗口,但没有达到目的。
这是代码
<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中,并显示如上所示的确认poupup。
使用此实现,只要我点击标签,我的弹出窗口就会打开。
请指出我正在做的错误或对上述情况提出建议。 任何有用的帮助
答案 0 :(得分:0)
如果您不希望切换标签,则不要点击使用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);