style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5164839828746352"
data-ad-slot="7563230308">

cargar jsf en div

Resulta que tengo una pagina principal en jsf2 y tengo maquetado para dos columnas esa pagina,
del lado izquierdo tengo un menu y quisiera saber como le ago para que cuando de click en el menu me muestre otra pagina jsf 2 pero en la misma pagina del lado derecho..

Ya pude realizarlo con jquery, pero la idea es no utilizarlo, por que algunos componentes jsf no funcionan correctamente si lo utilizo.

Gracias

esta es mi pagina pero con jquery y quisiera hacerlo sin el..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <link rel="stylesheet" type="text/css" href="../css/style.css"/>
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                <title>SII-SD</title>
                <script type="text/javascript">
                    function doAjax(url){
                        $('#contenido').load(url);
                    }
                </script>
            </f:facet>
        </h:head>

        <h:body>

            <p:layout fullPage="true">

                <p:layoutUnit position="north" size="65px" resizable="true" closable="true" collapsible="true">
                   <div id="header"><table border="0"><tr><td width="350px"><img src="../img/Imagentsys1.gif" width="105" height="35" alt="Imagentsys1"/></td> <td width="350px"><span>Solicitudes de Desarrollo</span></td></tr></table></div>
                </p:layoutUnit>
                <p:layoutUnit position="west" size="240" header="Menú Principal" collapsible="true">
                   <p:accordionPanel>
                       <p:tab title="Solicitudes de Desarrollo">
                           <ul>
                               <li><a href="#" onclick="doAjax('nuevaSolicitud.xhtml');">Nueva Solicitud</a></li>
                               <li><a href="#" onclick="doAjax('consultaSolicitud.xhtml');">Consultas</a></li>
                               
                           </ul>
                       </p:tab>
                       <p:tab title="Clientes">
                           <h:panelGrid columns="2" cellpadding="10">
                               <h:outputText value="menu clientes" />
                           </h:panelGrid>
                       </p:tab>
                       <p:tab title="Areas">
                           <h:panelGrid columns="2" cellpadding="10">
                               <h:outputText value="menu areas" />
                           </h:panelGrid>
                       </p:tab>
                   </p:accordionPanel>      
                </p:layoutUnit>
                <p:layoutUnit position="center">
                    <div id="contenido"></div>
                    <div id="contenidoextra"></div>
                </p:layoutUnit>

            </p:layout>

        </h:body>

    </f:view>
</html>

Opciones de visualización de comentarios

Seleccione la forma que prefiera para mostrar los comentarios y haga clic en «Guardar las opciones» para activar los cambios.
Imagen de ingscjoshua

facil

veo que usas primefaces hay un ejemplo de lo que tu quieres hacer yo tengo un ejemplo funcionando de eso aqui ahi esta configurado lo que quieres hacer . si tienes dudas me dices y lo revisamos.

saludos

style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5164839828746352"
data-ad-slot="7563230308">