Muuri: How do I control muuri.js with item load via ajax.

[ALTELMA]

From the latest issue I working on kanban board create from your plugin.
I have data more than 1,000 record and I trying to manipulate it by ajax to show only few items.
And load more when scroll.

I not quite sure muuri.js can apply element load via ajax, because now It does not work.

Do you have any suggestion?

[niklasramo]

Well, yeah. Muuri does not do infinite scrolling or ajax handling out of the box, but Muuri's API allows you to handle both of those scenarios pretty easily. Basically you just need to .add() the new items as hidden elements to the Muuri instance (just give the elements style display:none; before adding them) and the use the .filter() method to show only the elements you want.

[ALTELMA]

filter() is OK, but the main point is page load reduction from a lot of items.
Can you confirm display:none will be reduce page load?

[niklasramo]

display:none elements won't be in the render tree, but they probably will affect page load time, not sure. However, the point is that you can dynamically add and remove items, and filter them, which means that you can control the logic as you wish.

[ALTELMA]

Now I load items via Ajax, but I still have problem when load element call muuri later. I found buggy when try to call it again.

Why we call again?
I try to load few items put it to each column and then make new items apply with muuri.

function loadItems() {
     \\ Load all element and append to column container
     kanbanInit();
}

function kanbanInit() {
     $('.column').each(function() {
           var columnGrids[] = new Muuri('.column');
     });
}

Is it possible to unbind muuri and call it again?
I try to use.destroy(), but not work because cannot call after destroy.

// Throw an error if the container element is not body element or does not
// exist within the body element.
if (!body.contains(element)) {
     throw new Error('Container element must be an existing DOM element');
}

Always show this message, but that element still in page.

[ALTELMA]

OK, I found something wrong. when I call .destroy() class .muuriwill remove from container and that make container cannot call muuri anyway.

[niklasramo]

Yep, .destroy() literally destroys the muuri instance. Why are you destroying the muuri instance instead of just removing the current items and then adding new items?

[ALTELMA]

I load item with Ajax and muuri not apply for element as I told you from began.
So display:none cannot reduce page load and I cannot use add() or remove() anyway.

I will try to load 10 items first and when scroll to bottom load next 10 items.
And need to call muuri again to apply all items again.

You know what I mean?

[niklasramo]

Hmmm.. why can't you use .add() or .remove()? I'm not following completely now. You get the markup for the new elements from the ajax call right?

In any case, some actual demo code would be nice to have to actually see what the problem is here. If you can fork this example and modify it to showcase your problem I could probably help you out a bit better.

[ALTELMA]

You can look at this example.
Not at 100% like my code, but I will show you why I need to destroy muuri.

And you can show me. How to use .add() or .remove()

Thanks.

[niklasramo]

There are some issues with that piece code, but here's an example how to use .add() method there: https://codepen.io/niklasramo/pen/bYVYXz?editors=0010

You really should not add the those inline styles and classes manually to the markup, which Muuri adds dynamically. You probably just copy pasted this from Muuri's website for demo purposes I guess, but I hope you don't do that in your actual code. Also note that .add() and .remove() accept an array elements, so it's good to utilize that for perf gains (which I didn't do in the fork of your demo).

[niklasramo]

You should also check out how the "Add more items" button works in Muuri's website. It's basically the same thing I showed in the demo.

[niklasramo]

I'm just getting reference to the actual dom element there, because .add() does not accept jQuery instances.

You can disable click like you would normally do with JavaScript. Muuri tries to be smart if your item element is a link (anchor element) and does some extra magic behind the scenes to recognize when you're clicking the item and when you're trying to drag it. That can be completely overriden though by adding your own dragStartPredicate. So yeah, experiment with the dragStartPredicate option and disable clicking as you wish outside Muuri.