Search code examples
jqueryjquery-waypoints

context.refresh() and/or Waypoint.refreshAll() not working?

Updated 2/16 with new code to reflect mistake found from comment

I have waypoints working correctly on a page with the following code. Note that I'm using version 3.1.1 of the plugin, but I'm still using jQuery syntax akin to version 2.x of the plugin to handle some complex selectors. This code IS working:

var stickTop = wrapper.waypoint({
    handler: function(direction){         
        var len = $(this.element).closest('.ctable').find('div.ctable-row').length; 
        if ((direction === 'down') && (len > 1)) {
            $(this.element).closest('.ctable').find(stickTarget).addClass('stuck').css("top", $pageHeadOffset );
        }
        else if ((direction === 'up') && (len > 1)) {
            $(this.element).closest('.ctable').find(stickTarget).removeClass('stuck');
        }
    }, 
    offset: $pageHeadOffset,
});

This is (still) fine and working correctly, but I have another element on the page that resizes, effectively making the page much longer. To deal with this, I've tried calling Waypoint.refreshAll(); and stickTop.context.refresh(); on another click target, like so:

$('.page-info-link').click(function(){
    $('.page-info').toggleClass('closed');
    $('.page-info-message').slideToggle();
    Waypoint.refreshAll();
});

But I cannot get the refresh to accurately work.

Is there any way to use the above jQuery-like syntax (without passing the element: option and still call the refresh?

Update 2/16:

This new code now fires a console error:

$('.page-info-link').click(function(){
    $('.page-info').toggleClass('closed')
    $('.page-info-message').slideToggle()
    stickTop.refresh()
});

Error: "undefined is not a function"

Solution

  • There are two problems here:

    1. stickTop.refresh(): I'm not sure why you changed this. First, stickTop is an array, as $.fn.waypoint returns an array of Waypoint instances, one for each matched element in the jQuery object. Second, refresh isn't a method on a Waypoint instance, it is a method on a Context. TLDR: Stick with the Waypoint.refreshAll().
    2. slideToggle is a jQuery animation. What you're trying to do is call refresh after that animation has finished but it's an asynchronous function. By calling refreshAll directly after it you're doing the refresh before the animation has even begun. You'll want to call refresh in the complete callback of the animation.

    End result:

    $('.page-info-message').slideToggle(function() {
  Waypoint.refreshAll()
})