Adding Dynamic content using JSF

Question

hi chums I am new to JSF and I got stuck in JSF problem.I want to add dynamically my content in my JSF page.My requirment is that I have one facelets which I have to add in my page after some event.

My page contains

two fields 'user name' and 'answer'
and
two buttons 'login' and 'recover password'

Facelet contains

a field and just a button

Now I want that when I run my this page it should show only Page contents(described above)
and if user press the button 'recover password' then it should show the facelet under the components of page on the same page mean after pressing the button , page could include facelet.
But now when I run my code it show both as I haven't put any logic to add 2nd facelet dynamically.
Here a patch of my code given below

 <h:inputText id="txtLogin" styleClass="textEntry" required="true" requiredMessage="Username is required."> 
                    </h:inputText>
<h:inputText id="answer" styleClass="textEntry" autocomplete="off" required="true" requiredMessage="Answer is required."></h:inputText>
                                    <h:commandButton id="btnSave" value="Save" styleClass="formbutton" onclick="btnSave_Click" />
                    <h:commandButton id="btnRecover" value="Recover" styleClass="formbutton" onclick="btnRecover_Click"/>

Now I want when this btnRecover_click click then it include this facelet or run this code

<div class="divPadding">
            <ui:include id="passrecov" src="ucPasswordRecovery.xhtml" rendered="false"/>
        </div>

Keep in mind that I have to do this with JSF and don't want to do this with JavaScript
Thanks

You can use the "rendered" attribute to get the desired behavior, no need of javascript as suggested in the answer. To make it work, you should wrap the <ui:include> inside an ui container component like <h:panelGrid>, change the rendered value in server and rerender this container, then your ui will be displayed — Luiggi Mendoza
should I do this " <h:panelGrid rendered="false"> <div class="divPadding"> <ui:include id="passrecov" src="ucPasswordRecovery.xhtml" rendered="false"/> </div> <h:panelGrid> " But it still didn't work :( — khan

Luiggi Mendoza Luiggi Mendoza · Accepted Answer · 2012-08-03T07:08:35

I'll post a sample using with 1 column, remember that you could use another ui container.

<h:form>
    <h:panelGrid id="login">
        <h:panelGrid>
            <h:inputText id="txtLogin" styleClass="textEntry" required="true"
                requiredMessage="Username is required."> 
            </h:inputText>
            <h:inputText id="answer" styleClass="textEntry" autocomplete="off"
                required="true" requiredMessage="Answer is required.">
            </h:inputText>
            <h:commandButton id="btnSave" value="Save" styleClass="formbutton"
                onclick="btnSave_Click" />
            <h:commandButton id="btnRecover" value="Recover" styleClass="formbutton"
                action="#{loginBean.showPassRecovery}" />
        </h:panelGrid>
    </h:panelGrid>

    <h:panelGrid id="passRecovery">
        <h:panelGrid rendered="#{not loginBean.loginEnabled}">
        <ui:include id="passrecov" src="ucPasswordRecovery.xhtml" />
        </h:panelGrid>
    </h:panelGrid>
</h:form>

And your managed bean:

@ManagedBean
@ViewScoped
public class LoginBean {
    private boolean loginEnabled;

    public LoginBean() {
        loginEnabled = true;
    }

    //getters and setters...

    //this method will return void, so the page will be refreshed with the new
    //loginEnabled value. this time the components inside "login" panelGrid won't be rendered
    //but "passRecovery" panelGrid components will.
    public void showPassRecovery() {
        loginEnabled = false;
    }
}

Adding Dynamic content using JSF

My page contains

Facelet contains

1 Answers