Question

我正在使用JSF模板和Primefaces。我似乎无法从子视图中引用主页面中的特定div。

模板页面 template.xhtml：

 <!DOCTYPE html>
 <html lang="en"
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:p="http://primefaces.org/ui"
     xmlns:comp="http://java.sun.com/jsf/composite/components"
     xmlns:pe="http://primefaces.org/ui/extensions">
  <h:head>
     <title><ui:insert name="title">Default title</ui:insert></title>
  </h:head>
  <h:body>
     <div id="header">Header</div>        
     <div id="content"><ui:insert name="content">Default content</ui:insert></div>
     <div id="footer">Footer</div>
  </h:body>
 </html>

客户页面 page.xhtml

<ui:composition template="template.xhtml"
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui"
        xmlns:comp="http://java.sun.com/jsf/composite/components"
        xmlns:pe="http://primefaces.org/ui/extensions">


    <ui:define name="content">
         <script type="text/javascript">
              $(window).load(function() {
                       alert($('header').html());
               });
         </script>

        <h1>New content here</h1>
        <p>Stuff</p>
    </ui:define>
</ui:composition>

警报显示“null”。我尝试将脚本放在子视图中的不同位置，但没有运气。知道为什么它不可见吗？感谢。

Answer 1

我认为您正在尝试在其ID中选择带有“标题”的元素，因此您需要使用它：

$('#header')

如果您想选择<header>元素，则可以使用$('header')来选择它。

Answer 2

您的原始代码有一个单独的标题部分，然后您还将标题部分包含在您的正文中作为div。标题html标记已删除，ui标记已移至div。

<!DOCTYPE html>
 <html lang="en"
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:p="http://primefaces.org/ui"
     xmlns:comp="http://java.sun.com/jsf/composite/components"
     xmlns:pe="http://primefaces.org/ui/extensions">
  <h:body>
     <div id="header"><ui:insert name="title">Default Title</ui:insert></div>        
     <div id="content"><ui:insert name="content">Default Content</ui:insert></div>
     <div id="footer">Footer</div>
  </h:body>
 </html>

无法从子视图引用JSF模板中的DOM元素

2 个答案: