Question

I just went thru w3schools tutorial for JQuery. I am trying ot write a function in seam/richfaces app. I have a search icon and onclick of the search icon, I want to toggle certain fields in UI. But nothing happens and i dont see any errors in firebug. Please help.

<rich:dataTable id="acctListTbl" value="#{accounts}" var="account" width="100%">
    <rich:column>
   <f:facet name="header">
    <h:panelGroup>
         <h:graphicImage id="srchIcon" value="/images/search_icon.png" 
                             styleClass="search-icon"/> 
            <h:outputText value="Action" />
        </h:panelGroup>
   </f:facet>

 <script type="text/javascript">
    jQuery(document).ready(function(){
  jQuery("#acctListTbl:srchIcon").click(function(){
      jQuery('.search-field').toggle(); 
  });
 });
 </script>

Here is the html. As user914670 pointed out, there is no jquery handler added to my search icon rendering. So what is wrong?

 <div id="j_id12:acctListTbl:j_id31header:sortDiv">
    <img id="j_id12:acctListTbl:srchIcon" class="search-icon"  
         src="/xxxx/images/search_icon.png">
         Action
 </div>

Answer 1

jQuery(document).ready(function(){   
      jQuery(".search-icon").click(function(){       
              jQuery('.search-field').toggle();    
       });  
}); 

or if you love ids you could do

jQuery(document).ready(function(){   
      jQuery("[id$=srchIcon]").click(function(){       
              jQuery('.search-field').toggle();    
       });  
}); 

$= means that ends with

^= means starts with

*= means contains

Also I would check out SelectorGadget for use in Firefox. Its really good for finding the selector statement you need to get a certain element.

One last thing that I do to make sure that I am in side an event is put an alert statement that goes off in side the function to let me know that my select statement is correct.