2

I'm using OmniFaces conditionalComment to load a javascript file for IE 6 browsers. On the webiste it says the script should be included in the page as:

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

This is not valid xml, so can't be used in the JSF xhtml files. Instead I use this:

<h:body>
  <f:facet name="last">
    <o:conditionalComment if="if (gte IE 6)&amp;(lte IE 8)">
      <h:outputScript library="js" name="selectivizr-min.js" target="head"/>
    </o:conditionalComment>
  </f:facet>
...
</h:body>

I include the script in the body part of the xhtml and put it in the facet name="last", so it is included after JQuery (I use PirmeFaces and read that's the safest way to do that). target="head" ensures that it is written to the head section of the resulting html file. The link to the script is included in the correct part of the document (after the PrimeFaces imports), but it is not surrounded by the conditional comments.

Here is the relevant part of the html (reformatted for easier reading):

<head>
  <link type="text/css" rel="stylesheet" href="/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo" />
  <link type="text/css" rel="stylesheet" href="/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&amp;v=5.1" />
  <script type="text/javascript" src="/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&amp;v=5.1"></script>
  <script type="text/javascript" src="/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&amp;v=5.1"></script>
  <script type="text/javascript" src="/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;v=5.1"></script>
  <script type="text/javascript" src="/javax.faces.resource/omnifaces.js.xhtml?ln=omnifaces"></script>
  <link type="text/css" rel="stylesheet" href="/javax.faces.resource/styles.css.xhtml?ln=css" />
  <script type="text/javascript" src="/javax.faces.resource/selectivizr-min.js.xhtml?ln=js"></script>

The last line is missing the comments (!--[if (gte IE 6)&(lte IE 8)]> ...).

What am I doing wrong? Any suggestions?

Cheers, Dominik

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
user473453
  • 894
  • 2
  • 11
  • 23

1 Answers1

2

This problem is two-fold:

  1. The <f:facet name="last"> makes no sense in this context. Get rid of it. It would be ignored including any of its children. It's only valid inside <h:head> (and even then only if you're using PrimeFaces; who actually overlooked the native JSF possibility to order head resources as last).

  2. You can't use <h:outputScript> (nor <h:outputStylesheet> inside <o:conditionalComment>, because JSF will implicitly auto-relocate it to the <head>. This is also hinted in the documentation and showcase.

Just use plain vanilla <script> (or <link rel="stylesheet">).

<o:conditionalComment if="(gte IE 6)&amp;(lte IE 8)">
    <script src="#{resource['js/selectivizr-min.js']}" />
</o:conditionalComment>

Note that I fixed the invalid if attribute value by removing the duplicated if.

Unrelated to the concrete problem: The library="js" indicates a misunderstanding of the library attribute. Carefully read What is the JSF resource library for and how should it be used? The #{resource} resolver in above answer has already been altered to use js as regular folder instead of as library.

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Thanks so much for your very quick answer!! Your code for conditionalComment works. About the file ordering in the header: I had the problem that my css file was loaded before the PrimeFaces css styles and therefore I could not override PF styles. I found a solution in here: http://www.mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces Anyways, after reading your suggestions, I removed the last facet and simply added: at the end of the head, but now my css appears at the wrong part in the resulting html and PF styles are no longer overwritten – user473453 Nov 03 '14 at 18:19
  • UPDATE: Rather than using I use normal html at the end of my head section, i.e., and it puts it at the correct postion, i.e., end of the head section. Is this good practice though? – user473453 Nov 03 '14 at 18:27
  • Just put in body. Native JSF will just auto-relocate it to **end** of head: http://stackoverflow.com/q/8768317 No need for ``. – BalusC Nov 04 '14 at 06:47