Хобрук: Ваш путь к мастерству в программировании

RichFaces: отображение всплывающего окна с уведомлением при успешном выполнении операции AJAX.

В настоящее время мы разрабатываем интернет-магазин B2B на основе Java EE 5, JSF, Facelets и RichFaces. До сих пор технология действительно работала очень хорошо, но теперь я столкнулся с небольшой проблемой, которую просто не могу понять, как решить:

Товары представлены в виде таблиц, где каждый товар можно добавить в корзину, нажав на маленькую иконку в конце строки. Добавление товара осуществляется через AJAX, чтобы избежать полной перезагрузки страницы. Это работает без каких-либо проблем, просто используя h:dataTable и a4j:commandLink для вызова метода действия, который добавляет выбранный продукт в корзину. Даже повторный рендеринг суммы корзины, всегда видимой на боковой панели, работает правильно.

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

Это то, что я думаю, должно работать (css-классы popup_message и popup_content заставляют поле плавать над положением, в котором находится его разметка):

<h:dataTable ....>
    ...
    <h:column>
        <a4j:commandLink action="...">
            <rich:effect event="oncomplete" targetId="addedMessage"
                 type="Appear" />
            <rich:effect event="oncomplete" targetId="addedMessage"
                 type="Appear" params="{delay:3.0, duration:1.0}" />
        </a4j:commandLink>

        <a4j:outputPanel id="addedMessage" styleClass="popup_message"
            style="display: none">
            <a4j:outputPanel layout="block" styleClass="popup_content">
                <h:outputText value="Item added!" />
            </a4j:outputPanel>
        </a4j:outputPanel>
    </h:column>
</h:dataTable>

К сожалению, он вообще не отображает коробку. Если я изменю event эффекта «Появление» на onclick, он будет работать почти так, как ожидалось. Он сразу же отображается при нажатии на значок и исчезает через 3 секунды после завершения операции AJAX. Но я не хочу, чтобы она появлялась сразу после клика, потому что было бы неправильно указывать, что товар добавлен в корзину, когда на самом деле операция еще даже не началась. Это становится еще более важным, когда я хочу указать на какую-то ошибку или хочу включить в поле некоторую информацию, относящуюся к элементу, которая доступна только после добавления элемента.

Итак, есть идеи, как это сделать? А почему добавление двух эффектов на одно и то же событие не работает?

(Я уже просмотрел пример эффекта из живой демонстрации RichFaces. Примеры работают почти так же, за исключением того, что они добавляют второй эффект с явным указанием атрибута for. Но даже это не работает для меня.)

Обновление: я пытался использовать для этой цели rich:toolTip, который на самом деле кажется довольно гибким. Но независимо от того, что я делаю, я не могу ничего прикрепить к событию "oncomplete" (я также пробовал просто "complete") события a4j:commandLink, кроме одного эффекта... кажется, что есть какая-то ошибка/недокументированное поведение в отношении этого событие. Я только что нашел этот отчет об ошибке: RF-3427


Ответы:


1

вы можете попробовать rich:notify для этого http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=notify&skin=blueSky

24.10.2013

2

Вы пробовали rich:status ? Я не буду публиковать кусок кода. Я думаю, что с документами все будет в порядке.

http://livedemo.exadel.com/richfaces-demo/richfaces/status.jsf

24.10.2013

3

Ваш определяющий targetId вне параметров. Что вы хотите сделать, это:

<rich:effect event="oncomplete" type="Appear" params="targetId:'addedMessage',delay:3.0, duration:1.0" />

Попробуйте, и я думаю, что это сработает.

23.03.2009
  • Не знаю, пробовал ли я это уже, но посмотрим. Если это работает, документы RichFaces нуждаются в серьезной доработке... 24.03.2009
  • Пробовал, но не работает, но все равно спасибо. Я просмотрел сгенерированный html/javascript, и, как кажется, для каждого события может быть только один богатый: эффект (последний эффект переопределяет любые ранее определенные эффекты для этого события). Теперь я хотел бы знать, как работает пример живого демо... 24.03.2009
  • Новые материалы

    Создание кнопочного меню с использованием HTML, CSS и JavaScript
    Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..

    Внедрите OAuth в свои веб-приложения для повышения безопасности
    OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..

    Классы в JavaScript
    class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..

    Как свинг-трейдеры могут использовать ИИ для больших выигрышей
    По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..

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

    Обзор: Машинное обучение: классификация
    Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..

    Разработка расширений Qlik Sense с qExt
    Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..