Как внедрить одну страницу JSF2 в другую с помощью jQuery AJAX

Question

Я использую функцию jQuery .load для загрузки одной страницы JSF в другую.

Это работает очень хорошо, пока загруженная страница JSF не использует некоторые функции AJAX.Когда это происходит, AJAX родительской страницы JSF перестает работать.Фактически, после того, как две страницы объединены, та страница, которая называется AJAX, называется следующей, которая продолжает работать.Другая страница перестает работать.Если я сначала использую родительскую страницу, ребенок разрывается.Если я сначала использую ребенка, родитель сломается.

Я что-то не так делаю?Я предполагаю, что JSF не предназначен для такого поведения, и это нормально, но тогда как мне поступить так, как я хочу?

По сути, у нас есть страница отчета.Когда пользователь щелкает ссылку на отчет, мы хотим, чтобы отчет динамически загружался на существующую страницу.Таким образом, пользователь не будет обновлять страницу.Это довольно ловкое поведение, НО, очевидно, не идеально из-за разрывов страниц.

Я полагаю, что я мог бы сделать это со страницей, содержащей каждый отчет в выходной панели, а затем определить, какой из них будет отображен на основе значенияв бэк-бине, но я могу видеть много случаев, когда я хотел бы иметь возможность «вставлять» одну страницу в другую (например, для динамических диалогов), и было бы ужасно иметь необходимость хранить все в одном гигантском шаблоне.

Кто-нибудь еще сталкивался с такой проблемой?Как ты решил это?

Answer 1

Не использовать jQuery.load().Он вообще не учитывает состояние просмотра JSF, поэтому все формы не будут работать.Вместо этого используйте атрибуты <f:ajax> и rendered.Вот базовый пример:

<h:form id="list">
    <h:dataTable value="#{bean.reports}" var="report">
        <h:column>#{report.name}</h:column>
        <h:column>
            <h:commandLink value="Edit" action="#{bean.edit(report)}">
                <f:ajax render=":edit" />
            </h:commandLink>
        </h:column>
    </h:dataTable>
</h:form>

<h:form id="edit">
    <h:panelGrid columns="3" rendered="#{not empty bean.report}">
        <h:outputLabel for="name" value="Name" />
        <h:inputText id="name" value="#{bean.report.name}" required="true" />
        <h:message for="name" />

        ...

        <h:panelGroup />
        <h:commandButton value="save" action="#{bean.save}" />
        <h:messages globalOnly="true" layout="table" />
    </h:panelGrid>
</h:form>

Вы можете при необходимости разделить содержимое на <ui:include>.