CODEWITHSUNDEEP
javascriptjquery
user3284007
user3284007

Reputation: 1717

Unable to get Quicksand.js working

I'm trying to filter collections of data using quicksand.js. However, I'm having problems getting my data to appear. I have been able to get the data to disappear. Yet, it won't re-appear. I've created a jsfiddle, which is available here. Basically, my JavaScript looks like this:

var $content = $('#stage');
var $data = $content.clone();

function filterData(tag) {
  var data = [];
  if (tag === null) {
    data = $data.find('li');
  } else {
    data = $data.find('li[data-tags=' + tag + ']');
  }

  console.log(data);
  $content.quicksand(data, {
    duration: 800,
    easing: 'easeInOutQuad'
  });
  return false;
}

Everything looks correct to me. I can't figure out what I'm doing wrong.

Upvotes: 0

Views: 47

Answers (1)

Mark
Mark

Reputation: 108507

First, your fiddle is broken. One, you link quicksand 1.3 and pair it with a recent jquery version it doesn't support. Two, you call out the easeInOutQuad without linking the jquery.easing.1.3.js. Three, you have scope issues, the filterData function is not defined globally.

Your real problem, though, is this line in the documentation:

attribute – attribute containing unique value able to identify same item within source and destination collection, default: 'data-id'

None of your "stage" data lis have this attribute so it won't filter them properly. Add it and all seems to work:

<ul id="stage">
  <li data-tags="A" data-id="1">Item A-1</li>
  <li data-tags="A" data-id="2">Item A-2</li>

  <li data-tags="B" data-id="3">Item B-1</li>
  <li data-tags="B" data-id="4">Item B-2</li>
</ul>

Updated fiddle.

Upvotes: 2

Related Questions