Блог

Главная - Вопросы по программированию - пользовательский интерфейс: повтор AJAX

пользовательский интерфейс: повтор AJAX

#ajax #jsf-2 #primefaces #uirepeat

#ajax #jsf-2 #простые интерфейсы #uirepeat

Вопрос:

У нас есть список, который будет отображаться под панелью экрана, где весь код, в котором повторяются поля, хранится в другом файле Facelet. Пока я пытаюсь отобразить изображение на основе действия слушателя для события ajax, у меня возникают некоторые проблемы с обновлением изображения с идентификатором, поскольку JSF генерирует идентификатор с индексом посередине из-за использования <ui:repeat> like so repeatForm:repeat:2:redimage .

Это главная страница:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>Repeat Test Demo</title>
    </h:head>
    <h:body>
        <h:form id="repeatForm">
            <ui:repeat id ="repeat" value="#{listBean.xyzList}" var="repeatListVar">
                <p:panel id="genLiabPanelRender">
                    <ui:include src="MyScreen.xhtml" />
                </p:panel>
            </ui:repeat>
        </h:form>
    </h:body>
</html>

Этот интерфейс может быть повторен в зависимости от размера списка на панели.

MyScreen.xhtml это включаемый файл Facelet:

 <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.prime.com.tr/ui">

    <h:body class="body">
        <h:panelGrid columns="4" border="0" width="90%">
            <h:panelGroup style="display:block;text-align:left;width: 320px">
                <h:selectBooleanCheckbox value="#{repeatListVar.primaryPolicyInd}" />
                <h:outputText value="#{label.primaryCov}" />
            </h:panelGroup>
            <h:panelGroup style="display:block;text-align:left;width: 240px">
                <h:selectBooleanCheckbox value="#{repeatListVar.abcInd1}" />
                <h:outputText value="#{label.commGenLiab}" />
            </h:panelGroup>
            <h:panelGroup style="display:block;text-align:left;width: 180px">
                <h:outputText value=" #{label.eachOccur}" style="text-align:left" />
            </h:panelGroup>
            <h:panelGroup style="display:block;text-align:left;width: 130px">
                <p:inputMask mask="#{label.limitAmtMask}" id="genLiabEachOccAmt"
                        value="#{repeatListVar.a25GLEOAmt}" required="true"
                        style="width: 90px">
                    <f:ajax event="blur" render="redimage" listener="#{repeatListVar.testA25GLEOAmt}"/> 
                </p:inputMask>
                <h:graphicImage id="redimage" url="/images/icons/redIcon.png" rendered="#{repeatListVar.testA25GLEOAmtInd}" />
            </h:panelGroup>

В итоге генерируются идентификаторы <h:outputText> , которые выглядят так: repeatForm:repeat:2:redimage . Но поскольку мы используем <f:ajax> тег, нам нужно только указать "redimage" . Тег берет на себя работу по выяснению реального идентификатора.

Мы вызываем метод в прослушивателе и устанавливаем значение логического индикатора в значение или true или false , которое false по умолчанию. Индикатор используется для визуализации изображения.

Но когда мы используем это <f:ajax> для визуализации изображения на основе значения индикатора, я получаю сообщение об ошибке

Неверно сформированный XML: во время обновления повторная форма: повтор: 2: повторное изображение не найдено

Чем это вызвано и как я могу это решить?

Ответ №1:

Это должно сработать. Я вижу только 2 возможные причины:

  1. Ваш компонент ограничен областью запроса и не сохраняет <ui:repeat> значение. Исправьте задание конструктора компонента и / или поместите компонент в область просмотра.

  2. Ваш вывод HTML синтаксически неверен и поэтому вводит в заблуждение код JavaScript, который отвечает за обновление дерева HTML DOM. Вы не должны использовать <html> и <h:body> во включаемом файле. Он будет дублироваться в выводе HTML. Вы должны использовать его только на главной странице. Страница включения должна выглядеть следующим образом:

     <ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:panelGrid columns="4" border="0" width="90%">
        ...
    </h:panelGrid>
</ui:composition>

    Не дублируйте <html> <h:head> и / или <h:body> там.

Комментарии:

1. У меня возникли проблемы при создании компонента ScopeType.PAGE… Нет ли способа выполнить ui: повторить работу с ScopeType. СЕАНС?

2. хм. Я использую фреймворк Seam. И, как я читал об этом, ui: repeater и AJAX вместе работают только в области просмотра. Однако я не могу изменить свой сеанс области для ПРОСМОТРА… Итак, поведение ajax компонентов primefaces не работает.. Я задам новый вопрос. Спасибо