javascript - Include JS files in a xhtml file that was included using ui:include

I will ilustrate my question using an example:

outerfile.xhtml:

<h:head>
    <h:outputScript library="js" name="jquery-1.6.2.js" />
    <h:outputScript library="js" name="outer.js" />
</h:head>

<h:body>
    <h:panelGroup id="inner_panel">
      <ui:include src="innerfile.xhtml" />
    </h:panelGroup>
</h:body>

innerfile.xhtml:

<ui:position ... >
    <h:head>
        <h:outputScript library="js" name="jquery-1.6.2.js" />
        <h:outputScript library="js" name="inner.js" />
    </h:head>

    <h:body>
        <h:panelGroup>
          I Am Text in The Inner File!
        </h:panelGroup>
    </h:body>
</ui:position>

My questions:

Is it okay to declare the js files in the inner file the way I did?
Do I need (And Should I) declare the mon (jquery-1.6.2.js) again in the inner file?
What happens if I un-render and the re-render inner_panel using AJAX? Will the inner-included headers be reloaded?

I will ilustrate my question using an example:

outerfile.xhtml:

<h:head>
    <h:outputScript library="js" name="jquery-1.6.2.js" />
    <h:outputScript library="js" name="outer.js" />
</h:head>

<h:body>
    <h:panelGroup id="inner_panel">
      <ui:include src="innerfile.xhtml" />
    </h:panelGroup>
</h:body>

innerfile.xhtml:

<ui:position ... >
    <h:head>
        <h:outputScript library="js" name="jquery-1.6.2.js" />
        <h:outputScript library="js" name="inner.js" />
    </h:head>

    <h:body>
        <h:panelGroup>
          I Am Text in The Inner File!
        </h:panelGroup>
    </h:body>
</ui:position>

My questions:

Is it okay to declare the js files in the inner file the way I did?
Do I need (And Should I) declare the mon (jquery-1.6.2.js) again in the inner file?
What happens if I un-render and the re-render inner_panel using AJAX? Will the inner-included headers be reloaded?

Share Improve this question edited Oct 2, 2011 at 16:08 asked Oct 2, 2011 at 16:01 Ben 10.3k21 gold badges103 silver badges158 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 14

Is it okay to declare the js files in the inner file the way I did?

No. You should not specify the <h:head> in the include as well. This would only result in invalid HTML. As you have right now will result in:

<html>
  <head>
    <script></script>
  </head>
  <body>
    <head>
      <script></script>
    </head>
    <body>
    </body>
  </body>
</html>

(rightclick page in browser and do View Source to see it yourself, w3-validate if necessary)

Fix it accordingly in innerfile.xhtml:

<ui:position ... >
    <h:outputScript library="js" name="jquery-1.6.2.js" target="head" />
    <h:outputScript library="js" name="inner.js" target="head" />

    <h:panelGroup>
        I Am Text in The Inner File!
    </h:panelGroup>
</ui:position>

This will result in valid HTML. The scripts declared by <h:outputScript target="head"> will just end up in the <head> automatically, if not already declared before. Like as in real HTML, there should be only one <h:head> and <h:body> in the entire view, including any templates and include files.

Do I need (And Should I) declare the mon (jquery-1.6.2.js) again in the inner file?

Not if the parent file has it already declared as <h:outputScript>. But redeclaring it in the include doesn't harm. It won't be duplicated anyway if it's already been declared before.

What happens if I un-render and the re-render inner_panel using Ajax? Will the inner-included headers be reloaded?

This only works if you don't use target="head". Whether they will be reloaded from the server, depends on whether it's already been requested by the browser before and already present and valid in the browser cache. But basically, the browser will be told again to load it, yes. With Firebug you can easily determine it.

The right way to write it is use target="head" inside your h:outputScript declaration on innerfile.xhtml:

<ui:position ... >
    <h:outputScript library="js" target="head" name="jquery-1.6.2.js" />
    <h:outputScript library="js" target="head" name="inner.js" />
    <h:panelGroup>
       I Am Text in The Inner File!
    </h:panelGroup>
</ui:position>

In that way all your resource declarations will be put inside the outer . Multiple declarations of the same resource with the same library/resource name will not render the same declaration multiple times, because the renderer for h:outputScript has some code that detect that and ignore the duplicate entries. Note things are different if you render a h:outputScript that does not reference a javascript file.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Include JS files in a xhtml file that was included using ui:include - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)