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

【问题标题】：Cannot reference a DOM element in the JSF template from child view无法从子视图引用 JSF 模板中的 DOM 元素
【发布时间】：2013-02-03 06:32:42
【问题描述】：

我正在使用 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>

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

【问题讨论】：

你在那个页面上包含了 jQuery 脚本吗？
我一起摆脱了 jQuery 并使用 document.getElementById('..') 仍然是相同的结果。
你能在 jsfiddle 上创建例子吗？

标签： javascript html jsf-2 xhtml facelets

【解决方案1】：

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

$('#header')

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

【讨论】：

伊戈尔，我已经试过了，但没有运气。即使我在浏览器上显示页面源时可以看到元素。
Javascript 存在，这就是为什么我收到警告对话框，其结果为（未定义）。
Fiddler 正在显示预期的行为：jsfiddle.net/5DfUy 但不在我的本地机器上。
试试alert($) 和alert(jQuery('#header'))，$ 函数可能绑定到别的东西

【解决方案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>

【讨论】：

这应该是什么？
顶部的标题无法正确显示。由于用户正在使用标题，它可能会有所帮助
您的答案中应该有解释。没有它，你的答案只是一堆代码，这使它成为一个低质量的答案
请为您的答案添加解释
他有<head> 而不是标题。