在jsf中单击commandLink时显示hide inputTextarea

Question

单击commandLink时，inputTextArea应出现/render。这是我正在尝试的代码-

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

带bean：

@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来更新组件
命令按钮本身有一个更新属性
完成此场景的常用方法是将TextArea放在PanelGroup中
更新面板组&将渲染应用于组件。

当是相同的形式时，不需要引用其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>

祝你好运。