Getting a XHTML parsing error when using JavaScript in Facelets

Question

I'm making a simple loading bar and it seems that Facelets does not like my conditional statements in my JavaScript.

Here is my code:

<div class="loader_bar">
   <div></div>
</div>
<script type="text/javascript">
            $(document).ready(function() {

setTimeout(function() {
    var current_width = parseFloat($('.loader_bar div').css('width'));
    var max_width = parseFloat($('.loader_bar').css('width'));
    var next_width = current_width / max_width * 100 + 1;
    if (next_width <= 100) {
        $('.loader_bar div').css('width', next_width + '%');
        setTimeout(arguments.callee, 10);
    }

}, 100);
});

        </script>

When I load the page I get the following error:

javax.servlet.ServletException: Error Parsing /device/main/site/test.xhtml: Error
Traced[line: 69] The content of elements must consist of well-formed character data
or markup.

Which corresponds to the operator in the if statement of my JS function "<=" in

if(next_width <= 100).

Why does this not work?

Try wrapping your JS inside <![CDATA[ code here ]]> or have your file external (it's better anyway) — GillesC, Apr 13 '12 at 12:24
Do you use that view in some kind of Java Framework? How is this related to Java? — dwalldorf, Apr 13 '12 at 12:24
@gillesc - Thanks for that, I tried and I don't the error anymore, but now the javascript doesn't seem to be working (ie my loading bar is not filling up). I tried putting the CDATA before the $(document).ready... }); and I also tried only around the function. Any ideas? — denislexic, Apr 13 '12 at 12:29
@entek - As indicated in the question, I m using a JSF framework and I don t get any errors when I do it in jsfiddle, therefore Java error. Thanks. — denislexic, Apr 13 '12 at 12:30
What framework? Maybe it wants the views to have some kind of XML Schema to be specified? — dwalldorf, Apr 13 '12 at 12:35
I don t really know this stuff as another programmer is doing it, 'm just doing the JS and HTML/CSS. Does this help: xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" — denislexic, Apr 13 '12 at 12:38
Do you really need to reinvent the wheel? There are components for progress bar in [primefaces](http://www.primefaces.org/showcase-labs/ui/progressBar.jsf) and [richfaces](http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?demo=progressBar&skin=blueSky) both are libraries that bring JSF components with js/css embedded — Luiggi Mendoza, Apr 13 '12 at 19:55

score 1 · Accepted Answer · answered Apr 13 '12 at 12:29

1

Try placing the javascript code within a CDATA tag

<script type="text/javascript">
<![CDATA[
$(document).ready(function() {
....
}
]]>
</script>

answered Apr 13 '12 at 12:29

Garytxo

346
1
4
11

Thanks, I don t get the error anymore, but now my JS doesn't work (ie the bar doesn't fill up). Any ideas? – denislexic Apr 13 '12 at 12:37

score 0 · Answer 2 · answered Apr 13 '12 at 12:39

0

If you are using JSF you might want to consider placing your JS code into a .js file. Then, for instance, if you have placed your myScripts.js script file into /WebContent/theme folder, you can include it in your jsp page like this:

<script type="text/javascript"
    src='<%=renderResponse.encodeURL(renderRequest
                    .getContextPath() + "/theme/myScripts.js")%>'
    charset="UTF-8"></script>

answered Apr 13 '12 at 12:39

RokL

2,663
3
22
26

Thanks. I do that 99.9% of the time. But sometimes, I don't have a choice and need to put it in the script. (Not right now, but for other things such as Conditional Google Analytics) – denislexic Apr 13 '12 at 12:47
1

Actually, the preferred `view technology` for JSF is `Facelets` and JSF has special tag `` for including scripts. I'm surprised someone's still using JSPs as views for JSF. – jFrenetic Apr 13 '12 at 12:56
@jFrenetic I've never used Facelets but I can't see much difference between Facelets and JSP. – RokL Apr 14 '12 at 17:22
@UMad Then you might want to read [the official Java EE tutorial](http://docs.oracle.com/javaee/6/tutorial/doc/giepx.html). Quote: **JSP technology is considered to be a deprecated presentation technology for JavaServer Faces 2.0**. JSP rarely if ever should be used in JSF for building modern web applications. – jFrenetic Apr 14 '12 at 18:43
@jFrenetic I'm using JSF 1.2 due to websphere products supporting JSF 1.1 and 1.2 only. – RokL Apr 16 '12 at 07:30

Getting a XHTML parsing error when using JavaScript in Facelets

2 Answers2