Skip to content

Commit 4f3a1ac

Browse files
Jiren PatelJiren Patel
Jiren Patel
authored and
Jiren Patel
committed
Added demo code for filter using link.
- Updated readme for filter using link
1 parent 9f14d91 commit 4f3a1ac

3 files changed

Lines changed: 45 additions & 1 deletion

File tree

‎README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,32 @@ Triggering the filter
9494
This will render each JSON object to html and append to '#people_list' div.
9595
Second arg is object render function which can be customized as show above.
9696

97+
Filter using link
98+
-----------------
99+
100+
Define link with hidden input. Link data-target is hidden input id and data-value is use to set
101+
hidden input value.
102+
103+
<a id="filter_by_link" href="#" data-value="100-200" data-target='#link_filter'>Price: 100 - 200</a>
104+
<input type="hidden" id="link_filter"/>
105+
106+
Add filter criteria to setting.
107+
108+
link_filter: ['#link_filter .EVENT.change .SELECT.:input .TYPE.range', 'amount']
109+
110+
To clear filter. data-value set to data-taget element which is hidden field associated with link.
111+
112+
<a id="clear_link_filter" href="#" data-target="#link_filter" data-value='0-above'>Clear</a>
113+
114+
Bind event on filter link and clear filter link. Here on click link data-value set to data-target element value.
115+
116+
$('#filter_by_link, #clear_link_filter').click(function(e){
117+
e.preventDefault();
118+
$($(this).data('target')).val($(this).data('value'));
119+
fJS.filter();
120+
});
121+
122+
97123
Mustache.js integration
98124
-----------------------
99125

‎demo/demo.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,13 @@ jQuery(document).ready(function($) {
3636
}
3737
});
3838

39+
$('#filter_by_link, #clear_link_filter').click(function(e){
40+
e.preventDefault();
41+
$($(this).data('target')).val($(this).data('value'));
42+
fJS.filter();
43+
});
44+
45+
3946
fJS = filterInit();
4047

4148
//For Demo
@@ -120,7 +127,8 @@ function filterInit(filter_type){
120127
nonprofit: ['#nonprofit_list input:checkbox .EVENT.click .SELECT.:checked' , 'nonprofit.nonprofit_categories.ARRAY.category_id'],
121128
price: ['#price_list input:checkbox .EVENT.click .SELECT.:checked .TYPE.range', 'amount'],
122129
amount: ['#price_filter .EVENT.change .SELECT.:input .TYPE.range', 'amount'],
123-
timeleft: ['#timeleft_filter .EVENT.change .SELECT.:input .TYPE.range', 'timeleft']
130+
timeleft: ['#timeleft_filter .EVENT.change .SELECT.:input .TYPE.range', 'timeleft'],
131+
link_filter: ['#link_filter .EVENT.change .SELECT.:input .TYPE.range', 'amount']
124132
},
125133
and_filter_on: true //If any filter selection is zero then select none. For 'OR' filter set 'false'
126134
};

‎demo/filterjs.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,16 @@ <h3>Filter by TimeLeft</h3>
5050
<input type="hidden" id="timeleft_filter"/>
5151
</div>
5252
</div>
53+
<div class="sidebar_left_find">
54+
<div class="sidebar_list" id="link_filter_section">
55+
<h3>Filter using Link</h3>
56+
<strong>Link as Input for filter</strong>
57+
<a id="clear_link_filter" href="#" data-target="#link_filter" data-value='0-above'>Clear</a>
58+
<br/>
59+
<a id="filter_by_link" href="#" data-value="100-200" data-target='#link_filter'>Price: 100 - 200</a>
60+
<input type="hidden" id="link_filter" value="100-200" />
61+
</div>
62+
</div>
5363
<div class="sidebar_left_find">
5464
<div class="sidebar_list">
5565
<h3>Filter by Category</h3>

0 commit comments

Comments
 (0)