basic jquery problem

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>

---

No class .search-field is present in your markup

---

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.

---

My understanding is that when you follow a class or an id with a colon, you are looking for and element that has a specific property and srchIcon is not a property.

I believe what you meant to do with jQuery('#acctListTbl:srchIcon') is the following:
jQuery('#acctListTbl #srchIcon)

That says the target is an element with an ID of srchIcon inside of an element with an ID of acctList.

That could be part of your problem.

Hope that helps.

---

jQuery("#acctListTbl:srchIcon") only needs to be jQuery("#srchIcon")

Because id's are unique on a page, they don't need to be qualified. Also an easy way to tell if Jquery is even creating the event handler is to look at your rendered code and see if your image has a JQuery="{some random numbers}" tag.