filter-collections icon indicating copy to clipboard operation
filter-collections copied to clipboard

Filters not updating dynamically

Open alagunambi opened this issue 11 years ago • 2 comments

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>

alagunambi avatar Feb 20 '14 21:02 alagunambi

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,

julpod avatar Feb 21 '14 01:02 julpod

Hi, This is the test app, I am trying. https://github.com/alagunambi/meteoscraper

alagunambi avatar Feb 21 '14 05:02 alagunambi