1 Reply Latest reply on May 17, 2012 3:48 AM by Tushar Apshankar

    Integrating JQuery with JSF 1.2 and RichFaces 3.3.1

    cooldownthethroat Newbie

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