How to keep the last preferences in the Jquery select / option filter system?

user_14207005 0
Viewed 93

I've found a very useful Jquery example to filter divs based on changing select options.

Here is the fiddle: https://jsfiddle.net/vgdwyqxb/

My problem is: I use this code for filtering projects and every single project has a URL that goes to another page. When a user clicks on a project, he/she goes to project detail page. On those pages, there is a "Go Back" button. When they go back, all filtering selections are lost. I want to hold the filter selections.

I added a goBack() method in other page to go back to filter page. When I click on goback, filter page remembers which option was selected but all divs appear (not filtering divs). As far as i know "changing option" must be done in order to filter divs, so when i go back to filter page, even my last selected option is selected, it doesn't filter anymore.

My question is: What should i do to make filter page remember when users go back from project detail page?

Thanks in advance.

jQuery('#selectContainer select').on('change', function() {
var color = jQuery('#select-1').val();
var shape = jQuery('#select-2').val();
var style = jQuery('#select-3').val();


  jQuery('div.object').hide();
  
  jQuery('div.object').each(function() {
    if(jQuery(this).hasClass(color) && jQuery(this).hasClass(shape) && jQuery(this).hasClass(style)) {
    jQuery(this).show();
    }
  });
  
});


//$( document ).ready(function() {
$('#btnAuckland').click(function(){ 

    $('#select-1').val('Red').trigger('change');
})
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<div id="selectContainer">
  <select name="select-1" id="select-1">
        <option value="allColors">All</option>
        <option value="Red">Red</option>
        <option value="Blue">Blue</option>
    </select>
    <select name="select-2" id="select-2">
        <option value="allShapes">All</option>
        <option value="Square">Square</option>
        <option value="Circle">Circle</option>
    </select>
    <select name="select-3" id="select-3">
        <option value="allStyles" selected>All</option>
        <option value="Solid">Solid</option>
        <option value="Outline">Outline</option>
    </select>
</div>
    <hr />
    <div class="object allColors allShapes allStyles Red Square Solid">
        <p><a href="nextpage.html"> This is a solid, red square. </a> </p>
    </div>
    <div class="object allColors allShapes allStyles Red Square Outline">
        <p>This is a red, square outline.</p>
    </div>
    <div class="object allColors allShapes allStyles Red Circle Solid">
        <p>This is a solid, red circle.</p>
    </div>
    <div class="object allColors allShapes allStyles Red Circle Outline">
        <p>This is a red, circle outline.</p>
    </div>
    <div class="object allColors allShapes allStyles Blue Square Solid">
        <p>This is a solid, blue square.</p>
    </div>
    <div class="object allColors allShapes allStyles Blue Square Outline">
        <p>This is a blue, square outline.</p>
    </div>
    <div class="object allColors allShapes allStyles Blue Circle Solid">
        <p>This is a solid, blue circle.</p>
    </div>
    <div class="object allColors allShapes allStyles Blue Circle Outline">
        <p>This is a blue, circle outline.</p>
    </div>

filter html jquery javascript
1 Answers

To achieve your goal you can use localStorage() to save a JSON-encoded string which contains the last selections made from the three filter select elements.

When the page is loaded you can then retrieve that JSON, apply the selected values back to the select and filter the content once more. Here's what the code to do this could look like:

// Save the selected values to JSON in localStorage
let saveObjectFilterSettings = () => {
  let filters = $('#selectContainer select').map((i, el) => ({
    id: el.id,
    val: el.value
  })).get();
  localStorage.setItem('filter', JSON.stringify(filters));
}

// Retrieve the filter JSON from localStorage and apply it to the DOM
let retrieveObjectFilterSettings = () => {
  let filters = JSON.parse(localStorage.getItem('filter') || '[]');
  filters.forEach(obj => $(`#${obj.id}`).val(obj.val));
}

// Apply the selected filters to the DOM
let filterObjects = () => {
  var color = $('#select-1').val();
  var shape = $('#select-2').val();
  var style = $('#select-3').val();

  $('div.object').each(function() {
    let $el = $(this);
    $el.toggle($el.hasClass(color) && $el.hasClass(shape) && $el.hasClass(style))
  });
}

jQuery($ => {
  retrieveObjectFilterSettings();
  filterObjects();

  $('#selectContainer select').on('change', function() {
    saveObjectFilterSettings();
    filterObjects();
  });
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<div id="selectContainer">
  <select name="select-1" id="select-1">
    <option value="allColors">All</option>
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
  </select>
  <select name="select-2" id="select-2">
    <option value="allShapes">All</option>
    <option value="Square">Square</option>
    <option value="Circle">Circle</option>
  </select>
  <select name="select-3" id="select-3">
    <option value="allStyles" selected>All</option>
    <option value="Solid">Solid</option>
    <option value="Outline">Outline</option>
  </select>
</div>
<hr />
<div class="object allColors allShapes allStyles Red Square Solid">
  <p><a href="nextpage.html"> This is a solid, red square. </a> </p>
</div>
<div class="object allColors allShapes allStyles Red Square Outline">
  <p>This is a red, square outline.</p>
</div>
<div class="object allColors allShapes allStyles Red Circle Solid">
  <p>This is a solid, red circle.</p>
</div>
<div class="object allColors allShapes allStyles Red Circle Outline">
  <p>This is a red, circle outline.</p>
</div>
<div class="object allColors allShapes allStyles Blue Square Solid">
  <p>This is a solid, blue square.</p>
</div>
<div class="object allColors allShapes allStyles Blue Square Outline">
  <p>This is a blue, square outline.</p>
</div>
<div class="object allColors allShapes allStyles Blue Circle Solid">
  <p>This is a solid, blue circle.</p>
</div>
<div class="object allColors allShapes allStyles Blue Circle Outline">
  <p>This is a blue, circle outline.</p>
</div>

Here's a working example in a jsFiddle - I had to use a fiddle for this as SO snippets are sandboxed and don't allow access to localStorage.

user_5194130
Related