3 Replies Latest reply on May 2, 2008 10:05 AM by E Aish

    jquery works as a standalone but not when called from as a s

    E Aish Novice

      Hi,

      I am trying to use jquery in my page.

      Here is my web page with the jquery:
      ====

      <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
      <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
      <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
      
      <rich:dataTable id="dbq" value="#{TableDetail.displaytbl}" var="dbq"
      border="1" >
      <f:facet name="header">
      <h:outputText value="DB Table"/>
      </f:facet>
      <rich:column>
      <f:facet name="header">
      <h:outputText value="FileNameName"/>
      </f:facet>
      <h:outputText value="#{dbq.filename}"/>
      </rich:column>
      
      
      
      <rich:jQuery selector="#dbqtr:odd" query="addClass('odd-row')" />
      <rich:jQuery selector="#dbq tr:even" query="addClass('even-row')" />
      <rich:jQuery selector="#dbq tr"
      query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
      <rich:jQuery selector="#dbq tr"
      query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
      
      ===
      
      The above page is called from a main navigation page which includes the <h:form> components and so, as shown below:
      
      
      
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
      <html lang="en">
      <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
      <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
      <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
      
      
      <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
      <title>default-menu</title>
      <link href="styles.css" rel="stylesheet" type="text/css"/>
      <script language="JavaScript" src="event.js" type="text/javascript"></SCRIPT>
       <style type="text/css">
       .odd-row {
       background-color: #ECF3FE;
       }
       .even-row {
       background-color: #FCFFFE;
       }
       .active-row {
       background-color: #FFEBDA;
       }
      
       </style>
      
      </head>
      <f:view>
       <body>
       <h:form id="myForm">
       <div id="container">
      
       <div id="header">
       <table width="950" border="0" cellpadding="0" cellspacing="0">
       <tr class="td_blue">
      <td width="617" height="66" class="white21">Title</td>
      <td width="14"> </td>
      <td width="104" valign="top"><img src="logo.jpg" width="104" height="45"></td>
      <td width="49" valign="top"><img src="logo1.jpg" width="49" height="45"></td>
      </tr>
      </table>
      
      </div>
       <div id="menu">
       <a4j:include viewId="/default-menu.jsp" />
      </div>
      
      <div id="contents">
       <div id="mainnav">
       <a4j:include viewId="/dropdownmenu.jsp" />
       </div>
       <a4j:outputPanel id="centerGrid" >
      
      <a4j:include viewId="#{UINavigation.address}">
      </a4j:include>
      </a4j:outputPanel>
      
      </div>
      
      
      <div id="footer">
       Thank You
      </div>
      
      </div>
       </h:form>
       </body>
      </f:view>
      </html>
      


      ====


      When I call the program as a stand alone prohram, the jquery in it works fine. But when the jquery program is called as a sub program from the main program, the jquery does not work.

      Can you please let me know what is missing in the jquery program when it is called from the main program

      Thanks
      Aish