I've been working on filtering my "PriceList" collection and sorting is functioning perfectly. However, I'm experiencing some issues with implementing filters and search functionality. When I click on custom filter buttons, the template doesn't update dynamically. Oddly enough, when I proceed to do sorting afterwards, the template gets updated. Can anyone point out where I might be going wrong? Below are the relevant files, please let me know if more information is needed.
price_list.js
PriceListFilter = new Meteor.FilterCollections(PriceList, {
name: "PriceListFC",
template: 'price_list',
filters: {
"trip": {
title: 'Trip Types',
operator: ['$regex', 'i'],
condition: '$and',
searchable: 'optional',
},
},
sort:{
order: ['desc', 'asc'],
amount0: ['desc', 'asc'],
amount1: ['desc', 'asc'],
amount2: ['desc', 'asc'],
amount3: ['desc', 'asc'],
amount4: ['desc', 'asc'],
},
});
price_list.html
<template name="price_list">
<div class="pael panel-info">
<div class="">
<div class="pull-right">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" value="{{fcFilterSearchable.criteria}}" data-fc-search-target="search-box">
</div>
<button type="submit" class="btn btn-success fc-search-trigger" data-fc-search-trigger="search-box">Submit</button>
{{#each available}}
<a href="#" class="fc-search-fields">{{#if active}}Disable{{else}}Enable{{/if}} {{title}} filter</a>
{{/each}}
<button type="button" class="fc-filter btn btn-primary {{#if fcFilterObj.isActive 'trip' 'Single Trip'}}active{{/if}}" data-fc-filter-field="trip" data-fc-filter-value="Single Trip" >
Single Trip
</button>
<a href="#" class="fc-filter btn btn-primary {{#if fcFilterObj.isActive 'trip' 'Annual Trip'}}active{{/if}}" data-fc-filter-field="trip" data-fc-filter-value="Annual Trip" >
Annual Trip
</a>
{{#if fcFilterSearchable.criteria}}<button type="button" class="btn btn-danger fc-search-clear">Reset</button>{{/if}}
</form>
{{#if fcFilterActive}}
<div class="navbar-form pull-right">
{{#each fcFilterActive}}
<a href="#" class="btn btn-info fc-filter-clear">{{title}}: {{operator}} {{value}}</a>
{{/each}}
</div>
{{/if}}
</div>
<h4>Price Comparision</h4>
</div>
<div class="table-responsive">
<table class="table table-hover table-bordered">
<thead >
<tr class="info">
<th class="fc-sort" data-fc-sort="amount0">
InsureandGo.com - Budget
{{#if fcSort.amount0.desc}}(des){{/if}}
{{#if fcSort.amount0.asc}}(asc){{/if}}
</th>
<th class="fc-sort" data-fc-sort="amount1">
InsureandGo.com - Silver
{{#if fcSort.amount1.desc}}(des){{/if}}
{{#if fcSort.amount1.asc}}(asc){{/if}}
</th>
<th class="fc-sort" data-fc-sort="amount2">
InsureandGo.com - Gold
{{#if fcSort.amount2.desc}}(des){{/if}}
{{#if fcSort.amount2.asc}}(asc){{/if}}
</th>
<th class="fc-sort" data-fc-sort="amount3">
InsureandGo.com - Black
{{#if fcSort.amount3.desc}}(des){{/if}}
{{#if fcSort.amount3.asc}}(asc){{/if}}
</th>
<th class="fc-sort" data-fc-sort="amount4">
InsureandGo.com - Annual Silver
{{#if fcSort.amount4.desc}}(des){{/if}}
{{#if fcSort.amount4.asc}}(asc){{/if}}
</th>
</tr>
</thead>
<tbody>
{{#each fcResults}}
<tr>
<td>{{amount0}}</td>
<td>{{amount1}}</td>
<td>{{amount2}}</td>
<td>{{amount3}}</td>
<td>{{amount4}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
</template>