Question

I have created a javascript filter that is working but not all the time. To first see this in action, visit the following link. On the left side, click on the Bridgestone e6 link under “Brand Model”. It returns nothing, but in reality it should return 3 products in the view.

The way the filter works is as follows. I grab the value of the item clicked on the sidebar, then I search the html elements in the main view to see if there are any matches. If there are, I only show those products in the view and hide the rest.

The javascript that takes care of this is (also you can see it here):

Is it some whitespace issue or something incorrect in my JS? I tried to use the jQuery trim function to no avail.

The javascript:

var noProductMatches = jQuery('.no-products-found');

jQuery('#filter-by-brand li a').click(function() 
{
    noProductMatches.hide();

    var brandNameSelected = jQuery(this).html();
    var productVendorFromCollection = jQuery("#product-vendor");
    var productContainer = jQuery('#product-collection .productBoxWrapper');

    if (brandNameSelected == 'All Brands' )
    {
        productContainer.fadeIn("slow");
    }
    else 
    {
        var results = jQuery(".productBoxWrapper")
            .fadeOut(100)
            .delay(100)
            .filter(function() 
            {
                return jQuery(this).html().indexOf(brandNameSelected) > -1 || jQuery(this).html().indexOf(productVendorFromCollection) > -1;  
            })
            .each(function(index, item) 
            {
                jQuery(item).fadeIn("slow");
            });

            if (results.length == 0)
            {
                noProductMatches.fadeIn();
            }
    }
});

jQuery('#filter-by-model li a').click(function() 
{
    noProductMatches.hide();

    var brandNameSelected = jQuery.trim(jQuery(this).html());
    var productContainer = jQuery('#product-collection .productBoxWrapper');

    if (brandNameSelected == 'Any Model' )
    {
        productContainer.fadeIn("slow");
    }
    else 
    {
        var results = productContainer
            .fadeOut(100)
            .delay(100)
            .filter(function() 
            {
                return jQuery.trim(jQuery(this).html()).indexOf(brandNameSelected) > -1;  
            })
            .each(function(index, item) 
            {
                jQuery(item).fadeIn("slow");
            });

            if (results.length == 0)
            {
                noProductMatches.fadeIn();
            }
    }
});


jQuery('#filter-by-price li a').click(function() 
{
    noProductMatches.hide();

    var priceRangeSelectedItem = jQuery(this).html();
    var minSelectedPrice = parseInt( jQuery(this).attr("name") );
    var maxSelectedPrice = parseInt( jQuery(this).attr("title") );
    var productContainer = jQuery('#product-collection .productBoxWrapper');

    if (priceRangeSelectedItem == 'Any Price')
    {
        productContainer.fadeIn("slow");
    }
    else
    {
        var results = jQuery(".productBoxWrapper")
            .fadeOut(100)
            .delay(100)
            .filter(function() 
            {
                var minProductPrice = parseInt( jQuery(this).find("#lowestPriceRange").html() );
                var maxProductPrice = parseInt( jQuery(this).find("#highestPriceRange").html() );
                //alert(minProductPrice);
                //alert(maxProductPrice);

                return (minProductPrice >= minSelectedPrice &&  maxProductPrice <= maxSelectedPrice);
            })
            .each(function(index, item) 
            {
                jQuery(item).fadeIn("slow");
            });

            if (results.length == 0)
            {
                noProductMatches.fadeIn();
            }
    }
});

Answer 1

The problem is that it is mixed case. In the menu it says Bridgestone e6 but on the page it says Bridgestone E6, with an uppercase E. Either you have to make everything lowercase when you search our make sure they are equal in the menu and on the page.