Integrating JQuery with JSF 1.2 and RichFaces 3.3.1
Dear All,
I am new to Jquery and trying hard to use Jquery in my JSF 1.2 page. I use RichFaces on JSF.
However when I am trying to work out a demo example to run jquery on JSF it is not running.
I am not sure what is wrong and have googled for hours but to no avail. Finally I turned my attention to community seeking help to get me started with JSF+RF3.3.1 and JQuery.
here's the code Snippet of what i have tried:-
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery Effects</title>
<script type="text/javascript" src="script/jquery-1.7.1.js" >
function showSuccess()
{
jQuery("#formId\\:showLinkId").click(function(){
jQuery("#formId\\:success").hide('slow',function(){
alert('Hide Done');
});
});
}
</script>
</head>
<body>
<f:view>
<h:form id="formId">
<rich:panel header="Jquery" style="position: relative; width: 350px;">
<h:commandButton id="showLinkId" value="Click Here" onclick="showSuccess()" />
<h:outputLabel id="success" value="DONE" ></h:outputLabel>
</rich:panel>
</h:form>
</f:view>
</body>
</html>
I will also tell what i have done to for .js file.
I went to jquery.com.Opened the jquery.js file.Copied the entire script.
Created a new script in Eclipse IDe.Copied the entire script code in this new script.
Named the script as jQuery-1.7.1.js
Also, wherever on my JSF,JQuery is used it comes with a red underline stating jQuery cannot be resolved.
Can anyone please guide me..