filter-collections
filter-collections copied to clipboard
Filters not updating dynamically
I am trying to filter my collection "PriceList" and successfully implemented sorting, which works perfectly fine, but when I tried to implement filters and search, it is acting strangely. When I click custom filter buttons, they dont update the template dymanically, but when I do sorting after that, template gets updated, any idea where I am doing mistake? The following are the files, let me know if any more information needed.
price_list.js
PriceListFilter = new Meteor.FilterCollections(PriceList, {
name: "PriceListFC",
template: 'price_list',
filters: {
"trip": {
title: 'Trips',
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>
Hi, I've checked provided code and I can't find anything strange.
The only thing that makes me think is that in your description, you've said that the filter does happen once you clicked the sort trigger so I'm thinking if you are not having another piece of code disturbing the fc-filter event (something like $('form.navbar-form a').click(...))
Another question that I'm asking myself is what is the publisher for PriceListFC.
Perhaps you could provide a full live example or a github repo where I could reproduce and test?
Thanks,
Hi, This is the test app, I am trying. https://github.com/alagunambi/meteoscraper