Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Passing jQuery filter object to Isotope.. nothing happens.

All of my isotope elements have classes describing the price. For example:

<figure class=\"items cap-top VAUT price9800 lon-118.40036 lat34.07364 isotope-item\">... </figure>

I have a listening object on a jQuery range slider that returns a price range:

// Init price slider with range $0-$500
$(\'.slider\').slider({
    min: 0,
max: 500,
step: 100,
value: [0,500]
});

//Price Slider Listener
$(\'#priceSlider\').on(\'slideStop\', function() {
    selectedPriceRange = $(\'input[id=priceSlider]\').val();
    var priceRange = selectedPriceRange.split(\',\');

    //Pass the range the user has chosen to our function to filter isotope
    priceFilterTesting(riceRange[0], priceRange[1]);
});

Per the discussion on Isotopes Github forums here I am trying to pass a jQuery object to Isotopes filter option. Read Here: https://github.com/desandro/isotope/issues/144#issuecomment-4595552

 function priceFilterTesting(minPrice, maxPrice){
  var value = $(\'.items\').filter(function(index){
    var $this = $(this);
    var matcharr = $this.attr(\'class\').match(/price([0-9]*)/);
    if (matcharr) {
        var price = parseInt(matcharr[1]);
        return ((price >= minPrice) && (price <= maxPrice)) ? true : false;
    } else {
        return false;
    }
  });
  options = [];
  options[ \'filter\' ] = value;
  console.log(options); 
  $(\'#results\').isotope(options);
}

For some reason when this object is passed into Isotope, nothing happens. Here is what I see in java script console when I log my object

[filter: st.fn.st.init[9]]
filter: st.fn.st.init[9]
    0: figure.items pin cap-top SJWL price6500 lon-118.40036 lat34.07362 hasImage hasImage                 isotope-item
    1: figure.items pin cap-top SFUR price400 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    2: figure.items pin cap-top SFUR price199 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    3: figure.items pin cap-top SFUR price250 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    4: figure.items pin cap-top SFUR price599 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    5: figure.items pin cap-top SFUR price130 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    6: figure.items pin cap-top SFUR price299 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    7: figure.items pin cap-top SANT price125 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    8: figure.items pin cap-top VPAR price80 lon-118.40036 lat34.07362 hasImage hasImage 
context: document length: 9 prevObject: st.fn.st.init[30] proto: Object[0] length: 0 proto: Array[0]

Help? Many thanks, world.

User Gravatar

that1guy

Posted Jun 22 2013 5:25 UTC

$5


  • Assigned To NBoychev
  • Solved
  • jquery
    isotope
  • 1443 Views

4 Replies


Hello that1guy,

You are passing an array, not an object. Isotope needs an object for filtering. I prefer using more simple code:

   function priceFilterTesting(minPrice, maxPrice){
  var value = $(\'.items\').filter(function(index){
    var $this = $(this);
    var matcharr = $this.attr(\'class\').match(/price([0-9]*)/);
    if (matcharr) {
        var price = parseInt(matcharr[1]);
        return ((price >= minPrice) && (price <= maxPrice)) ? true : false;
    } else {
        return false;
    }
  });
  $(\'\'#results\').isotope({ filter: value});

Regards, Nikola Boychev

User Gravatar

NBoychev

Posted Jun 22 2013 20:14 UTC

Solution

This didn't solve your task? Get your own custom solution.

(Sigh).. Thank you.

User Gravatar

that1guy

Posted Jun 23 2013 6:48 UTC

@NBoychev.. Silly question, but I can\'t figure out how to pay bounty.. How do I pay you man??

User Gravatar

that1guy

Posted Jun 23 2013 6:52 UTC

Hey that1guy, I\'ve sent you a mail to the address you\'ve signed up with. If you didn\'t get it please contact me at support@codersclan.net.

Thanks!

User Gravatar

CodersClan-Team

Posted Jun 23 2013 9:43 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions