tabView в PrimeFaces 5.0 не вызывает событие tabChange

Я использую PrimeFaces 5.0 и jsf 2.2. Вот моя страница, содержащая вкладку PrimeFaces

            <h:panelGroup layout="block" style="position:absolute;top:60px;width:100%;">
            <p:tabView id="tabs" activeIndex="#{TabsManagerBean.activeIndex}" onTabShow="$('#tvlistr').click();" dynamic="true"
                value="#{TabsManagerBean.tabs}" var="tab">
                <p:ajax event="tabChange" listener="#{TabsManagerBean.onTabChange}" />
                <p:tab title="#{tab}" titleStyle="width:180px" />
            </p:tabView>
            <p:commandLink id="tvlistr" style="display:none;" action="#{TabsManagerBean.navigate}"/>
        </h:panelGroup>

Мой метод onTabChange

public void onTabChange(TabChangeEvent evt) {
    logger.debug("Tab changed to: {}.", evt.getData());
    selectedTab = (String) evt.getData();
    ...
}

и проблема в том, что этот метод не вызывается. мне нужно, чтобы этот метод вызывался раньше

<p:commandLink id="tvlistr" style="display:none;" action="#{TabsManagerBean.navigate}"/>

Обновлено: вот моя форма h:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
<f:view locale="en">
    <h:head>
        <title>#{appMsg.common_pms}</title>
        <!--  main JavaScript file -->
        <h:outputScript name="js/main.js" />
    </h:head>

    <h:body>
        <h:form id="formId" prependId="false">

            <ui:include src="progressbar.xhtml" />

            <h:panelGroup id="header" layout="block" style="position:absolute;top:0;width:100%;height:90px;">
                <ui:include src="header.xhtml" />
            </h:panelGroup>

            <h:panelGroup layout="block" style="position:absolute;top:60px;width:100%;">
                <p:tabView id="tabs" activeIndex="#{TabsManagerBean.activeIndex}" onTabShow="$('#tvlistr').click();" dynamic="true"
                    value="#{TabsManagerBean.tabs}" var="tab">
                    <p:ajax event="tabChange" listener="#{TabsManagerBean.onTabChange}" />
                    <p:tab title="#{tab}" titleStyle="width:180px" />
                </p:tabView>
                <h:commandLink id="tvlistr" style="display:none;" action="#{TabsManagerBean.navigate}">
                    <f:ajax event="action" />
                </h:commandLink>
            </h:panelGroup>

            <h:panelGroup id="footer" layout="block" style="position:absolute;height:20px;width:100%;bottom:0;background-color: #005696">
                <ui:include src="/templates/version.xhtml" />
            </h:panelGroup>

        </h:form>
    </h:body>
</f:view>


tabview onchange jsf primefaces jsf-2
person slavov    schedule 14.08.2014    source источник
comment
Можете показать нам h:form?   -  person Mathew Rock    schedule 14.08.2014
comment
Вызывается ли TabsManagerBean.activeIndex или вы можете вызвать TabsManagerBean.navigate через командную ссылку?   -  person Smutje    schedule 14.08.2014
comment
@Smutje, TabsManagerBean.activeIndex называется, а TabsManagerBean.navigate тоже называется, только TabsManagerBean.onTabChange не называется   -  person slavov    schedule 14.08.2014
comment
Проверяли ли вы сообщения об ошибках с помощью тега p:message или какие-либо ошибки js на странице?   -  person Emil Kaminski    schedule 14.08.2014
comment
@EmilKaminski, ошибки нет, мне просто нужно перейти к методу onTabChange   -  person slavov    schedule 14.08.2014
comment
@slavov - попробуйте изменить тип аргумента onTabChange на AjaxBehaviorEvent и установить cache="false". Это похоже на ошибку   -  person kolossus    schedule 15.08.2014

Ответы (2)


arrow_upward
1
arrow_downward

У меня была аналогичная проблема с Primefaces 5.1.

Пока я помещал вкладку в форму, все работало нормально. Но поскольку я хотел использовать отдельные формы на своих вкладках, мне пришлось удалить окружающую форму вкладки, чтобы избежать вложенных форм. Без окружающей формы событие ajax больше не срабатывало при смене вкладки.

Мое решение состояло в том, чтобы использовать удаленную команду в форме, параллельной представлению вкладок.
Удаленная команда запускается атрибутом onTabChange элемента tabview. При этом вызове я перенаправил параметр индекса в глобальные параметры запроса.

<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>

В компоненте поддержки я снова поймал значение из карты параметров запроса и установил активный индекс.

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);
}

Надеюсь, что это может помочь вам

person maimArt    schedule 14.11.2014

arrow_upward
0
arrow_downward

Вероятно, это ошибка, связанная с динамически создаваемыми вкладками. Удаление «var» и «value» и представление статических тегов приведет к правильному срабатыванию прослушивателя. Возможно, вы захотите отправить отчет об ошибке.

<p:tabView id="tabs" activeIndex="#{TabsManagerBean.activeIndex}" onTabShow="$('#tvlistr').click();" dynamic="true">            
        <p:ajax event="tabChange" listener="#{TabsManagerBean.onTabChange}" />
         <p:tab title="First tab" titleStyle="width:180px" />
         <p:tab title="Second tab" titleStyle="width:180px" />
 </p:tabView>
person Ali Cheaito    schedule 14.08.2014