CODEWITHSUNDEEP
jqueryhtmlwhitespace
Branforge Creative Strategies
Branforge Creative Strategies

Reputation: 37

Using jQuery to manage Database populated Filter name to display a few portfolio items

I have a product page where I have created a filter to sort the product list by its category. 

$(document).ready(function() {
  $(".tab").click(function() {
    var value = $(this).attr('data-filter');
    if (value == "all") {
      //$('.filter').removeClass('hidden');
      $('.filter').show('1000');
    } else {
      $(".filter").not('.' + value).hide('3000');
      $('.filter').filter('.' + value).show('3000');
    }
  });

  if ($(".tab").removeClass("active")) {
    $(this).removeClass("active");
  }

  $(this).addClass("active");

Everything works fine, but I have one category named "Power Tool", and only this filter not working for me. I suspect the problem is the whitespace between 'power' and 'tools'.

You can see this code working here: http://www.buildersmart.net/products.php

Upvotes: 1

Views: 64

Answers (1)

Muhammad Tashfeen
Muhammad Tashfeen

Reputation: 673

This will do the magic for the case you have. 

$(document).ready(function() {
      $(".tab").click(function() {
        var value = $(this).attr('data-filter');
            value = value.split(' ').join('.');
        if (value == "all") {
          //$('.filter').removeClass('hidden');
          $('.filter').show('1000');
        } else {
          $(".filter").not('.' + value).hide('3000');
          $('.filter').filter('.' + value).show('3000');
        }
      });

      if ($(".tab").removeClass("active")) {
        $(this).removeClass("active");
      }

      $(this).addClass("active");

Note: value = value.split(' ').join('.');

This piece of code will remove the spaces with dots. So "Power Tools" will become "Power.Tools". Then jQuery selector can pick it up like 

$('.Power.Tools').show('3000');

Upvotes: 2

Related Questions