An issue with context on jquery waypoints post

Question

I have set up waypoints to do a json post when triggered, however the webserver never recieves the request. I get the following jquery error.

TypeError: context is null http://mysite Line 5082

I know the waypoints are messing with the context, because I can perform the post call if I remove the waypoints. I have also tried removing all data and success actions.

Can anyone see what I am doing wrong? Thanks.

$(document).ready(function() {
        $('.product_row').waypoint(getDisplayRow);
});
function getDisplayRow()
{
    var search_url = window.location.protocol + "//" + window.location.host + window.location.pathname;
    var codes = [];
    $(this.element).children().each(function() {
        codes.push($(this).attr('product_id'));
    });
    $.post('/ajax/getproductdisplayrow/', {codes: codes,
        subcategory_url: $('#subcategory_url').val(),
        category_url: $('#category_url').val(),
        show_color_squares: $('#show_color_squares').val(),
        search_url: search_url
    }, function(data) {
            $(this.element).before(data); 
            $(this.element).remove();
            adjustRowHeight();
    });
}

This doesn't work either

$(document).ready(function() {
        $('.product_row').waypoint(getDisplayRow);
});
function getDisplayRow()
{
    $.post('/ajax/getproductdisplayrow/', {
    }, function(data) {
    });
}

I have latest version of waypoints, as well as jquery

Answer 1

In your callback to the POST:

function(data) {
  $(this.element).before(data); 
  $(this.element).remove();
  adjustRowHeight();
});

this is no longer the Waypoint instance. I believe it is the jqXHR instance from the post. this.element comes back undefined and who knows what happens from there when you try to call before. You can store this element property in a variable within the outer function and use it inside the POST callback:

function getDisplayRow()
{
  var search_url = window.location.protocol + "//" + window.location.host + window.location.pathname;
  var codes = [];
  var $waypointElement = $(this.element);
  $waypointElement.children().each(function() {
    codes.push($(this).attr('product_id'));
  });
  $.post('/ajax/getproductdisplayrow/', {codes: codes,
    subcategory_url: $('#subcategory_url').val(),
    category_url: $('#category_url').val(),
    show_color_squares: $('#show_color_squares').val(),
    search_url: search_url
  }, function(data) {
    $waypointElement.before(data); 
    $waypointElement.remove();
    adjustRowHeight();
  });
}