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

Question

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:

Is it okay to declare the js files in the inner file the way I did?
Do I need (And Should I) declare the common (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?

BalusC · Accepted Answer · 2011-10-03 04:45:54Z

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

edited Oct 3, 2011 at 4:45

answered Oct 2, 2011 at 19:54

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ben Over a year ago

Tnx. Small follow up - according to your answer, if I load the page when te inner page is not rendered and then render the inner page, the inner js files will be missing. Right?

BalusC Over a year ago

I didn't said that. They will be included. The browser will be told to load them. But whether it's been obtained from the browser cache or straight from the server depends on the headers on the JS response and if it is already in browser cache or not. If it's cacheable and present in browser cache, then it won't be reloaded (because the browser already has it). Otherwise it will indeed be reloaded from server.

lu4242 · Accepted Answer · 2011-10-02 21:56:00Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related