CODEWITHSUNDEEP
jqueryrichfaces
user238021
user238021

Reputation: 1221

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>

Upvotes: 0

Views: 656

Answers (4)

Chris Woolum
Chris Woolum

Reputation: 2914

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.

Upvotes: 0

colemande
colemande

Reputation: 392

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.

Upvotes: 0

bnjmn.myers
bnjmn.myers

Reputation: 439

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.

Upvotes: 0

brian_d
brian_d

Reputation: 11395

No class .search-field is present in your markup

Upvotes: 2

Related Questions