asked on

jquery delegate within delegate

<div style="display: block;" id="resultsDiv">
                <div class="dropdown">
    
                    <div class="submenu1">
        
       
                        <div class="submenu" id="submenuDiv">
							<ul class="root">         
								         
								<li>                                       
									<a> High School  </a>
								</li>                 
						            
							</ul>
								<ul class="root">        
									     
								<li>                                      
								<a>                                                                    
									Middle School                                        
								</a>
								</li>                 
								            
								</ul>
								
								<ul class="root">         
								        
								<li>                                      
									<a>                                                                     
										Elementary School                                        
									</a>
								</li>                 
						
								            
								</ul></div>
                    </div>
                </div>
            </div>

<div id="resultSchoolListDiv">
<div class="dropdownSchoolList">
<ul>
<li> school1</li>
<li> school2</li>
<li> school3</li>
</ul>
<div>

<div class="dropdownSchoolList">
<ul>
<li> school11</li>
<li> school22</li>
<li> school33</li>
</ul>
<div>

<div class="dropdownSchoolList">
<ul>
<li> school1111</li>
<li> school222</li>
<li> school3333</li>
</ul>
<div>
</div>

Open in new window

dropdown 
        {
            color: #555;
            
            margin: 3px -22px 0 0;
            width: 155px;
            position: absolute;
            height: 17px;
            text-align:left;
            z-index: 4999;

           
        }
        .submenu1
        {
            
            position: absolute;
           
             background: #FFF;
          
            z-index: 5000;
              border-top:2px solid #dedede;
            border-bottom:2px solid #dedede;
            border-left:2px solid #dedede;
            border-right:2px solid #dedede;
           
          
            

        }
        .submenu
        {
            
            position: absolute;
           
            width: 155px;
            background: #FFF;
            margin-left: 10px;
            padding: 20px 0 5px;
            border-radius: 6px;
            
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
            z-index: 5001;
       
                
        }
        .dropdown li a 
        {
            color: #555555;
            display: block;
            font-family: arial;
            font-weight: bold;
            padding: 6px 15px;
            cursor: pointer;
            text-decoration:none;
        }
 
        .dropdown li a:hover
        {
            background:#155FB0;
            color: #FFFFFF;
            text-decoration: none;
        }
        a.account 
        {
            font-size: 11px;
            line-height: 16px;
            color: #555;
            position: absolute;
            z-index: 110;
            display: block;
            padding: 11px 0 0 20px;
            height: 28px;
            width: 121px;
            margin: -11px 0 0 -10px;
            text-decoration: none;

            cursor:pointer;
        }
        .root
        {
            list-style:none;
            margin:0px;
            padding:0px;
            font-size: 11px;
            padding: 11px 0 0 0px;
      
         
        }
        .header
        {
           
            font-size: 11px;
           
           
          
        }

Open in new window

both the contents of the resultDiv and resultSchoolListDiv are being populated via jquery.ajax calls.

I have the following code

("#resultsDiv").delegate("click", ".header", function(e){
     e.preventDefault();
     var index = $(this).index();
     //alert(index);
    //make the corresponding //$("#resultSchoolListDiv>dropdownSchoolList:eq(index)").show();
});

Open in new window

Now, the dropdownSchoolList is not available when the above piece of code is executed. So what I need is a delegate within a delegate. Is there a way to accomplish
$("#resultSchoolListDiv>dropdownSchoolList:eq(index)").show();

Chris Stanyon

Delegate is for binding events. Not sure you need that.

As long as your ajax call has created the dropdownSchoolList elements before you click the .header you can hide or show them as normal.

Chris Stanyon

Actually, it looks like your arguments are the wrong way round for the delegate function. It should be:

$("#resultsDiv").delegate(".header", "click", function(e){

Although in your code, you have no elements with a header class!

sanagarwl

ASKER

Chris,

the dropdownSchoolList are populated I checked via firebug...

but the following code does not seem to do anything

("#resultsDiv").delegate("click", ".root", function(e){
     e.preventDefault();
     var index = $(this).index();
     //alert(index);
    //make the corresponding school list visible $("#resultSchoolListDiv>dropdownSchoolList:eq(o)").show();
});

Open in new window

or for that matter replacing the 0 with 1 or 2 - there are three dropdownschoollists that are siblings are children of resultschoolistdiv.

also, is there a way to have the following syntax and use the value of the variable index. I tried $index, ${index} but nothing seems to work.

$("#resultSchoolListDiv>dropdownSchoolList:eq(index)").show();

Open in new window

sanagarwl

ASKER

$("#resultSchoolListDiv>dropdownSchoolList:eq(o)").show(); *is* uncommented.
Was not able to paste correctly...

sanagarwl

ASKER

sorry about that here's the code again

("#resultsDiv").delegate(".root", "click", function(e){
     e.preventDefault();
     var index = $(this).index();
     //alert(index);
   $("#resultSchoolListDiv>dropdownSchoolList:eq(0)").show();
});

Open in new window

Chris Stanyon

Your delegate function is still the wrong way round!

This is the code you need:

$("#resultsDiv").delegate(".root", "click", function(){
var index = $(this).index();
$("#resultSchoolListDiv").find(".dropdownSchoolList").eq(index).show();
});

Also, check your HTML - in the code you posted above, none of the dropdownSchoolList DIVs are closed properly - should be </div> - you have <div>

Chris Stanyon

Sorry, cross-posting - I see you've fixed delegate()

sanagarwl

ASKER

thank you again - my selector was not formed correctly - it works!!!

I was missing the period before the dropdownschoollist.

"#resultsDiv").delegate(".root", "click", function(e){
     e.preventDefault();
     var index = $(this).index();
     //alert(index);
  $("#resultSchoolListDiv>.dropdownSchoolList:eq(0)").show();
});

Open in new window

just one quick question regarding using var index in the eq function so can I do something like this

$("#resultSchoolListDiv>.dropdownSchoolList:eq(index)").show();

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sanagarwl

ASKER

awesome! - thanks a bunch Chris. I of course went with your syntax - it is cleaner and better.
BTW - besides the jquery API - I'm referring to Learning jQuery, javascrpt design patterns, jquery cookbooks and jquery UI. Any other book/ resources you would recommend.

Also, is backbone.js or any other libraries you would recommend. again thank a lot

Chris Stanyon

Cool :)

For learning jQuery, a good bet is Google, a local development platform (WAMP, XAMPP, etc), and Firefox / Firebug - search, code, and debug - best way to learn :)

There also a list of tutorials on jQuery's own site - http://docs.jquery.com/Tutorials - to get you going.

As for other libraries - it depends. As a general purpose javascript library, I would say that jQuery is the way to go. Other libraries may give you additional, specific functionality, and some (a lot) may be extensions to jQuery. Can't say anything about backbone.js because I've never used it.