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

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

javascript html jsf-2

Javascript 无法从子视图引用JSF模板中的DOM元素,javascript,html,jsf-2,xhtml,facelets,Javascript,Html,Jsf 2,Xhtml,Facelets,我正在使用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" xmln

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


$（窗口）。加载（函数（）{
警报（$（'header'）.html（））；
});
这里有新内容
东西

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

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

$('#header')

如果您想选择

元素，那么您可以使用

$（'header'）

来选择它。

您的原始代码有一个单独的header部分，然后您还将header部分作为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>


默认标题
默认内容
页脚

Igor，我已经试过了，但是运气不好。即使我在浏览器上显示页面源代码时可以看到该元素。Javascript存在，这就是为什么我得到警报对话框，结果为（未定义）。Fiddler显示了预期的行为：但在我的本地计算机上没有。请尝试

警报（$）

和

警报（jQuery（'#header'））

，$function可能绑定到其他东西了吗？您在该页面上包含jQuery脚本吗？我将jQuery全部删除，并使用document.getElementById（'..'）仍然是相同的结果。您可以在JSFIDLE上创建示例吗？这应该是什么？顶部的标题无法正确显示。因为用户正在使用w标题，所以可能会有帮助。答案中应该有解释。没有它，你的答案只是一堆代码，这使得它是一个低质量的答案请给你的答案添加一个解释他没有标题。