JSF and Jquery - doesn't work

Question

Hi
I am trying to get Jquery work in JSF. But i doesn't work. Can somebody help me ? The scripts are in the folder : resources

This is my JSP code :

I am using netbeans and the

<?xml version="1.0" encoding="UTF-8"?>
<!-- 
Document   : testpage
Created on : 08.07.2009, 01:16:01
Author     : reBourne 
-->
<jsp:root version="2.1" xmlns:f="http://java.sun.com/jsf/core"     xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:webuijsf="http://www.sun.com/webui/webuijsf"&gt;
<jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
<f:view>
    <webuijsf:page id="page1">
        <webuijsf:html id="html1">
            <webuijsf:head id="head1">
                <webuijsf:link id="link1" url="/resources/css/stylesheet.css"/>
                <webuijsf:script id="script1" url="resources/jquery.js"/>
                <webuijsf:script id="script2" url="recources/main.js" />

<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}

h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30; 
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9; 
margin:.5em 0;
overflow:auto;
width:800px;
}

img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}



 /*  */

#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

 /*  */
 </style>
            </webuijsf:head>
            <webuijsf:body id="body1" style="-rave-layout: grid">
                <webuijsf:form id="form1">
                    <ul>
                        <li>
                            <a class="preview" href="resources/images/1.jpg">
                                <img alt="gallery thumbnail" src="resources/images/1s.jpg"/>
                            </a>
                        </li>
                        <li>
                            <a class="preview" href="resources/images/2.jpg">
                                <img alt="gallery thumbnail" src="resources/images/2s.jpg"/>
                            </a>
                        </li>
                        <li>
                            <a class="preview" href="resources/images/3.jpg">
                                <img alt="gallery thumbnail" src="resources/images/3s.jpg"/>
                            </a>
                        </li>
                        <li>
                            <a class="preview" href="resources/images/4.jpg">
                                <img alt="gallery thumbnail" src="resources/images/4s.jpg"/>
                            </a>
                        </li>
                    </ul>
                </webuijsf:form>
            </webuijsf:body>
        </webuijsf:html>
    </webuijsf:page>
</f:view>
</jsp:root>

Or has someone a real life example with Javascript ?!

Answer 1

AWW MAN .. i had a little typo :/

        <webuijsf:script id="script1" url="resources/jquery.js"/>
        <webuijsf:script id="script2" url="recources/main.js" />

it is reSources/main.js" <-- there it is.

:/

Answer 2

Use Scriptaculous instead of JQuery, It support JSP.

Answer 3

jQuery works fine with JSF, ust make sure you are using it correctly. From the jQuery website (Using jQuery with other Libraries) you need to make sure to use jQuery.noConflict() or jQuery(...) instead of $(...).

For example, you can use the following to make sure jQuery doesn't clash with other libraries.

var $J = jQuery.noConflict();

$J(<selector>)...

If you are using RichFaces you can also check out it's support for jQuery.

Answer 4

I am not sure about best solution for $J = jQuery.noConflict();

Because, I wrote code for print the textarea content using jQuery. Also i use rich:dataScroller tag in my jsp page..

Two scenario occur :

One, Printing work, But rich:dataScroller not work (Without using jQuery.noConflict())

Second, Printing not work, rich:dataScroller working (Using jQuery.noConflict())

http://stackoverflow.com/questions/2902374/how-to-integrate-jquery-with-jsf-richfaces-tags-for-print-the-image-and-textarea