Menu
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:
js files in the inner file the way I did?jquery-1.6.2.js) again in the inner file?inner_panel using AJAX? Will the inner-included headers be reloaded?
891
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
JS (JavaScript) are files that contain JavaScript code for execution on web pages. JavaScript files are stored with the . js extension. Inside the HTML document, you can either embed the JavaScript code using the <script></script> tags or include a JS file.
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_panelusing 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.
104
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.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
