Как визуализировать ах:panelGroup внутри пользовательского интерфейса: повторить на основе значения из JavaScript?

Я получаю логическое значение в <h:inputText> но я не могу найти способ получить это в rendered-атрибут <h:panelGroup>, Я также не вижу способа использовать значение bean-компонента, потому что для каждой итерации он нужен сам по себе.

это мой код JSF:

<ui:repeat var="item" value="#{itemBean.items}" id="iterateItems" varStatus="iteration">
    <script type="text/javascript">         
        showItem("#{item.id}","#{iteration.index}");
    </script>
    <h:inputText id="rendered"/>
    <h:panelGroup layout="block" rendered="???">
        Iteration #{iteration.index} rendered
    </h:panelGroup>
</ui:repeat>

это мой JavaScript:

function showItem(item,iteration){
    if((clientSideValue==something){
        document.getElementById("iterateItems"+":"+iteration+":"+"rendered").value = true;
    }
    else{
        document.getElementById("iterateItems"+":"+iteration+":"+"rendered").value = false;
    }
}
Источник

3 ответа

Решение

JavaScript работает на стороне клиента и работает с деревом HTML DOM, которое извлекается со стороны сервера (и в вашем конкретном случае создается JSF). Таким образом, JavaScript ожидает, что нужный HTML-элемент, который вы хотите показать / скрыть, всегда присутствует в дереве HTML DOM.

JSF работает на стороне сервера и создает HTML-код на основе дерева компонентов JSF ("представление"). Когда rendered Атрибут компонента JSF оценивается как falseHTML-код не будет создан для данного компонента, и, таким образом, ничто не окажется в дереве HTML DOM, и, следовательно, JavaScript не сможет выбрать ничего document.getElementById(),

Ваше конкретное функциональное требование, для которого вы думали, что это будет решением, неясно, поэтому трудно предложить правильное решение для вашей конкретной проблемы. Но при условии, что вы абсолютно уверены, что показ / скрытие должно выполняться на стороне клиента (с помощью JavaScript), а не на стороне сервера (с помощью JSF), тогда вы должны использовать CSS' display свойство для которого вы можете переключаться между block а также none,

Вот простой базовый пример, предполагающий, что вы хотите сначала скрыть его:

<ui:repeat var="item" value="#{itemBean.items}" id="iterateItems" varStatus="iteration">
    <script type="text/javascript">         
        showItem(#{iteration.index});
    </script>
    <h:inputText id="rendered" />
    <div id="foo#{iteration.index}" style="display:none">
        Iteration #{iteration.index} shown
    </div>
</ui:repeat>

с

function showItem(index) {
    var div = document.getElementById("foo" + index);

    if (someCondition) {
        div.style.display = "block"; // Show it.
    } else {
        div.style.display = "none"; // Hide it.
    }
}
Источник

Не смешивайте серверный скрипт с клиентским скриптом!

Просто используйте EL, как хотите:

<ui:repeat var="item" value="#{itemBean.items}" id="iterateItems" varStatus="iteration">
    <h:panelGroup layout="block" rendered="#{item.id le 1}">
        Iteration #{iteration.index} rendered
    </h:panelGroup>
</ui:repeat>
Источник

Это невозможно: JSF-теги, особенно отображаемые атрибуты, используются во время RenderResponse Фаза JSF. Когда окончательный HTML был сгенерирован, больше нет rendered Атрибут - HTML-элемент, содержащий этот атрибут, отображается или нет.

Таким образом, если вам нужно что-то сделать в зависимости от значений клиента, вам нужно будет перенести это значение на ваш сервер.

Обходной путь должен был бы установить свойство css display:none, Но обратите внимание, что это просто не будет отображать элемент. Это все еще доступно в источнике страницы.

Если вы работаете с Javascript, вам действительно стоит взглянуть на окончательный исходный код. Теги JSF разрешаются и даже автоматически генерируемые идентификаторы, такие как 23:58:23 не всегда одинаковы для определенного элемента.

Источник
Другие вопросы по тегам