Переключить рендеринг изображения с помощью AJAX?

Question

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

Страница Facelets:

 </h:form>
    <h:commandButton value="test" action="#{bean.toggleStatus}">
        <f:ajax render="image"/>
    </h:commandButton>
    <h:graphicImage id="image" value="status.gif" rendered="#{bean.status}"/>
 </h:form>  

Класс поддержки:

    class Bean {

        private boolean status = false;

        public void toggleStatus() {
            status = true;
        }

        //getter, setter
    }

Есть идеи, что здесь может быть не так?

Answer 1

Вы не можете ajax-обновить элемент HTML, который не отображается на стороне HTML. Оберните его в компонент, который всегда отображается и обновите его.

Например

<h:form>
    <h:commandButton value="test" action="#{bean.toggleStatus}">
        <f:ajax render="image"/>
    </h:commandButton>
    <h:panelGroup id="image">
        <h:graphicImage value="status.gif" rendered="#{bean.status}"/>
    </h:panelGroup>
</h:form>

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

• Зачем мне вкладывать компонент с render ="#{some}" в другой компонент, когда я хочу обновить его с помощью ajax?