0 Replies Latest reply on Dec 10, 2011 4:25 AM by cooldownthethroat

    Integrating JQuery with JSF 1.2 and RichFaces 3.3.1

    cooldownthethroat
    cooldownthethroat Dec 10, 2011 4:25 AM

      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.noConflict();   

              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..