Process Isotope again after Ajax filter

Multiple exposed filters? I'm not exactly sure what you mean by this. You can already expose multiple filters in Views and then further filter the result using the Isotope filter. You can also add multiple Isotope filter blocks to the page with different terms/text in each result IF you've combined the results in the field being assigned the isotope-filter class.

Ajax loading/unloading is possible, but it would have to happen BEFORE the Isotope. Remember, Isotope is JQuery filtering the results after they've been pushed to the the client.

This is possible, but I'm not sure exactly how to do it. Calling Isotope again after the exposed filter is relatively easy. Something like...

http://stackoverflow.com/questions/1488776/drupal-views-exposed-filter-s...

But instead of filtering the new Isotope elements by what you are clicking in the filter block, we'd need to remember what was last filtered or the new elements would be filtered by the default again.

Challenging, but possible.

This is a valid feature request against the latest version of this module. Related notes:

• Infinite scroll is being handled here: #1643486: Add Infinite Scroll to Views Isotope.
• Multiple-select filters is requested here: #2614216: Filters as checkboxes..
• Anyone can re-layout isotope in their own js callback using: $('.isotope-container').isotope('layout');

I've added a first pass at this, I'm sure it has some things I am missing, as I'm just getting my head around isotope and this module, but it's a start. I got it working from a combination of a few things, finding this method with 'reloadItems' param in the Isotope API (eventually) and what they were doing with Masonry API module #1907272: Re-attach behaviors after ajax callback & #1808018: Make work with Views Infinite Scroll which may be useful in future as reference too.

Patch summary: Added an 'on change' event on the container which reloads the items (these few lines took a while :P).

@chris_gillis, your original suggestion using isotope('layout') works for items that are already loaded, but won't work for new items, like when using AJAX.

This works with AJAX turned on in views, the only thing is, it also gets called on the items filtered by our "IsotopeFilters" which isn't ideal. It's an extra call, reloading items (but perhaps not the worst either). I'm not sure of a way to listen on AJAX changes only, jQuery is not my strongest suit, but an 'onAjaxChange' would be great :P

Interested in iterating through this to help get this in, then we can look at: #2674656: Provide UI for "Other UI" options available within Isotope library

EDIT: The "if exists" needs to be removed from the "Reload isotope container items if exists." comment at least, it was from previous check on data(), which I removed as deemed it unnecessary.

I may have spoke too soon on this. Looking at it again and it's not working as I expected. Leave it with me.

2nd pass, this looks better, but still a few issues I hope maintainers can help with.

Patch overview:

1. Adds ajax event listener for ajax load completion
2. Checks we are dealing with a Views AJAX load using settings.url === "/views/ajax"
3. Gets our isotope container
4. Reloads isotope items
5. Re-initializes container

Remaining items / unknowns

• I'm not sure why we have to re-initialize the container, perhaps it gets lost with the ajax reload.
• Is it possible to get the container without re-initializing isotope?
• If not, my re-init code may not be ideal, but I don't quite understand your option/hash/filter code used to init isotope. I'm also not quite sure if it's even appropriate here for this AJAX related functionality, so I will await feedback on that.

I added another pass at this, as it seems we don't need to wait until "ajaxComplete" as it already is at the point you call $('.isotope-container').isotope('appended', $new_items) for the views_infinite_scroll integration.

This patch initialises a new isotope container, when we have an ajax reload from views without a valid isotope container, i.e. the container has been replaced in the dom?

Some of the remaining issues:

1. Init new container using the module settings, not hard coded masonry settings
2. Why is context argument undefined on AJAX calls?

Both of the above are related I imagine, as we init our isotope container using settings from context? It would be great to discuss this with maintainers.

Hey Chris. Further to our conversation on Sat, I have uploaded the revised patch.

I improved comments also, so things should be clearer now as to what we are doing.

Let me know after you've tested it if there's anything else. Many thanks!

If you could please also check dragging in the viewport and observe the behaviour on say the 2nd page / after ajax reload, you'll notice the isotope behaviour different, the layout is in the grid, but must be missing some isotope behaviour. Let me know what you think, if you can reproduce this; for me, items are resizing in a grid rather than reorganising like on page 1 on page load. Thanks.

EDIT: I've tried calling layout after we init isotope, but no luck.

          // Init new container with options data.
          $container.isotope($data);
          $container.isotope('layout');

Moving feature request to new module.

Re-rolling this patch to new module namespace.

Looks good to me. I'd like to test against views_infinite_scroll, but that seems to be entirely broken... I suspect I'll need to redo the integration with V2 of that module. I'm happy to commit this for now.

That's great Chris, isn't this Fixed then? Either way, I'll follow up on any AJAX / Views Infinite Scroll (which I'm not actually using right now) in a separate issue now that this patch is in. Thanks again for your help getting this committed.

on line 115 of isotope.js for multilanguage website the ajax setting keep the language prefix inside the string (like: /it/views/ajax) so it doesn't enter the else statement, for the lastest patch (#12) is better:

-            && settings.views.ajax_path === '/views/ajax') {
+            && (settings.views.ajax_path).indexOf('/views/ajax') !== -1 ) {