JSF和JQuery - 不起作用

I am trying to get JQuery to work in JSF, but I haven't had success. The scripts are in the folder resources. I am using NetBeans.

我试图让JQuery在JSF中工作,但我没有成功。脚本位于文件夹资源中。我正在使用NetBeans。

This is my JSP code:

这是我的JSP代码:

<?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">
<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>

Does someone have a real life example with JavaScript?

有人有JavaScript的真实例子吗?

3 个解决方案

#1

AWW MAN .. i had a little typo :/

AWW MAN ..我有一个小错字:/

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

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

它是reSources / main.js“< - 就是这样。

#2

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 $(...).

jQuery适用于JSF,确保您正确使用它。从jQuery网站(使用jQuery与其他库),您需要确保使用jQuery.noConflict()或jQuery(...)而不是$(...)。

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

例如,您可以使用以下内容确保jQuery不与其他库冲突。

var $J = jQuery.noConflict();

$J(<selector>)...

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

如果您使用的是RichFaces,您还可以查看它对jQuery的支持。

#3

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

我不确定$ J = jQuery.noConflict()的最佳解决方案;

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

因为,我编写了使用jQuery打印textarea内容的代码。我也在我的jsp页面中使用rich:dataScroller标签..

Two scenario occur :

出现两种情况:

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

一,打印工作,但丰富:dataScroller无法正常工作(不使用jQuery.noConflict())

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

二,打印不起作用,丰富:dataScroller工作(使用jQuery.noConflict())

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

#1