在jsf中单击commandLink时显示隐藏inputTextarea

Question

点击commandLink，inputTextArea 应该出现/渲染。 这是我正在尝试的代码 -

<h:form id="MyForm">
<p:commandLink id="OnUseLink" style="text-align: right; vertical-align: bottom;">
 <p:ajax event="click" render=":MyForm:OnUse" ></p:ajax>
 <h:graphicImage styleClass="rollover imgAligntop" style="border:none;" name="plus.gif" library ="images"/>
</p:commandLink>

<p:inputTextarea id="OnUse" size="15"></p:inputTextarea>
</h:form>

请有人帮忙。

Answer 1

客户端解决方案

要显示/隐藏元素，请在客户端代码中使用纯 JavaScript/jQuery（示例）/其他 JS 库：

<p:commandLink value="Toggle" onclick="$('#MyForm\\:OnUse').toggle('slow'); return false;" />

服务器端解决方案

要启用/禁用，或渲染/不渲染，请在服务器代码中添加适当的标记条件：

<p:commandLink value="Toggle" action="#{bean.action}" update="placeholder" />
<h:panelGroup id="placeholder" layout="block">
    <p:inputTextarea id="OnUse" size="15" rendered="#{bean.rendered}" disabled="#{bean.disabled}" />
</h:panelGroup>

用豆子：

@ManagedBean
@ViewScoped
public class Bean implements Serializable {
    private boolean rendered = true;//getter
    private boolean disabled = false;//getter
    public String action {
        //use some model condition to derive new rendered property value
        rendered = !rendered;//or disabled = !disabled;
        return null;
    }
}

请务必了解客户端/服务器代码的区别。另请注意，JSF 组件的属性设置只能在服务器上完成，否则，如果您决定通过 JavaScript 更改它们，则更改将不起作用。

Answer 2

您不需要 p:ajax 来更新组件。
命令按钮本身有一个 update 属性。
完成此场景的常用方法是将 TextArea 放在 PanelGroup 中。
更新 Panel 组并将 rendered 应用于组件。

并且您不需要在其在相同的表单中时引用其id附加到表单ID [formID:componentId]的组件>。

试试这个：

ToggleBean.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@ViewScoped
public class ToggleBean implements Serializable {

    private boolean renderer=false;

    public boolean isRenderer() {
        return renderer;
    }

    public void setRenderer(boolean renderer) {
        this.renderer = renderer;
    }

    public void buttonAction(){
        renderer = !(renderer);
    }

}

XHTML 页面：

<h:form id="MyForm">
            <p:commandLink id="OnUseLink" style="text-align: right; vertical-align: bottom;" action="#{toggleBean.buttonAction}" value="click" update="usePanelGroup">
                <h:graphicImage styleClass="rollover imgAligntop" style="border:none;" name="plus.gif" library ="images"/>
             </p:commandLink>

            <h:panelGroup id="usePanelGroup">
                <p:inputTextarea id="OnUse" size="15" rendered="#{toggleBean.renderer}" ></p:inputTextarea>
            </h:panelGroup>

        </h:form>

祝你好运。