trigger('refreshWookmark) not working

[macsupport]

I am working on a simple search option using quicksearch. It uses some callbacks to show and hide items. The show and hide works but the refreshWookmark call does not.

var handler = $('.item');
$("#search").quicksearch(".item", {
          'loader': 'span.loading',
          'minValLength': 2,
          'bind': 'search keydown',
    'show': function () {   
        $(this).removeClass('wookmark-inactive');
        handler.trigger('refreshWookmark');
    },
    'hide': function () {
        $(this).addClass('wookmark-inactive');
         handler.trigger('refreshWookmark');
    }
      });

[Sebobo]

You have to call the refresh on the initalised wookmark container since version 2.0.

For example

handler = $('.itemContainer').wookmark();
handler.trigger('refreshWookmark');

[macsupport]

Thanks! That helped and the search now works as a "filter", but refreshWookmark will not trigger until after a change in window size.

[macsupport]

I don't know why refreshWookmark only works after a change in window size but I was able to get things working by just calling

 $('.gallery').wookmark();  

in a callback, like this:

$("#search").quicksearch(".item", {
          'loader': 'span.loading',
         'bind': 'keyup keydown',
    'minValLength': 2,
    'show': function () {   
        $(this).removeClass('wookmark-inactive');   
    },
    'hide': function () {
        $(this).addClass('wookmark-inactive');  
    },
    'onAfter': function () {
      $('.gallery').wookmark();   
    }
      });

[Sebobo]

@macsupport yes I think I know why. refreshWookmark is not strong enough. Means that it doesn't detect the change to the visible items and doesn't run a relayout because nothing seems to have changed.

Calling $.fn.wookmark again actually triggers the updateOptions function which forces a relayout. Same as the filter function, which is the reason that all the filter examples work fine.

I will fix this soon in 2.0.2. Thanks for helping me find the bug.

[macsupport]

Thanks. Here is a Demo of the search function working, and using Photoswipe as the image lightbox with Wookmark. Thanks for a great plugin!

[ryanhovland]

Any update on this? Thanks!

[macsupport]

Update?

[Sebobo]

Hi,

sorry I'm a bit busy lately. I already tried finding a solution and found a big issue with the events. It seems the jQuery and standard events are not compatible. That means I have to implement both kind of events depending on what people use. And the way you trigger events is also completely different and for the non-jQuery version not super nice.

Will get back on that in the next days.

[ryanhovland]

As a workaround, on resize I destroy wookmark and then re-initialize it. And if I remember right, I think I had to physically remove the DOM element and then re-add it to really clear things out. This is all super dirty but it works.

[virtuecai]

// Update the layout.
// Jquery Object 
var $wookmark = $('#container').wookmark({....});
wookmark.wookmarkInstance.initItems();
wookmark.wookmarkInstance.layout(true);
//JavaScript new
var wookmark = new Wookmark(container);
wookmark.initItems();
wookmark.layout(true);

[Sebobo]

Be careful that doesn't work currently when you initialize several instances with one call.

[zilions]

I simply just used window.dispatchEvent(new Event('resize')); whenever I needed to refresh the feed. Very simple workaround until this bug is fixed.

[zilions]

Scratch that, using the above code multiple times causes the browser to crash due to a "maximum call stack size exceeded" error.

[Sebobo]

Hey all, events should now be triggered fine with 2.1.2.

@zilions I didn't get this error, do you have an example on how to get this error?

[zilions]

I believe the error occurs when the event is called multiple times while it is still running. For example, not 100% sure if this would show the error, but guessing it would:

for(var i = 0; i < 10; i++) {
    window.dispatchEvent(new Event('resize'));
}