Getting list.js filter function to work

Question

I cannot seem to get the List.js filter function to work. And the documentation for List.js leaves a lot to be desired as a newbie developer.

Here's my code:

HTML:

<div class="col-sm-12" id="lessons">
  <input class="search" placeholder="Search" />
  <button class="filter-series">James</button>
  <ul class="list">
    {% for lesson in lessons %}
    <li>
      <h4 class="date" style="float:right;">{{lesson.date}}</h4>
      <h4 class="series">{{lesson.series}} ({{lesson.lesson_type}})</h4>
      <div style="float:clear;"></div>
        <h3 style="font-size:1.5em; color:#f68026; text-transform:uppercase;" class="title">{{lesson.title}}</h3>
        <p></p>
        <p>{{lesson.info}}</p>
        {% if lesson.url != "" %}
        <audio controls preload="none">
          <source src="{{lesson.url}}" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
        {% endif %}
        <p>
        {% if lesson.manuscript != none  %}[<a href="{{lesson.manuscript}}">Manuscript</a>]{% endif %}
        {% if lesson.handout != none %} [<a href="{{lesson.handout}}">Handout</a>]{% endif %}
        {% if lesson.ppt != none %} [<a href="{{lesson.ppt}}">PPT</a>
        {% endif %}
        </p>
    </li>
    {% endfor %}
</ul>
</div>

JS:

<!-- list.js script -->
<script type="text/javascript">
<!--
  var options = {
    valueNames: [ 'series', 'date']
  };

  var featureList = new List('lessons', options);

  $('#filter-series').on('click',function(){
    var $text = $(this).text();
    if($(this).hasClass( 'selected' )){
      featureList.filter();
      $(this).removeClass('selected');
    } else {
      featureList.filter(function(item) {
        return (item.values().series == $text);
      });
      $(this).addClass('selected');
    }
  });

});

//-->
</script>

You can see what happens here. Basically, when I hit the "James" button, nothing happens. I have searched StackOverflow looking for an answer, but I cannot get it to work.

I would eventually like to have a drop-down menu with all the lesson series for people to filter through. But just getting this one should teach me enough about list.js to get it to work.

Answer 1

You have the button setup with the class filter-series. But you are using an id selector.

The correct selector would be:

$('.filter-series').on('click', function() { ...

Answer 2

Chrome debugger (F12 in Chrome if you are not sure how to get there) tells you the problem:

Uncaught SyntaxError: Unexpected token }

You have one too many closing characters:

});

Try this:

<script type="text/javascript">
    <!--
    var options = {
        valueNames: ['series', 'date']
    };

    var featureList = new List('lessons', options);

    $('#filter-series').on('click', function () {
        var $text = $(this).text();
        if ($(this).hasClass('selected')) {
            featureList.filter();
            $(this).removeClass('selected');
        } else {
            featureList.filter(function (item) {
                return (item.values().series == $text);
            });
            $(this).addClass('selected');
        }
    });
    //removed });
    //-->
</script>

Answer 3

I also had a problem after I took into account nickles80 and Jason Heine's answer (both of which were needed and helpful).

I had:

<h4 class="series">{{lesson.series}} ({{lesson.lesson_type}})</h4>

But the function was trying to match "James to what showed up between the h4 tags. But I had, e.g. "James (Sermon)" showing up between the tags.

So I had to change it to:

      <h4 class="series">{{lesson.series}}</h4>

That works now!