how to use .trigger('refreshWookmark');

[ctf0]

i have a btn that makes the user to fav or un-fav an img ,but when he un-favs it the img fades-out.

now how to make Wookmark refresh the layout and recalculate the visible items ?, because currently the item gets removed but its place still occupied.

$('.fav').submit(function(e) {

    e.preventDefault();
    var btn = $(this).find('i');
    var method = btn.hasClass('glyphicon-star-empty add_fav') ? 'POST' : 'DELETE';

    $.ajax({
        type: method,
        url: $(this).attr('action'),
        success: function() {
            btn.toggleClass('glyphicon-star-empty add_fav').toggleClass('glyphicon-star un_fav');
        },
        complete: function() {
            // update after fav/un-fav =====================
            var href = window.location.href;
            if (href.indexOf('favs') > -1) {
                $('.glyphicon-star-empty').closest('.item').fadeOut(500, function() {
                    $('.tiles').trigger('refreshWookmark');
                });
            }
        }
    });
});

<div id="result" class="loading">
    <div class="tiles">
        @foreach ($posts as $post)
            <div class="item wookmark-inactive">
                <img src="{{ asset('assets/pix') }}/{{ $post->image }}" class="img-responsive">
                <div class="info">
                    @if ($favs = in_array($post->id , $User_favd_posts))
                        {{ Form::open(['route' => ['favs.destroy', $post->id], 'method'=>'DELETE', 'class'=>'fav']) }}
                    @else
                        {{ Form::open(['route' => ['favs.store', $post->id], 'class'=>'fav']) }}
                    @endif
                        <button type="submit">
                            <i class="glyphicon {{ $favs ? 'glyphicon-star un_fav' : 'glyphicon-star-empty add_fav' }}"></i>
                        </button>
                    {{ Form::close() }}
                    <h1>
                        Title
                    </h1>
                </div>
            </div>
        @endforeach
    </div>
</div>

[Sebobo]

You can add the class wookmark-inactive to the item and refresh, that should work fine.

[ctf0]

well ,that certainly did nothing ,what am after is i want the item to fade (done) and wookmark refresh its grid layout without me pressing the refresh button ,i have update the post after ur suggestion.

b4

after

[Sebobo]

Sorry for the late answer. Your screenshots look like you add the wookmark-inactive class but the refresh is not called. Would have to see more of your initialization code to help.

[ctf0]

i have updated the main post with the complete code ,plz check again.

[Sebobo]

Sorry took me a bit to get back :)

You should store the handler after you initalize the tiles for the first time and then call the refresh on it. For wookmark to ignore the tiles when layouting they need the class wookmark-inactive.