JSF 2.0 Как отображать разные h: panelGroup каждый раз, когда элемент выбирается из selectOneMenu

Question

У меня есть selectOneMenu, которое отображает некоторые категории вещей:

<h:selectOneMenu value="#{searchController.selectedCategory}">
        <f:selectItems value="#{searchController.formatedCategories()}" >               
        </f:selectItems>
    </h:selectOneMenu>

Мне нужно отобразить другую группу панелей в зависимости от выбранной категории.Пример (этот должен отображаться, когда выбран первый элемент)

<h:panelGroup id="carInfo">
        <h:outputText value="marka" />
        <h:selectOneMenu>
            <f:selectItems value="#{searchController.formatedCarMarks()}" />
        </h:selectOneMenu>
        <h:outputText value="godina" />
        <h:selectOneMenu>
            <f:selectItems value="#{searchController.formatedYearFrom()}" />
        </h:selectOneMenu>
        <h:selectOneMenu>
            <f:selectItems value="#{searchController.formatedYearTo()}" />
        </h:selectOneMenu>
        <h:outputText value="kms.:" />
        <h:selectOneMenu>
            <f:selectItems value="#{searchController.kmsFrom()}" />
        </h:selectOneMenu>
        <h:selectOneMenu>
            <f:selectItems value="#{searchController.kmsTo()}" />
        </h:selectOneMenu>
    </h:panelGroup>

Я не знаю, как это сделать, потому что мне нужно сделать это без обновления страницы.Есть идеи?Может ли Аякс помочь мне здесь?Если так, то может кто-нибудь сказать мне, пожалуйста?Я совсем не знаком с ним.

Answer 1

Вы сказали «Без обновления страницы», в этом случае вы можете достичь этого двумя способами:
1.AJAX: Вы должны прикрепить идентификатор cartInfo с событием onChange к вашему selectOneMenu
, который будет повторно отображать cartInfo panelGroup
Пример:

<h:selectOneMenu value="#{searchController.selectedCategory}">
        <f:selectItems value="#{searchController.formatedCategories()}" >               
        </f:selectItems>
      <f:ajax event="change" execute="@this" render="cartInfo"/>
    </h:selectOneMenu>

Примечание: у вас должен быть какой-то атрибут в PanelGroup, чтобы установить значение true при событии изменения.

2.JavaScript: Вы можете разместить панель внутри div и снова показать / скрыть div при событии onChange.
Пример:

<h:selectOneMenu value="#{searchController.selectedCategory}" onChnage="javascript: showDivFunction()">

...

<div id="divCartInfo" style="display:none">
<h:panelGroup id="carInfo">
.....
</div>

Answer 2

Это можно легко сделать с помощью ajax:

• Поместите элементы <h:panelGroup> внутрь внешнего <h:panelGroup>
• Вложите <f:ajax> в <h:selectOneMenu> и поместите id внешнего <h:panelGroup> в его атрибут render.
• Присвойте каждому из внутренних <h:panelGroup> элементов атрибут rendered, который оценивается как true, только если выбрана соответствующая категория.

Answer 3

sourceId = null [severity = (ERROR 2), summary = (Один или несколько ресурсов имеют цель 'head', но в представлении не определен компонент 'head'), detail = (Один или несколько ресурсы имеют цель 'head', но в представлении не определен компонент 'head'.)]

Проверьте тег head, возможно, вы пропустили префикс h, напишите h: head, я решил проблему с помощью префикса h.

Answer 4

---

Я очень близок к решению, но что-то не так. Я сделал все, как вы сказали: 1-я и 2-я проблема решены. Проблема в том, что панель carInfo не отображается при выборе категории.

Что-то не так с методом в управляемом компоненте? По какой-то причине он не вызывается. Вот так выглядит мой код Управляемый боб

 public void carSelectedEvent(ValueChangeEvent e) {
    String tmp = (String) e.getNewValue();
    System.out.println("CALLED!!!!!");
    if (selectedCategory.trim().equals("automobili")) {
        carCategorySelected = true;
    } else if (e.getNewValue().toString().contains("NEKRETNINE")) {

    }
}

Выбор страницы JSF

<h:selectOneMenu value="searchController.selectedCategory">
        <f:selectItems value="#{searchController.formatedCategories()}" ></f:selectItems>
        <f:ajax event="change" action="searchController.carSelectedEvent" render="carInfo"/>
    </h:selectOneMenu>

Панель JSF, которая должна отображаться

<h:panelGroup id="carInfo" rendered="searchController.carCategorySelected">
...

Когда я перехожу на страницу, все в порядке, но я замечаю это сообщение в консоли:

ИНФОРМАЦИЯ: ВНИМАНИЕ: FacesMessage (s) были поставлены в очередь, но могут не иметь был отображен. sourceId = null [серьезность = (ОШИБКА 2), сводка = (Один или несколько ресурсы имеют цель «голова», но ни один из компонентов «голова» не был определяется в представлении.), detail = (Один или несколько ресурсов имеют цель 'head', но в пределах вид.)]