I'm trying to add posts as the user reaches the #marker-end in an HTML page using jQuery/LazyLoadXT:
This is the javascript:
$(document).ready(function () {
$('#marker-end')
.on('lazyshow', function () {
$.ajax({
url: '/get_content_item/',
dataType: "html"
})
.success(function (responseText) { **note that I tried .done also**
// add new elements
$('#infinite').append(
$('<div>')
.append($.parseHTML(responseText))
.find('#infinite')
.children()
);
// process added elements
$(window).lazyLoadXT();
$('#marker-end').lazyLoadXT({visibleOnly: false, checkDuplicates: false});
});
})
.lazyLoadXT({visibleOnly: false});
});
and there's this in my HTML page:
<div id="infinite"></div>
<div id="marker-end"></div>
The ajax call is working, and in Chrome developer tools I see a response from the server, so I know the problem is somewhere with the appended data not showing up with jQuery. The code is similar to the LazyLoadXT page, however I can't get it working.
Any help is greatly appreciated. Thanks! :)