CODEWITHSUNDEEP
javascriptjsfjsf-2
Ben
Ben

Reputation: 10288

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:composition ... >
    <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:composition>

My questions:

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

Upvotes: 6

Views: 7505

Answers (2)

BalusC
BalusC

Reputation: 1108712

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:composition ... >
    <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:composition>

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 common (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.

Upvotes: 14

lu4242
lu4242

Reputation: 2318

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

<ui:composition ... >
    <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:composition>

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.

Upvotes: 1

Related Questions