我试图实现的目标
我有一个 rich:tabPanel
与 switchType="client"
其中一个选项卡设置了 switchType
至 ajax
因为加载它的数据是一项昂贵的操作。当我单击此 Ajax 选项卡时,我希望将其标题更改为 Loading... 以表明该单击已被识别。加载完成后,标题应切换回 Ajax Tab。
[Client Tab] [Ajax Tab]
<click on 'Ajax Tab'>
[Client Tab] [Loading...]
<wait...>
[Client Tab] [Ajax Tab]
<click on 'Client Tab'>
[Client Tab] [Ajax Tab]
问题描述
实际上,上面描述的大部分内容都按预期工作,我唯一的问题是,当我从 Ajax 选项卡导航到任何其他选项卡时,Ajax 选项卡的标题切换回正在加载...:
[Client Tab] [Ajax Tab]
<click on 'Ajax Tab'>
[Client Tab] [Loading...]
<wait...>
[Client Tab] [Ajax Tab]
<click on 'Client Tab'>
[Client Tab] [Loading...]
研究
我在 RichFaces' JIRA 中发现了一个问题但此问题自 3.2.1 版起已修复。此外,我已经用谷歌搜索了几个小时,但没有找到任何类似的问题。
环境
代码(减少)
JSF
<ui:composition template="WEB-INF/templates/default.xhtml">
<ui:define name="content">
<h:form id="form">
<rich:tabPanel id="tabPanel" switchType="client">
<rich:tab id="clientTab">
<f:facet name="header">
<h:outputText value="Client Tab" />
</f:facet>
<h:outputText value="Foo" />
</rich:tab>
<rich:tab id="ajaxTab" switchType="ajax" status="ajaxTabStatus">
<f:facet name="header">
<a4j:status id="ajaxTabStatus">
<f:facet name="start">
<h:outputText value="Loading..." />
</f:facet>
<f:facet name="stop">
<h:outputText value="Ajax Tab" />
</f:facet>
</a4j:status>
</f:facet>
<h:outputText value="#{bean.value}" />
</rich:tab>
</rich:tabPanel>
</h:form>
</ui:define>
</ui:composition>
Ajax 选项卡的支持 Bean
@ManagedBean
@ViewScoped
public class Bean implements Serializable {
private static final long serialVersionUID = -8405248908693334970L;
private String value = "noValue";
private static final Logger log = LoggerFactory.getLogger(Bean.class);
@PostConstruct
public void init() {
log.info("Init bean.");
value = getDummyValueWithFakeDelay();
}
public String getValue() {
log.info("Get value.");
return value;
}
private String getDummyValueWithFakeDelay() {
try {
Thread.sleep(1000);
} catch (InterruptedException ex) {
}
return DateFormat.getTimeInstance().format(new Date());
}
}
更新 1:
我发现
<rich:someTag ... status="someStatus" />
的标识符(我的意思是您指定的标识符,如 a4j:status
)不是它的 id
但它的 name
属性。所以我的 a4j:status
仅针对该页面上的每个 Ajax 请求。给它一个名字并使用这个命名状态不起作用,因为现在什么也没有发生。<rich:tab id="ajaxTab" switchType="ajax" status="ajaxTabStatus">
<f:facet name="header">
<a4j:status id="ajaxTabStatus" name="ajaxTabStatus">
<f:facet name="start">
<h:outputText value="Loading..." />
</f:facet>
<f:facet name="stop">
<h:outputText value="Ajax Tab" />
</f:facet>
</a4j:status>
</f:facet>
<h:outputText value="#{bean.value}" />
</rich:tab>
更新 2:
我还找到了另一种方法,使用
onbegin
和 oncomplete
带有一些代码的属性,例如:<rich:tab id="ajaxTab" switchType="ajax"
onbegin="#{rich:component('ajaxTab')}.?"
oncomplete="#{rich:component('ajaxTab')}.?">
好吧,正如您所看到的,我还没有找到一种方法来操作选项卡标题(而且我没有找到任何有用的文档来说明我可以用 Rich:component 做什么)。
最佳答案
我不是很熟悉RichFaces 4.x
.然而,这是如何在 RichFaces 3
中做到的.
假设你是这样的tabPanel
.
<h:form>
<rich:tabPanel>
<rich:tab label="Client Tab" switchType="client">
Tab - client
</rich:tab>
<rich:tab label="Ajax Tab" id="ajaxTab" switchType="ajax" ontabenter="changeLabel(event)">
<h:outputText value="#{bean.value}" />
</rich:tab>
</rich:tabPanel>
</h:form>
请注意
ontabenter
ajax 选项卡中的事件。现在您的脚本将是这样的。
<script>
function changeLabel(tabId) {
var tabLabel = event.target || event.srcElement;
tabLabel.innerHTML = 'Loading...';
}
</script>
我不太了解
RF4
.然而在 RF3
不需要添加 oncomplete
事件到选项卡。
关于jsf-2 - RichFaces tabPanel 与 switchType ajax 和 a4j :status,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12673980/