Databases
StackOverflow2013
Postsdbo
POCombination filters and secondary filters using j-query isotope
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCombination filters and secondary filters using j-query isotope
    text
    copied!<p>I would like to filter a list of people with isotope based on both the job they do and a subcategory of types within that job and location. Based on the top-level category, I would like the user to be able to filter using a secondary category. The categories might looks something like this: </p> <h3>Top-level categories</h3> <pre><code>Job category: Any, Office worker, Laborer, Healthcare worker Location: Any, West, East, North </code></pre> <h3>Secondary level categories:</h3> <pre><code>Office worker job types: Any, Secretary, Midlevel, Executive Laborer job types: Any, Construction, Demolition, Transportation Healthcare worker job types: Any, Doctor, Nurse, Admin </code></pre> <p>So, somebody might be tagged as: <strong>Office worker, Secretary, West</strong> or: <strong>Laborer, Demolition, North</strong></p> <p>Here is some of example code for the people and the filters: </p> <pre><code>&lt;div class="option-combo jobtype"&gt; &lt;ul class="filter option-set clearfix " data-filter-group="jobcategory"&gt; &lt;li&gt;&lt;a id="jobtype" href="#filter-jobcategory-any" data-filter-value="" class="selected anyjob"&gt;any&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="jobtype" href="#filter-jobcategory-officeworker" data-filter-value=".officeworker" class=""&gt;Office Worker&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="jobtype" href="#filter-jobcategory-laborer" data-filter-value=".laborer" class=""&gt;Laborer&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="jobtype" href="#filter-jobcategory-healthcareworker" data-filter-value=".healthcareworker" class=""&gt;Laborer&lt;/a&gt;&lt;/li&gt; &lt;/div&gt; &lt;div class="option-combo officetype"&gt; &lt;ul class="filter option-set clearfix " data-filter-group="officetype"&gt; &lt;li&gt;&lt;a id="officetype" href="#filter-officetype-any" data-filter-value="" class="selected office"&gt;any&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="officetype" href="#filter-officetype-secretary" data-filter-value=".secretary" class=""&gt;Secretary&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="officetype" href="#filter-officetype-midlevel" data-filter-value=".midlevel" class=""&gt;Midlevel&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="officetype" href="#filter-officetype-executive" data-filter-value=".executive" class=""&gt;Executive&lt;/a&gt;&lt;/li&gt; &lt;/div&gt; &lt;div class="option-combo laborertype"&gt; &lt;ul class="filter option-set clearfix " data-filter-group="laborertype"&gt; &lt;li&gt;&lt;a id="laborertype" href="#filter-laborertype-any" data-filter-value="" class="selected laborer"&gt;any&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="laborertype" href="#filter-laborertype-construction" data-filter-value=".construction" class=""&gt;construction&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="laborertype" href="#filter-laborertype-demolition" data-filter-value=".demolition" class=""&gt;demolition&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="laborertype" href="#filter-laborertype-transportation" data-filter-value=".transportation" class=""&gt;transportation&lt;/a&gt;&lt;li&gt; &lt;/div&gt; &lt;div class="option-combo healthcaretype"&gt; &lt;ul class="filter option-set clearfix " data-filter-group="healthcaretype"&gt; &lt;li&gt;&lt;a id="healthcaretype" href="#filter-healthcaretype-any" data-filter-value="" class="selected healthcare"&gt;any&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="healthcaretype" href="#filter-healthcaretype-doctor" data-filter-value=".doctor" class=""&gt;doctor&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="healthcaretype" href="#filter-healthcaretype-nurse" data-filter-value=".nurse" class=""&gt;nurse&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="healthcaretype" href="#filter-healthcaretype-admin" data-filter-value=".admin" class=""&gt;admin&lt;/a&gt;&lt;/li&gt; &lt;/div&gt; &lt;div class="option-combo location"&gt; &lt;ul class="filter option-set clearfix " data-filter-group="location"&gt; &lt;li&gt;&lt;a id="jobtype" href="#filter-location-any" data-filter-value="" class="selected any"&gt;any&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="jobtype" href="#filter-location-west" data-filter-value=".west" class=""&gt;West&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="jobtype" href="#filter-location-east" data-filter-value=".east" class=""&gt;Midlevel&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="jobtype" href="#filter-location-north" data-filter-value=".north" class=""&gt;Executive&lt;/a&gt;&lt;/li&gt; &lt;/div&gt; &lt;div id="peoplecontainer"&gt; &lt;div class="person officeworker secretary west"&gt; John Smith &lt;/div&gt; &lt;div class="person laborer construction north"&gt; Anne Brown &lt;/div&gt; &lt;div class="person healthcareworker doctor east"&gt; Anne Brown &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The functionality I would like is that the top-level job category (any, office, labor, healthcare) and location are always visible, but the secondary job type filters are not visible initially. When a user clicks on "office worker," isotope should sort to only show office workers, and the appropriate office-related secondary filters (any, secretary, midlevel, executive) appear. The user can then further filter using those secondary job types. I can get this to work. </p> <p>But the problem arises when the user then clicks on a different top-level job category. So, let's say a user has clicked on "office worker" and "secretary." Now, the user wants to see all laborers. When the user clicks "laborer" the secondary office job type filter "secretary" is still active, and so the user sees no results. What I want to happen is for the office job type filter to lose its filtering (either by becoming inactive or defaulting to "any") so that all people in the "laborer" job category are shown. Then the user can filter by the second-level laborer job types. </p> <p>Here is the isotope jquery I'm currently using. </p> <pre><code>&lt;script&gt; $(function(){ var $filtercontainer = $('#peoplecontainer'), filters = {}; $filtercontainer.isotope({ itemSelector : '.person', masonry: { columnWidth: 80 } }); // filter buttons $('.filter a').click(function(){ var $this = $(this); // don't proceed if already selected if ( $this.hasClass('selected') ) { return; } var $optionSet = $this.parents('.option-set'); // change selected class $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected'); if($('.officeworker').hasClass('selected')){ $('#officetype').show(); $('#laborertype').hide(); $('#healthcaretype').hide(); } else if($('.laborer').hasClass('selected')){ $('#officetype').hide(); $('#laborertype').show(); $('#healthcaretype').hide(); } else if($('.healthcareworker').hasClass('selected')){ $('#officetype').hide(); $('#laborertype').hide(); $('#healthcaretype').show(); } // store filter value in object var group = $optionSet.attr('data-filter-group'); filters[ group ] = $this.attr('data-filter-value'); // convert object into array var isoFilters = []; for ( var prop in filters ) { isoFilters.push( filters[ prop ] ) } var selector = isoFilters.join(''); $filtercontainer.isotope({ filter: selector }); return false; }); }); &lt;/script&gt; </code></pre> <p>This accomplishes the combination filtering and makes the second-level job types show up only when the corresponding top-level job category is selected. But, when a new top-level job category is selected after a secondary-level filter is selected, it doesn't revert to "any" filtering for the secondary-level and maintains the filtering for the wrong top-level job category, making it so no results are shown in the isotope filtering. I've also tried putting all secondary-level job types in a single sorting set. That makes it so there's just one "any" and if a user clicks that, all results will be shown that fit the selected top-level job category. But it doesn't automatically revert to "any" so it's not much better than when the secondary-level filters are split into three groups. </p> <p>How can I make this work the way I want?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload