Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 319
  • Last Modified:

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();
0
sanagarwl
Asked:
sanagarwl
  • 6
  • 5
1 Solution
 
Chris StanyonCommented:
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.
0
 
Chris StanyonCommented:
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!
0
 
sanagarwlAuthor Commented:
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

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
sanagarwlAuthor Commented:
$("#resultSchoolListDiv>dropdownSchoolList:eq(o)").show(); *is* uncommented.
Was not able to paste correctly...
0
 
sanagarwlAuthor Commented:
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

0
 
Chris StanyonCommented:
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>
0
 
Chris StanyonCommented:
Sorry, cross-posting - I see you've fixed delegate()
0
 
sanagarwlAuthor Commented:
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();
0
 
Chris StanyonCommented:
If you look at my code, it's done slightly differently - which is the more efficient (quicker) way of doing it (using the eq() function rather than the :eq selector)

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

If you want to do it your way, you'll need to concatenate the index var into your selector:

$("#resultSchoolListDiv>.dropdownSchoolList:eq(" + index + ")").show();
0
 
sanagarwlAuthor Commented:
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
0
 
Chris StanyonCommented:
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.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now