How can make commandButton change the url src in ui:include with ajax

Question

I build template with jsf. the template has div that contain an other jsf file ///////////////////////

<h:panelGroup id="mainCenterBox" styleClass="mainCenterBox" layout="block">
       <ui:include  id="centerView" src="messageBoardView.xhtml"/>
</h:panelGroup>

\\\\\\\\\\\\

how can I change the src in ui:include to view an other page when I cleck commandButton with ajax

Hi Thank you Vasil Lukach for your replay I wont to know how can I send parameter form commandButton to the bean and below is my code

\\\\\\\\\\\\\ The Bean File
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named("urls")
@RequestScoped

public class URLPagesBean 
{
    private String urlSRC = "";

    public String getUrlSRC() {
        return urlSRC;
    }

    public void setUrlSRC(String urlSRC) {
        this.urlSRC = urlSRC;
    }

    public String getURL()
    {
        String url = "";
        if(urlSRC == "page1" || urlSRC == "" || urlSRC == null)
        {
            url = "page1.xhtml";
        }
        else if (urlSRC == "page2")
        {
            url = "page2.xhtml";
        }
       return url;
    }
}
/////////////

\\\\\\\\\\\\\\\\\\\\\\ The Index file

<h:body >
    <h:panelGroup layout="block" styleClass="mainContentBox">
        <h:panelGroup layout="block" styleClass="mainTopBox">
            <h:panelGroup layout="block" styleClass="logoBox"></h:panelGroup>
        </h:panelGroup>
        <h:form id="subMenuForm">
        <h:panelGroup layout="block" styleClass="mainLiftBox">
                <h:panelGroup id="msgBoard" layout="block" styleClass="mainMenuButtons">Message Board
                    <h:panelGroup layout="block" styleClass="subMenuBox">
                        <h:commandButton id="showMsgBoard" styleClass="subMenuButtonCommand" value="Page1"/>
                    </h:panelGroup>
                </h:panelGroup>
                <h:panelGroup layout="block" styleClass="mainMenuButtons">Registrations Book
                        <h:panelGroup layout="block" styleClass="subMenuBox">
                            <h:commandButton id="registrInternalApprov" styleClass="subMenuButtonCommand" value="Page2">
                                <f:ajax render="mainCenterBox" />
                            </h:commandButton>     
                        </h:panelGroup>
                    </h:panelGroup>
          </h:panelGroup>
            <h:panelGroup id="mainCenterBox" styleClass="mainCenterBox" layout="block">
                    <ui:include  id="centerView" src="#{urls.URL}"/>
            </h:panelGroup>
        </h:form>
    </h:panelGroup>
</h:body>

Answer 1

In template you can use ui:insert, for example

<ui:insert name="footer">
    <ui:include src="/WEB-INF/template/footer.xhtml" />
</ui:insert> 

In your view you can redefine it: <ui:define name="footer"></ui:define> (no footer) or include other file.

If you need support ajax, then you can use ui:fragment. It has rendered attribute which can be used for displaying content (you can have more than 1 fragment).