Primefaces AJAX事件在tabView中不起作用答案

【问题标题】：Primefaces AJAX event not working inside tabViewPrimefaces AJAX事件在tabView中不起作用
【发布时间】：2012-01-03 08:03:32
【问题描述】：

如何在 tabview 中使用 AJAX 侦听器。每当打开选项卡（或在任何地方单击鼠标）时，侦听器都需要执行。我尝试了 event=click,change,blur 等，但没有成功。

<p:tabView activeIndex="#{backingbean.tanIndex}">
<p:ajax  event="?"  listener="#{backingbean.setTabIndex}" />

在 view.jsf 中：

<p:tabView>
    <p:ajax event="tabChange" listener="#{employeeEdit.onTabChange}">

在edit.jsf中：

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

在 backingBean 中：

private int tabIndex;
public int onTabChange(TabChangeEvent event)
  {  
   // Here I'm getting event.getTab().getId() and set it to `tabIndex` property.
  }

编辑时，我需要重定向到视图中处于活动状态的那个选项卡。因此，如果我不更改选项卡，onTabChange() 将不会执行，tabIndex 仅具有其旧值。我正在使用 Primefaces 版本 3.0.M3。

【问题讨论】：

标签： primefaces

【解决方案1】：

看起来这是一个已在最新 3.0.1 版本中修复的 Primefaces 错误： http://forum.primefaces.org/viewtopic.php?f=3&t=17288

【讨论】：

【解决方案2】：

Primefaces 5.1 也有类似的问题

只要我将 tabview 放入表单中，一切正常。但是因为我想在我的选项卡中使用单独的表单，所以我不得不删除 tabview 的周围表单以避免嵌套表单。如果没有周围的表单，则在更改选项卡时不会再触发 ajax 事件。

我的解决方案是使用与 tabview 平行的形式的远程命令。
远程命令由 tabview 元素的 onTabChange 属性触发。在那次调用中，我将索引参数转发到全局请求参数。

<p:tabView id="rootTabMenu" styleClass="tabcontainer" prependId="false" 
        activeIndex="#{sessionData.activeTabIndex}" widgetVar="rootTabMenu"
        onTabChange="tabChangeHelper([{name: 'activeIndex', value: index}])">
    // Tabs...  
</p:tabView>

<h:form id="tabChangeHelperForm">
    <p:remoteCommand name="tabChangeHelper" actionListener="#{sessionData.onTabChange()}" />
</h:form>

在支持 bean 中，我再次从请求参数映射中捕获值并设置活动索引。

public void onTabChange()
{   
    FacesContext context = FacesContext.getCurrentInstance();
    Map<String, String> paramMap = context.getExternalContext().getRequestParameterMap();
    String paramIndex = paramMap.get("activeIndex");
    setActiveTabIndex(Integer.valueOf(paramIndex));
    System.out.println("Active index changed to " + activeTabIndex);
}

希望对你有帮助

【讨论】：

【解决方案3】：

不确定我所写的内容是否适用于 3.0.M3 版。我在 3.0RC2 版本的文档前面有一段关于此的说明和示例代码（章节 TabView，段落 Ajax Behaviour Events）。你应该看看那个。

这是示例代码中最有帮助的部分：

<p:tabView>
    <p:ajax event=”tabChange” listener=”#{bean.onChange}” />
</p:tabView>

【讨论】：

event="tabChange" 在 3.0.M3 上没问题，但是如果我不更改选项卡，AJAX 侦听器将不会执行。所以我在 backing bean 中编写的代码没有任何意义。
我不明白。您能否用更多信息更新您的问题，例如支持 bean 以及您到底想要做什么

【解决方案4】：

Jaron 的答案是 3.0.1 版本修复了这个问题，但我一直到 3.5 都遇到了这个问题，我相信我仍然遇到这个问题。在 Firefox 和 IE 上，选项卡的 javascript 处理程序没有触发 ajax 事件。在谷歌浏览器上，无论出于何种原因，它确实有效。

我今天升级到 Primefaces 5.0，这不再有问题。因此，在最坏的情况下，转到 Primefaces 5.0，你就会一切顺利

【讨论】：