I am new to ajax/php so am trying to figure out the best way of doing this.
I have got a sql database fill of 1500 items that I am loading into my page. I want to load 30 items into the page then when the user gets to the bottom of the web page I want it to then load another 30 items.
So far I have the 30 items displaying on my webpage, with a drop down menu that filters the items. I also have a function that fires when the user gets to the bottom of the page.
Can anyone help me with the PHP script to make this work and load more items? The code I am using is below.
Thanks
HTML
<section id="filters">
<select name="entries" onchange="filterEntries()">
<option value="*">show all</option>
<option value=".item323">323</option>
<option value=".item266">266</option>
<option value=".item277">277</option>
<option value=".item289">289</option>
</select>
</section> <!-- #filters -->
<div id="entries" class="clearfix">
<div class="ajaxloader"><img src="<?php bloginfo('template_url'); ?>/ajax_load.gif" alt="loading..." /></div><!--ajaxloader-->
</div><!--entries-->
<div class="ajaxloader"><img src="<?php bloginfo('template_url'); ?>/ajax_load.gif" alt="loading..." /></div><!--ajaxloader-->
Jquery
$(document).ready(function () {
loadData();
//Hide Loader for Infinite Scroll
$('div.ajaxloader').hide();
});
function loadData () {
//Show Loader for main content
$('#entries .ajaxloader').show();
//Pull in data from database
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
"use strict";
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState===4 && xmlhttp.status===200) {
document.getElementById("entries").innerHTML=xmlhttp.responseText;
//Fire filter function once data loaded
filterEntries();
//Hide Loader for main content once loaded
$('#entries .ajaxloader').hide();
}
}
xmlhttp.open("POST","<?php bloginfo('template_url'); ?>/getentries.php?$number",true);
xmlhttp.send();
};
//Isotope filter
function filterEntries () {
var $container = $('#entries');
$select = $('#filters select');
$container.isotope({
itemSelector : '.item'
});
$select.change(function() {
var filters = $(this).val();
$container.isotope({
filter: filters
});
});
};
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
$('div.ajaxloader').show('slow');
//alert("Function to load more entries");
}
});
PHP
<?php
//Connect to Database
$con = mysql_connect("localhost", "root", "root");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("awards", $con);
$sql="SELECT * FROM entry WHERE status = 'registered' ORDER BY `entry_id` LIMIT 0, 30";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
//Get award cat ids
$awardcat = $row['awards_subcategory_id'] ;
print "<div class='item item$awardcat clearfix'>";//add award cat id to each div
print '<img class="image" src="http://localhost:8888/awardsite/wp-content/themes/award/placeholder.jpg" />';
print "<p > Studio: " . $row['studio'] . "</p>";
print "<p class='client'> Client: " . $row['client'] . "</p>";
print "<p class='description'> Description: " . $row['description'] . "</p>";
print "<p class='solutionprocess'> Solution Process: " . $row['solution_process'] . "</p>";
print "</div>";
}
mysql_close($con);
?>