I've been trying to get the jquery-ias plugin to work with my website, but there seems to be an issue when I include the footer on the bottom of the page. As long as the footer isn't included, the plugin works flawlessly and loads pages just as it's supposed to. However, the moment that I include the page footer it stops scrolling and instead shows the "Next" link.
Here is the code:
<script type="text/javascript">
$(document).ready(function() {
// Infinite Ajax Scroll configuration
jQuery.ias({
container : '.property-details', // main container where data goes to append
item: '.property-details-item', // single items
pagination: '.pagination', // page navigation
next: '.pagination a', // next page selector
loader: '<img src="http://<?php echo SITE_URL;?>/img/ajax-loader.gif" style="width:auto; text-align:center;" />', // loading gif
triggerPageThreshold: 3 // show load more if scroll more than this
});
});
</script>
And here is my HTML/PHP:
<div class="col-md-9 property-details big">
<div class="property-details-item" id="item-$mlnum">
<figure class="item-thumbnail">
$image
<span class="overthumb"></span>
<div class="icons"><a href="$link"><i class="icon-plus"></i></a></div>
</figure>
<ul class="features">
<li><span class="price">$price</span></li>
<li><i class="icon-battery"></i> $baths Bathrooms</li>
<li><i class="icon-keyboard"></i> $beds Bedrooms</li>
<li><button class="btn btn-details" onclick="location.href='$link'">View Details</button></li>
</ul>
<h5><a href="$link">$listTitle</a></h5>
<p class="subtitle"><i class="icon-location"></i> <a href="$suburl">$subdivision</a></p>
<p>$description</p>
</div>
<?php if (isset($next)): ?>
<ul class="pagination">
<li><a href='search.php?<?php if(isset($_GET['submit'])){echo $_SERVER['QUERY_STRING']."&p=".$next;}else{echo "p=".$next;}?>'>Next</a></li>
</ul><br />
<?php endif?>
</div> <!--.property-details-->
<?php include('quickSearch.php'); ?>
</div>
</div>
</section>
<!-- end Content -->
<?php include('footer.php');?>
Hopefully this is something silly that I'm missing here.... (I'm still pretty much a noob when it comes to javascript/jQuery.
Thanks!
And as I figured... it was a silly mistake on my part as I was loading Jquery in two separate places, both in the header and footer. Removed it from the footer and now it works.