I have a filter class that filters products residing inside the page.There is a function works if someone checks the filters.
Filters are check-boxes where every check box contains different value.
What my filter function do is that it checks all the checked checkboxes from the page and then uses the data-* global variable present on the list tages to decide what element to show.
Dom structure of the items will be ..
<body>
<ul class="products">
<li class="product" data-company="something" data-flavour="something"></li>
<li class="product" data-company="something" data-flavour="something"></li>
.
.
.
.
<li class="product" data-company="something" data-flavour="something"></li>
</ul>
</body>
Below one shows the the function that does the job. this.filterGridProducts = function() { $.ajax({ type:'POST', url:'test12.php', data:category, success:function(data){ $('#limitpage').html(data); // $('.product').hide(); var filteredProducts = _this.variants; //filter by colour, size, shape etc
var filterAttributes = $('input[type="checkbox"]');
var selectedFiltersValues = [];
// for each attribute check the corresponding attribute filters selected
filterAttributes.each(function(){
if(this.checked)
{
var currentFilter = $(this);
selectedFiltersValues.push("[data-" + currentFilter.attr('name') + "='" + currentFilter.val() + "']");
filteredProducts = filteredProducts.filter(selectedFiltersValues.join(','));
}
});
filteredProducts = filteredProducts.filter(function(){
return ($(this).attr('data-price')>first && $(this).attr('data-price')<=second );
});
//console.log($('.product').show());
filteredProducts.each(function(e){
console.log($(this).html().show());
$(this).show();
})
filteredProducts.show();
}
});
};
filteredProducts does contain the elements that need to be filtered but i can't see to show it.
Ajax call in the above functions loads all the elements present inside the db , The products that come from it are all hidden.
What could be the possible reason for the .show() to not work?