Multiple filters in jQuery

Question

I am using http://mixitup.io/ library to provide filtering for my simple list of items. Everything works fine, except one thing: multiple level filters which I need.

I have two types of filtering, one is based on "type", and one on "manufacturer". So, lets say I want to show "typeA" from "manufacturer1", or some other combination. Items would need to satisfy both of those to be shown on the list.

I can't get that to work, and upon clicking on the filters, I can show only "typeA", which will include all manufacturers, or "manufacturerA", which shows multiple types, but that's not what I want.

I have included the jsfiddle with the code I have now here: http://jsfiddle.net/QtQnB/62/

For the filters, I used this:

<div id="filter">
    <span>Type</span>
    <ul class="filter-list">
        <li data-filter="lemon" class="filter" data-dimension="type"><a href="#">Lemon</a></li>
        <li data-filter="orange" class="filter" data-dimension="type"><a href="#">Orange</a></li>
        <li data-filter="apple" class="filter" data-dimension="type"><a href="#">Apple</a></li>
    </ul>


    <span>Manufacturer</span>
    <ul class="filter-list">
        <li data-filter="1" class="filter" data-dimension="manufacturer"><a href="#">1</a></li>
        <li data-filter="2" class="filter" data-dimension="manufacturer"><a href="#">2</a></li>
    </ul>
</div>

The item list is as follows:

<ul id="grid">
    <li class="mix lemon small">
        <h3> small Lemon</h3>
        <p>Some text here</p>
    </li>
    <li class="mix orange small">
        <h3>small Orange</h3>
        <p>Some text here</p>
    </li>
    <li class="mix apple medium">
        <h3>medium Apple</h3>
        <p>Some text here</p>
    </li>
    <li class="mix lemon big">
        <h3>big Lemon</h3>
        <p>Some text here</p>
    </li>
    <li class="mix orange medium">
        <h3>medium Orange</h3>
        <p>Some text here</p>
    </li>
    <li class="mix apple big">
        <h3>big Apple</h3>
        <p>Some text here</p>
    </li>
</ul>

And then the simple js code to initialize the mixitup, load initial items and try to apply the filter for multiple categories with the last line, which is not working:

$('#grid').mixitup({
    showOnLoad: "2 orange",
    filterLogic : 'and'});

var $filters = $('.filter-list').find('li'), dimensions = {type: 'orange', manufacturer: '2' };


$filters.on('click',function(){
var $t = $(this),
    dimension = $t.attr('data-dimension'),
    filter = $t.attr('data-filter');
    console.info("dimension: "+dimension);
    console.info("filter "+filter);
    console.info("current filter for this cat: "+dimensions[dimension]);
    dimensions[dimension] = filter;
    console.info("selected filter for this cat: "+dimensions[dimension]);
    console.info("type: "+ dimensions['type']);
    console.info("manufacturer: "+ dimensions['manufacturer']);
    var filterString = dimensions['type'] + " " + dimensions['manufacturer'];



$('#grid').mixitup('filter',filterString);
});

I looked at other questions, and example they have provided with the library, but I simply cant get this to work.

Thanks

Answer 1

It's not your fault! It took me an hour to figure out, but it turns out that there are existing click events that you have to remove first. I don't know why their examples don't show it.

If you add $filters.unbind('click'); after your var $filters... line, it'll work.

jsFiddle