48

As an extension of this question, I'm trying to insert Javascript to a <h:commandButton />'s onclick property as action is already rendering an ajax table.

What I want to do: Get the selected items in a list box and turn them into parameters to be used in a JSF FileServlet. i.e. para2=value1&param=value2&param=value3

Here's what I have:

<script type ="text/javascript">
function myScript() {
    var box = document.getElementbyId('myForm:box');
    var length = box.options.length;
    var paramstring = "";
    for (var i = 0; i < length; i++) {
        if (i != (length - 1) {
            if (box.options[i].selected) {
                paramstring = paramstring + "param=" + box.options[i].value + "&amp;";
            }
        } else {
            paramstring = paramstring + "param=" + box.options[i].value;
        }
    }
    if (document.getElementById('myForm:checkbox').checked) {
        window.location='fileServlet? + paramstring;
    }
}
</script>  

What I get when page is loaded: javax.servlet.ServletException: Error Parsing /page.xhtml: Error Traced[line:15] The content of elements must consist of well-formed character data or markup.

What doesn't trigger exception:

<script type ="text/javascript">
function myScript() {
    var box = document.getElementbyId('myForm:box');
    var length = box.options.length;
    var paramstring = "";

    if (document.getElementById('myForm:checkbox').checked) {
        window.location='fileServlet? + paramstring;
    }
}
</script> 

As soon as I add in for (var i = 0; i < length; i++) or even for (var i = 0; i < 10; i++) the page wouldn't load. Why does it not like the for loop?

5 Answers 5

107

Facelets is a XML based view technology which uses XHTML+XML to generate HTML output. XML has five special characters which has special treatment by the XML parser:

  • < the start of a tag.
  • > the end of a tag.
  • " the start and end of an attribute value.
  • ' the alternative start and end of an attribute value.
  • & the start of an entity (which ends with ;).

In case of <, the XML parser is implicitly looking for the tag name and the end tag >. However, in your particular case, you were using < as a JavaScript operator, not as an XML entity. This totally explains the XML parsing error you got:

The content of elements must consist of well-formed character data or markup.

In essence, you're writing JavaScript code in the wrong place, a XML document instead of a JS file, so you should be escaping all XML special characters accordingly. The < must be escaped as &lt;.

So, essentially, the

for (var i = 0; i < length; i++) {

must become

for (var i = 0; i &lt; length; i++) {

to make it XML-valid.

However, this makes the JavaScript code harder to read and maintain. As stated in Mozilla Developer Network's excellent document Writing JavaScript for XHTML, you should be placing the JavaScript code in a character data (CDATA) block. Thus, in JSF terms, that would be:

<h:outputScript>
    <![CDATA[
        // ...
    ]]>
</h:outputScript>

The XML parser will interpret the block's contents as "plain vanilla" character data and not as XML and hence interpret the XML special characters "as-is".

But, much better is to just put the JS code in its own JS file which you include by <script src>, or in JSF terms, the <h:outputScript>.

<h:outputScript name="functions.js" target="head" />

This way you don't need to worry about XML-special characters in your JS code. Additional advantage is that this gives the browser the opportunity to cache the JS file so that average response size is smaller.

See also:

26
  • The javascript doesn't run when I use the <![CDATA[ block or using an external js file. I shortened the code for myScript() to window.location='fileServlet?param=1';, and this only runs if I put it inline with onclick or in <script type="text/javascript"></script>
    – luciaengel
    Dec 2, 2010 at 19:37
  • How did you invoke it? By onclick="myScript()" I suppose?
    – BalusC
    Dec 2, 2010 at 19:39
  • 1
    While wrapping in <![CDATA[ did you ensure that you followed the instructions in the link as in my answer? There has got to be a ]]> at end. When using an external script, did you ensure that the .js file didn't contain the <script>, but just a function myScript() {} ?
    – BalusC
    Dec 2, 2010 at 19:41
  • yes, I used a <![CDATA[ and ]]> block and had a global.js with only function myScript() {}
    – luciaengel
    Dec 2, 2010 at 19:43
  • I spotted some minor errors in your JS function (among others, you omitted a ', but that should have resulted in a JS error, did you see it in JS console?) and the logic could be more simplified. I updated the answer with an example.
    – BalusC
    Dec 2, 2010 at 19:48
22

I ran across this post today as I was running into the same issue and had the same problem of the javascript not running with the CDATA tags listed above. I corrected the CDATA tags to look like:

<script type="text/javascript">
//<![CDATA[ 

your javascript code here

//]]>
</script>

Then everything worked perfectly!

1
6

Sometimes you will need this :

 /*<![CDATA[*/
 /*]]>*/

and not only this :

 <![CDATA[
 ]]>
1

I had a git conflict left in my workspace.xml i.e.

<<<<———————HEAD

which caused the unknown tag error. It is a bit annoying that it doesn’t name the file.

-2

I solved this converting the JSP from XHTML to HTML, doing this in the begining:

<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.