MixItUp not working on Select box (works with button)

Question

I need to filter a MixItUp based on the selection of a dropbox. I have a physical button working, but when I try to change it to a select box my code fails.

Here is a functioning button that properly fires the MixItUp filter:

<button class="filter btn red" data-filter=".2" data-parent="#plan_list" href="#2" data-toggle="collapse" onclick="set_plan("test","2")" id="plan-2"><i class="fa fa-tag margin-right-10"></i>test</button>

The function fires on change, but the filter is not being applied. (I have a custom function that fires, so I know the call is working).

My code is based off this codepen: http://codepen.io/patrickkunka/pen/btCim

Here is the JS for the change:

$(function(){
    var $filterSelect = $('#FilterSelect'),
    $container = $('#Container');
    $container.mixItUp();
    $filterSelect.on('change', function(){
       $container.mixItUp('filter', '.'+this.value);
       set_plan('test',this.value); //custom function working properly
    });
});

In the JS above this.value is the plan_id . I have to add the '.'+this.value in the code above here so that other functions can work on the clean plan id. I have tested this code and that part works so I know its not the issue.

Here is the code for the select (php):

<select id="FilterSelect">
<? foreach ($plans as $plan) {echo '<option value="'.$plan['id'].'">'.$plan['name'].'</option> ';?>
</select>

Can anyone tell me what I missed? The button works, the select does not.

srt8driver srt8driver · Accepted Answer · 2015-11-05T19:34:28

I discovered the problem. Its not in the code listed above:

I was missing the container id for the html categories to be filtered.

<div class="Container">

should have been:

<div id="Container" >

Stupid simple mistake, I reviewed this code several times and saw it, but in my mind read it as id not class.

New question, how do I fix the bugs in my brain????!!!

MixItUp not working on Select box (works with button)

1 Answers