Having an issue with my basic "Load More on Scroll" AJAX function. The console is showing that the HTML is being sent back from the request, but for some reason, nothing is being rendered on the page. I must be missing something really simple here.
$(window).scroll(function()
{
if($(window).scrollTop() == $(document).height() - $(window).height())
{
$('div#loadmoreajaxloader').show();
$.ajax({
url: "loader.php",
success: function(html)
{
if(html)
{
$("#postswrapper").append(html);
$('div#loadmoreajaxloader').hide();
}else
{
$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
}
}
});
}
});<div id="postswrapper">
<div id="loadmoreajaxloader" style="color: #FFF;">
<span class="loader"><span class="loader-inner"></span></span>
</div>
</div>Although the loader disappears as expected when scrolling, the HTML content doesn't seem to get pulled from loader.php. However, loading loader.php directly shows the correct HTML content. So it appears that the issue lies with the AJAX functionality.
Here is a sample of the requested return HTML:
... (sample HTML goes here)...