Question

I’m using the ‘Filtering Blocks‘ tutorial on the CSS-Tricks website which allows you to filter a list of items by category.

It’s working great on an events website I’m working on, but there is no way to display a message if there are no items in a category e.g. ‘There are no upcoming events in this category’.

The code works by matching an ID in the category navigation with a class in the main listing. ‘style=”display: none;”‘ is added to any list item which doesn’t match the user’s selected category.

Here is the category navigation markup:

<ul id="category-filter">
    <li><a href="#" id="all" class="current">VIEW ALL</a></li>
    <li><a href="#" id="arts" class="filter">Arts</a></li>
    <li><a href="#" id="conference" class="filter">Conferences</a></li>
    <li><a href="#" id="exhib" class="filter">Exhibitions</a></li>
    <li><a href="#" id="faith" class="filter">Faith</a></li>
    <li><a href="#" id="lecture" class="filter">Lectures</a></li>
    <li><a href="#" id="open" class="filter">Open days</a></li>
    <li><a href="#" id="sport" class="filter">Sport</a></li>
</ul>

Here is an example of a few events:

<ul id="events-list">
    <li class="event open">
        <h3><a href="#">Open day title</a></h3>
        <small>Date and time</small>
    </li>
    <li class="event conference">
        <h3><a href="#">Conference title</a></h3>
        <small>Date and time</small>           
    </li>
    <li class="event sport">
        <h3><a href="#">Sport title</a></h3>
        <small>Date and time</small>           
    </li>
</ul>

And finally, the jQuery code:

$(function(){

    $("#all").click(function(){
        $(".event").slideDown("fast");
        $("#category-filter a").removeClass("current");
        $(this).addClass("current");
        return false;
    });

    $(".filter").click(function(){
        var thisFilter = $(this).attr("id");
        $(".event").slideUp("fast");
        $("."+ thisFilter).slideDown("fast");
        $("#category-filter a").removeClass("current");
        $(this).addClass("current");
        return false;
    });

});

Is it possible to change or add to this code to display a ‘no events’ message when appropriate? If so, any help would be greatly appreciated as I simply don’t know where to start!

Many thanks in advance.

Answer 1

This should work:

Add a <li> specifically for showing the no results found message:

<li class="event noresults">
    <h3>No results</h3>
    <small>please select a different category</small>           
</li>

Change your script to:

$(function() {

    // hide the noresults <li>
    $(".noresults").hide();

    $(".filter").click(function() {
        var thisFilter = $(this).attr("id");
        $(".event").slideUp("fast");

        // get a list of filtered items
        var $filteredItems = $("." + thisFilter);

        // if there are none, show something special
        if ($filteredItems.size() == 0) {
            // show the noresults message
            $(".noresults").slideDown("fast");
        }
        else {
            // open the filtereditems 
            $filteredItems.slideDown("fast");
        }
        $("#category-filter a").removeClass("current");
        $(this).addClass("current");
        return false;
    });
});