f:ajax渲染页面部分,jsf2

时间:2013-02-11 18:44:34

标签: ajax jsf-2

我想知道如何使用f:ajax ..

呈现页面部分

我有一个菜单,我想要做的是,如果我点击我的一些菜单,在同一页面内渲染像div或任何包含该菜单细节的内容:

例如:

  • MENU1
  • menu2 --->点击menu2 - >在同一页面中显示详细信息。
  • 菜单3

点击后我渲染这部分:

<div id=menuDetails>

  details: menu2 

 Menu name= menu2.

  Menu pages: page1, page2..

</div>

这就是我的观点:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
                template="../template/page-template.xhtml" xmlns:f="http://java.sun.com/jsf/core">

<ui:define name="page-content">


    <link href="../contenido/css/nav.css" rel="stylesheet" type="text/css" />

    <div class="container">
        <h:form id="menupags">

        <nav id="navbar">
            <ul>
         <ui:repeat var="menu" value="#{miuchile3.all}" >
             <li>
                 <h:commandLink value="#{menu.nombre}"  action="#{miuchile3.setMenu(menu)}">
                 <f:ajax event="click" render=":menupags:menuDetalle" />
                 </h:commandLink>
                 <ul>
            <ui:repeat var="pags" value="#{miuchile3.getByMenu(menu.id)}" >
                <li><a  href="#{pags.url}" >#{pags.etiqueta}</a></li>
            </ui:repeat>
                 </ul>
               </li>

            </ui:repeat>
            </ul>
           </nav>

    <!-- Menu Details-->

       <h:panelGrid id="menuDetalle">

       <h:outputText value="#{miuchile3.menu.nombre}"/>


        <ui:repeat var="pags" value="#{miuchile3.getByMenu(miuchile3.menu.id)}" >
            <h:outputText value="#{pags.etiqueta}"/>
        </ui:repeat>
       </h:panelGrid>


   </h:form>
    </div>

</ui:define>
</ui:composition>

它现在无法正常工作,当我点击某个菜单时没有任何反应。

0 个答案:

没有答案