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

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

    aish

      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

        • 1. Re: jquery works as a standalone but not when called from as

          Should work actually.
          Try to replace #dbq with #myForm\\:dbq in the selectors

          • 2. Re: jquery works as a standalone but not when called from as
            aish

            Hi Sergey,

            Thanks for responding. I tried your suggestion as follows and it didn't work. Should I need to included any other thing to make this work?

            Thanks
            Aish

            <rich:jQuery selector="#myForm\\:dbq tr:odd" query="addClass('odd-row')" />
            <rich:jQuery selector="#myForm\\:dbq tr:even" query="addClass('even-row')" />
            <rich:jQuery selector="#myForm\\:dbq tr" query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
            <rich:jQuery selector="#myForm\\:dbq tr" query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>

            • 3. Re: jquery works as a standalone but not when called from as
              aish

              Hi Sergey,

              jquery worked fine now. The solution was the id of the table was myForm\\:id_27\\:dbq. My mistake that I didn't provide the correct id initially. Your guidance helped to figure it out.

              Can I request you to look at my posts for questions regarding Stylesheet in Richfaces (posted under the id : Aish) . I have been wanderig for some directions on it for the last one week.

              Thanks a lot Sergey
              Aish