使用ajax切换图像渲染？ [复制]答案

【问题标题】：Toggle rendering of image with ajax? [duplicate]使用ajax切换图像渲染？ [复制]
【发布时间】：2012-09-26 11:26:02
【问题描述】：

如何根据按钮触发的布尔状态变量显示图像？我不希望重新加载整个页面，而只想重新加载那个特定的图像。

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
    }

知道这里可能出了什么问题吗？

【问题讨论】：

尝试在 h:graphicImage 周围放置一个占位符并重新渲染该占位符而不是图像本身。将渲染属性保留在 h:graphicImage 上。
是的，我看到的图像没有渲染属性。如果我用<h:panelGroup> 包围它，它也不起作用

标签： ajax jsf facelets

【解决方案1】：

您不能对未呈现到 HTML 端的 HTML 元素进行 ajax 更新。将其包装在始终呈现并更新它的组件中。

例如

<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>

另见：

Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?

【讨论】：