CODEWITHSUNDEEP
jqueryjquery-selectors
globalSchmidt
globalSchmidt

Reputation: 1339

Dynamically select one member of class

Goal: show "loader" div on the member of the loader class that was clicked.

I have a series of navpills that operate to fill an adjacent container with content. Some content takes a while to load so I have a "loader" css class that I want to appear on the navpill. I have this working when I put the on only one pill, but then the animated gif launches every time ANY navpill is clicked.

My approach has been to use data-category-id as an identifier, but I can't get the selector to work properly. Here's the html:

<ul class="navpills">
    <li class="category navlink category-button" 
        id="new" 
        data-category-id="new">
        What's new in 2014!<div class="loader"></div></li>
    <li class="category navlink category-button" 
        id="weather" 
        data-category-id="weather">
        Water & Weather<div class="loader"></div></li>
    <li class="category navlink category-button" 
        id="sportcourt" 
        data-category-id="sportcourt"> 
        Sport Court<div class="loader"></div></li>
    //...more navpill li's
</ul>

And the jquery/javascript is:

//initially, hide all loaders
$(".loader").hide();

// Click handler for category_button class
$(".category-button").click(function(e) {

//if category-id is present, extract the category-id and show loader    
if($(this).attr("data-category-id")) {
        categoryId = $(this).attr("data-category-id");

        $(".loader[data-category-id = categoryId]").show();
    }

    //sendServiceRequest is a generic function to take 3 inpouts ( name-value pair, a success callback function, a failure callback function) and process an ajax post;
    sendServiceRequest(
        "category-id=" + categoryId,
        function(data, status){
            $("#main_content").html("");
            $("#main_content").html(data);
            $("#main_content").show();
            $(".loader").hide();
            $("#main_content").scrollView();
        },
        function(data, status, error){
            $(".loader").hide();
            console.log("FAIL!");            
        });        
});

I am expecting to have the loader div show on the navpill that was clicked, but so far the loader appears on none of the navpills.

Why won't this work?

Upvotes: 1

Views: 158

Answers (1)

OlivierH
OlivierH

Reputation: 3890

The thing is that you are selecting all loaders everytime : 

$(".loader[data-category-id = categoryId]").show();

Means : get me all elements which have loader class and data-category-id attribute with a value of categoryId variable. BTW, your syntax is incorrect, you should have : 

$(".loader[data-category-id = '"+categoryId+"']").show();

Moreover, loaders div don't have data-category-id attribute in your HTML.

You have to select the loader only in the current node. You have two ways to do it : 

$(this).find(".loader").show();

Because your are in an event handler on a specific node, you can access the current node with this, $(this) to get the corresponding jQuery object. Here, it means "find me all sons elements of my current node with loader class".

Or

$(".loader", $(this)).show();

The second argument of a jQuery selector allow you to precise a context in which elements will be searched.

Don't forget to make this change on the hide too.

Upvotes: 1

Related Questions