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)&(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&v=5.1" />
<script type="text/javascript" src="/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=5.1"></script>
<script type="text/javascript" src="/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&v=5.1"></script>
<script type="text/javascript" src="/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&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
This problem is two-fold:
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).
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)&(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.
Related
I have loaded javascript from Java call in xhtml file. When I opened the browser in debug mode( both IE and chrome) , javascripts are loading with .xhtml extensions.
Below is the code I am using
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><ice:outputText nospan="true" value="#{msgs.loginTitle}" /></title>
<link href="../css/style.css" type="text/css" rel="stylesheet" />
<ice:outputText value="#{MyAction.javaScripts}" visible="false" />
</h:head>
Here JavaScripts is the methods and it returns String.
value="#{MyAction.javaScripts}" Return the below string
<script src="../js/myJs.js" type="text/javascript"></script>
But when I open the browser in debug mode my javascript is like abc.js.xhtml?xxx and some of the functions are not working. My questions are
1) Will java script work perfectly even if it is showing like this?
2) Is the Browser changing the extension or it is configuration issue?
Please help me
Javascript files should be included in your JSF .xhtml file by using either <h:outputScript> or <script>:
(referencing a script file named 'help.js' in the /js folder)
<h:outputScript library="js" name="help.js" />
or
(embedded script directly within the page)
<script type="text/javascript">
function sayHello(){
alert('Hello');
}
</script>
Using ufront and erazor I ran into the following problem very quickly.
The hello-world example provides the following layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
#viewContent
</div>
</body>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script>
</html>
For certain pages I want to add more headers or scripts after Jquery has been loaded.
One way to do so (for the scripts for example), would be to pass the scripts as an array of strings, and construct them on the layout file :
...
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script>
#for(script in scripts) {
<script src='#script.path'></script>
}
</html>
....
The problem with this approach is that I can't keep meaningful headers + body + scripts on the same template file witch would be great, also needs extra care to pass the scripts and headers as context.
Some template engines like Razor or Laravel allow to do that using 'sections'.
Is it possible to do something similar with erazor? If not what would be a good alternative?
I am working with SEAM - JSF framework
I have following a4j commandlink on my xhtml page.
<a4j:commandLink id="rateImage" action="#{ratingSessionAction.rateImage}" oncomplete="getNewImageForSlider();"/>
When i click on this link first time after clearing my browser history, i get following html
<?xml version="1.0"?>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link class="component"
href="/abc/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAELXT5DOhSIAQ!sA18_"
rel="stylesheet" type="text/css" />
<link class="component"
href="/abc/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAELXT5DOhSIAQ!sA18_"
media="rich-extended-skinning" rel="stylesheet" type="text/css" />
<script
src="/abc/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript"
type="text/javascript">
</script>
<script
src="/abc/a4j/g/3_3_3.Finalorg/ajax4jsf/javascript/scripts/form.js"
type="text/javascript">
</script>
<script
src="/abc/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/skinning.js"
type="text/javascript">
</script>
</head>
<body>
<meta name="Ajax-Update-Ids" content="" />
<span id="ajax-view-state"><input type="hidden"
name="javax.faces.ViewState" id="javax.faces.ViewState"
value="" />
</span>
<meta id="Ajax-Response" name="Ajax-Response" content="true" />
<span id="org.ajax4jsf.oncomplete">getNewImageForSlider();</span>
</body>
</html>
I removed value from viewstate hidden field purposely to reduce the
length of post.
Can anybody explain me why this is happening, and how can overcome it.
Thanks in advance
Richfaces (a4j) is always returning you a complete html response. After the return it will use the ajax-update-id to split the response into parts and place them where you have the defined ids of your rerender attribute.
You are not specifing anything to rerender and because of that only your js should be executed oncomplete.
Either you can fetch a new image during the a4j request directly and use rerender (your page needs to be prepared for that with an img tag and a random src i suppose) or you gave to do this in your oncomplete callback and create a new img tag and place it yourself.
The second approach can be tricky because the server state will not be aligned in a next request assuming you are using conversations in seam for example
All of my JSF pages contain the following imports
<h:head>
<title>My Registration Page</title>
<link href="stylesheet/reset.css" rel="stylesheet" type="text/css" />
<link href="stylesheet/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="images/icons/favicon.png" />
<script language="javascript" src="script/script.js"/>
Not i dont want to copy and paste all these lines in the head element of my xhtml page;but want to include only a single page, so i want to remove all these lines from the head and put them into another file and then just include that file.
Kind Regards
I need to embed jquery files in ExpressionEngine.
I have created the template js under the main site template group.
I know that the css is embedding with the following tag:
<link rel="stylesheet" href="{stylesheet=template_group/template}" type="text/css" media="screen" />
for css its {stylesheet=template_group/template}
I want to know what is the tag for embedding js files
<script src=" [-->> ?? <<--] " type="text/javascript"></script>
Just make sure that your template containing your javascript is of the "JavaScript" type, and link it using the standard path syntax:
<script src="{path="scripts/myscript"}" type="text/javascript"></script>