Блог

Главная - Вопросы по программированию - Проблема с f: ajax в JSF, требующий двойного щелчка для выполнения

Проблема с f: ajax в JSF, требующий двойного щелчка для выполнения

#ajax #jsf-2

#ajax #jsf-2

Вопрос:

У меня такая же проблема в нескольких местах, и я становлюсь довольно расстроенным.

Всякий раз, когда я пытаюсь запустить событие ajax, для этого всегда требуется два щелчка, первый просто ничего не делает.

Я попытался выполнить первый щелчок, а затем вручную обновить сайт, но опять же, ничего не происходит. Для запуска события всегда требуется два щелчка.

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

Основная часть

 <body>
    <h:outputScript library="js" name="topMenuJS.js" />


    <div class="topMenu">

        <f:ajax execute="pageNavForm" render=":currentMainContent">
            <h:form id="pageNavForm">
                <h:commandLink  styleClass="selector"   rendered="#{viewErrandsBean.userID.name != null}"   action="#{renderHandler.showCreateIssue()}" value="Create errand" />
                <h:commandLink  styleClass="selector"   rendered="#{viewErrandsBean.userID.name != null}"   action="#{renderHandler.showIssue()}"       value="View errand" />
                <h:commandLink  styleClass="selector"   rendered="#{viewErrandsBean.userID.admin}"          action="#{renderHandler.showCreateUser()}"  value="Create user" />
                <h:commandLink  styleClass="lastSelector"                                                   action="#{renderHandler.showLogin()}"       value="Login" />
            </h:form>
        </f:ajax>

        <div style="clear:both;" />

    </div>

    <h:panelGroup layout="block" id="currentMainContent">

        <h:panelGroup rendered="#{renderHandler.loginPanel}" id="loginPanel"
            layout="block">

            <ui:include src="/content/login/login.xhtml">
                <ui:param name="renderID" value=":pageNavForm" />
            </ui:include>
        </h:panelGroup>
     </h:panelGroup>
</body>

И login.xhtml

 <!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:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition>

<h:outputStylesheet library="css" name="loginPageCSS.css" />

    <h:panelGroup class="centerBox">
        <h:form>
            <table>
                <tr>
                    <td>Username</td>
                    <td><h:inputText value="#{viewErrandsBean.loginName}" /></td>
                </tr>
                <tr>
                    <td>Password</td>
                    <td><h:inputSecret value="#{viewErrandsBean.loginPass}" /></td>
                </tr>
                <tr>
                    <td>
                    <h:commandButton value="Login" action="#{viewErrandsBean.authenticateUser()}" >
                        <f:ajax execute="@form" render="#{renderID}" />
                    </h:commandButton>
                    </td>
                </tr>
            </table>
        </h:form>
    </h:panelGroup>

</ui:composition>
</html>

Заранее спасибо 🙂

————РЕДАКТИРОВАТЬ————

Я полагаю, что нашел корень проблемы, но я не уверен, как я могу это исправить или почему это существует.

Проблема с требованием двойного щелчка возникает только после рендеринга компонента с этим атрибутом «Rendered = ‘boolean'». Или даже более конкретно, только после перехода от «Rendered = false» к «Rendered = true».

Следующий код работает так, как задумано, если для отображения задано значение true.

 <h:panelGroup rendered="#{renderHandler.loginPanel}" id="loginPanel" layout="block">

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

1. Что-нибудь еще прилагается? Что-нибудь еще мешает коду в браузере? Нравится просто небольшой эффект наведения в javascript или прикрепленном файле .js?

Ответ №1:

Вот ответ, который вы не искали: вместо того, чтобы использовать «rendered», чтобы скрыть вашу форму входа, вместо этого используйте CSS, чтобы скрыть ее, и javascript, чтобы показать ее. Вы получите лучшее время отклика для формы, чем необходимость возвращаться на сервер только для того, чтобы решить показать форму. Я понимаю, что это может не сработать в других ситуациях, о которых вы не упомянули.

Я полагаю, что вы работаете в серой зоне (для большинства из нас) при взаимодействии между JSF 2 и Facelets. Когда вы запрашиваете страницу во время ajax или обратной отправки для отображения нового элемента в композиции, вы добавляете к дереву компонентов JSF, а не являетесь его частью, когда оно было создано с нуля. Вот почему вы видите правильное поведение, когда вы устанавливаете значение rendered в true.

В сочетании с передачей параметров между частями композиции я бы не гарантировал, что renderID установлен на то, что вы думаете, когда вы впервые нажимаете login.

Вы должны иметь возможность подтвердить вывод значения renderID с помощью h:outputText.