Using jQuery in JSF template file with singe and double quotes

I'm learning jQuery to integrate into a JSF application but finding some confusion on the correct syntax especially when it comes to combining double and single quotes in the jQuery scripts. So for this particular page I want jQuery to traverse through a list of documents and put icons next to each document to state what type of document each is (ie: PDF, doc, xls). I can get this to work using normal html markup but I get a Syntax Error - Unexpected Token exception in the browser.

I'm confused about whether this means I need to use the right html references for the JSF element I wish to traverse or whether this is a problem with the way I'm using my quotes.

Also I'm not sure how to correctly reference jsf tags inside jQuery scripts. So for an ordinary html page I execute the following jQuery script:



<script type="text/javascript"> $("document").ready(function () { $("li a[href = ' .pdf']").after("<img src='myImage'/>"); }); </script>
</code>

Then I have a JSF page with the following commandLink:
<p:column> <p:commandLink class="downLoadLink" value="Download" ajax="false"> <p:fileDownload value="#{projectDocBean.downloadedFile}" contentDisposition="attachment"/> </p:commandLink> </p:column>
For this page I try to execute the following script:


<script type="text/javascript"> $("document").ready(function () { $("#downLoadLink = ' .pdf']").after("<img src='myImage'/>"); }); </script>

I get the same syntax error no matter what I put into the script of the JSF page. Would be grateful for any guidance on how to correctly integrate jQuery with JSF. Thanks in advance!

1. Use the "jQuery()" function instead of the "$" shorthand. It's possible to use "$", but only if you're very careful, since "$" is the EL marker for read-only variables in the same way that "#" is the marker for references (read/write variables and so forth).

2. When coding JavaScript on a JSF View Template, wrap the <script> element with a f:verbatim element (not strictly necessary anymore, but good practice). Use the XML "CDATA" convention to keep the XML processor from getting confused by any <, > ' " or & characters it encounters in the script. That is:
<f:verbatim> <script type="text/javascript"><![CDATA[[ jQuery("document").ready(function () { jQuery("li a[href = ' .pdf']").after("<img src='myImage'/>"); }); // ]]></script> </f:verbatim>

Note that the "type" attribute for the HTML SCRIPT element is deprecated, though and you should omit it. Also note the "//" before the CDATA end so that JavaScript will see that stuff as a comment and not attempt to interpret it as part of the script.

Alternatively - and preferably - move the script to a separate ".js" resource and use the JSF script reference element to point to it. The .js file doesn't need all that escaping. And the "$" should work there as well.

Thanks so much for the illuminating advice. I haven't had a chance to try including the js in a separate file yet. That sounds like the right solution (which too much cross eyed coding prevented me figuring out). I'll try it and update. Thanks again!