0

On click of a commandLink, inputTextArea should appear/render. Here is my code what I am trying - 

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

Somebody please help.

Subodh
  • 19
  • 1
  • 7

2 Answers2

1

Client side solution

To show/hide element use plain JavaScript / jQuery (example) / other JS library in the client code:

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

Server side solution

To enable / disable, or render / not render, add appropriate tag condition in the server code:

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

with 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;
    }
}

Be sure to understand the client/server code distinction though. Also note that setting attributes of JSF components is to be done solely on the server, otherwise, if you decide to change them via JavaScript, the changes won't have any effect.

skuntsel
  • 11,624
  • 11
  • 44
  • 67
  • I would like to do something like as you suggest in 2nd option. But i didn't get what 'neam' is referring to. "bean.disabled" bean is managed bean i suppose. – Subodh Jul 24 '13 at 08:52
  • It was also supposed to be bean. You need to provide for an action method that will set the rendered property to true, or false, basing on some model condition. – skuntsel Jul 24 '13 at 09:21
  • I tried both your options but it is not working. I m using jsf2.0. there is no model condition. All I need is on commandlink click, the inputTextarea should appear. – Subodh Jul 24 '13 at 09:51
  • As to the client side solution the problem was with " symbol: of course it must be ' instead (see answer update). As to the server side solution a model condition is a constellation of bean properties that should indicate that component in question should be rendered, or disabled. Those conditions may change after form submit, but those attributes of components should ultimately depend on bean properties (like component doesn't have to be rendered in case user doesn't have a particular role, or component must be disabled unless some form inputs are filled in, etc.). – skuntsel Jul 24 '13 at 10:19
0

You don't need p:ajax to update the component.
There is a update attribute on Command Button itself.
The usual way to accomplish this scenario is to put TextArea in PanelGroup.
Update Panel group & apply rendered to the components.

And you don't need to refer the components with their id attached to form ID [formID:componentId] when its in same form.

Try This :

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

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

Good luck.

Kishor Prakash
  • 8,011
  • 12
  • 61
  • 92
  • 1
    Your bean is in the wrong scope. If the enduser has the same view opened in multiple browser windows/tabs in the same session, they are all affected by a single property! http://stackoverflow.com/questions/7031885/how-to-choose-the-right-bean-scope/ – BalusC Jul 24 '13 at 14:06
  • @BalusC : I think it fixed now. And Thanks for that other suggestion along with down-vote, It won't happen again in any of my posts. – Kishor Prakash Jul 25 '13 at 03:58