Как сохранить состояние DOM, управляемое jQuery/javasscript, при повторном рендеринге компонентов richfaces/jsf?

У меня проблемы с рендерингом некоторых компонентов в моем приложении jsf. Проблема в том, что когда я использую jQuery на своей странице, например, скрываю кнопку. Когда страница перерисовывается, кнопка возвращается к своей первоначальной форме, которая должна быть скрыта.

Есть ли у кого-то опыт в этом вопросе, который сможет помочь мне найти подходящее решение, или здесь есть какие-то принципы или методы, которые я слепо неправильно понял?

Спасибо. :)


jquery jsf-2 richfaces
person Ellie Fabrero    schedule 19.01.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

Не используйте jQuery для управления DOM, а вместо этого используйте JSF Ajax для управления DOM.

E.g.

<h:form>
    <h:selectBooleanCheckbox value="#{bean.checked}">
        <f:ajax render="buttons" />
    </h:selectBooleanCheckbox>

    <h:panelGroup id="buttons">
        <h:commandButton value="Submit" rendered="#{bean.checked}" />
    </h:panelGroup>
</h:form>

Смотрите также:

person BalusC    schedule 19.01.2012
comment
Спасибо за ответ, мастер, это было очень полезно. :) - person Ellie Fabrero; 24.01.2012

arrow_upward
1
arrow_downward

Мы столкнулись с той же проблемой в IceFaces 1.8.2. Проблема в том, что приложение на стороне сервера не знает о ваших изменениях в DOM на стороне клиента. Мы решили эту проблему за нас, применив классы маркеров к элементам, которыми мы хотели манипулировать с помощью jQuery. Мы использовали общий обратный вызов на стороне клиента для обновлений DOM (onAsynchronousReceive в IceFaces 1.8.x), чтобы повторно применить наш скрипт.

К сожалению, не для RichFaces:

<h:outputText value="my text" styleClass="doSomethingWithThisAfterDOMUpdate" />

И где-то в разметке вашей страницы (мы используем jQuery, привязанный к j вместо $):

<script type="text/javascript">

    // do somehting the first time
    j(".doSomethingWithThisAfterDOMUpdate").css('display', 'none'); 

    Ice.onAsynchronousReceive("document:body", function() {

        // do it again after each asynchronous receive
        j(".doSomethingWithThisAfterDOMUpdate").css('display', 'none');
    });
</script>

НО: будьте осторожны, применяя прослушиватели к элементам в обратном вызове. Если элемент не заменяется, вы назначаете тех же слушателей второй, третий, четвертый раз...

В JSF2 AJAX стал частью спецификации. Вы можете взглянуть на метод на стороне клиента addOnEvent, который может быть общей частью Ice.onAsynchronousReceive.

Однако не все фреймворки компонентов, по-видимому, используют реализацию спецификации на стороне клиента для выполнения своих обновлений DOM (например, PrimeFaces).

Но я думаю, что принцип становится ясным. Вам нужно перезапустить скрипт после замены элемента DOM :)

person Tim Brückner    schedule 19.01.2012
comment
Поскольку я могу комментировать только свои собственные ответы: BalusC прав, если есть способ JSF сделать это, вы должны его использовать. Например, почти каждый компонент имеет флаг рендеринга, поэтому использование jQuery для отображения и скрытия элементов не имеет особого смысла. Возможно, мне следовало выбрать другой пример. Тем не менее, есть некоторые случаи, когда это выходит за рамки сокрытия и отображения вещей, когда компоненты не предоставляют всех необходимых вам функций. Затем у вас есть возможность исправить вещи в DOM, например, добавить атрибут заголовка к элементу, если сам пользовательский компонент не отображает его... - person Tim Brückner; 19.01.2012
comment
Спасибо, сэр, это было очень полезно..:) - person Ellie Fabrero; 24.01.2012