Afternoon all. I am trying the achieve the above and have been following the above guide see @ http://www.asif18.com/4/php/window-on-scroll-load-contents-in-php-mysql-using-jquery-bootstrap/
The test page I have created can be seen here. http://coolnique.com/products_autoscroll.php
It doesn't seem to be sitting doing nothing. The 'loadmore' Page doesn't error when I access it so maybe it the javascript not working?
Here is my js file
$(document).ready(function(){
$(window).scroll(function(){ /* window on scroll run the function using jquery and ajax */
var WindowHeight = $(window).height(); /* get the window height */
if($(window).scrollTop() +1 >= $(document).height() - WindowHeight){ /* check is that user scrolls down to the bottom of the page */
$("#loader").html("<img src='img/loading_icon.gif' alt='loading'/>"); /* displa the loading content */
var LastDiv = $(".project small:last"); /* get the last div of the dynamic content using ":last" */
var LastId = $(".project small:last").attr("id"); /* get the id of the last div */
var ValueToPass = "lastid="+LastId; /* create a variable that containing the url parameters which want to post to getdata.php file */
$.ajax({ /* post the values using AJAX */
type: "POST",
url: "_loadmore.php",
data: ValueToPass,
cache: false,
success: function(html){
$("#loader").html("");
LastDiv.after(html); /* get the out put of the getdata.php file and append it after the last div using after(), for each scroll this function will execute and display the results */
}
});
}
});
});
Here is my load more file...
<?php
//include location select
include'_locationselect.php';
// Connect to database
// HAVE REMOVE DATABASE VARIABLES FROM HERE
//Find last record
if(isset($_POST["lastid"]) && $_POST["lastid"] != "0"){
$lastid = $_POST["lastid"]; // save the posted value in a variable
$query="SELECT * FROM products WHERE product_price_$setLocation IS NOT NULL and product_id < '$lastid' Order By product_id DESC LIMIT 10";
$result=mysql_query($query) or die('Invalid query: ' .mysql_error());
// Store number of products as variable
$num=mysql_num_rows($result);
// Start loop to display products
$i=0;
while ($i < $num) {
$f1=mysql_result($result,$i,"product_name");
$f2=mysql_result($result,$i,"product_price_$setLocation");
$f3=mysql_result($result,$i,"product_link_$setLocation");
$f4=mysql_result($result,$i,"product_image");
// $f5=mysql_result($result,$i,"category_id");
// $f6=mysql_result($result,$i,"product_desc");
$f7=mysql_result($result,$i,"product_id");
$f1spacesremoved = str_replace(' ', '_', $f1);
if ($setLocation=="us")
{
$currencysymbol = "$";
}
else
{
$currencysymbol = "£";
};
//Write each product
//loop the text below
echo '<div class="project small" id="'.$f7.'">
<div class="inside">
<a href="/product/' .rawurlencode($f1spacesremoved). '/' .$f7. '">
<img width="300" height="175" src="/img/products/'.$f4.'" class="thumb wp-post-image" />
<span class="title"><span>'.$f1.'</span><span>'.$currencysymbol.' '.$f2.'</span></span>
</a>
</div> </div>
';
// Repeat loop until finished
$i++;
}
}
?>
And then on my main page have this bit of code where it should load
$query="SELECT * FROM products WHERE product_price_$setLocation IS NOT NULL Order By product_id DESC LIMIT 20";
$result=mysql_query($query) or die('Invalid query: ' .mysql_error());
// Store number of products as variable
$num=mysql_num_rows($result);
// Start loop to display products
$i=0;
while ($i < $num) {
$f1=mysql_result($result,$i,"product_name");
$f2=mysql_result($result,$i,"product_price_$setLocation");
$f3=mysql_result($result,$i,"product_link_$setLocation");
$f4=mysql_result($result,$i,"product_image");
// $f5=mysql_result($result,$i,"category_id");
// $f6=mysql_result($result,$i,"product_desc");
$f7=mysql_result($result,$i,"product_id");
$f1spacesremoved = str_replace(' ', '_', $f1);
if ($setLocation=="us")
{
$currencysymbol = "$";
}
else
{
$currencysymbol = "£";
};
//Write each product
//loop the text below
echo '<div class="project small" id="'.$f7.'">
<div class="inside">
<a href="/product/' .rawurlencode($f1spacesremoved). '/' .$f7. '">
<img width="300" height="175" src="/img/products/'.$f4.'" class="thumb wp-post-image" />
<span class="title"><span>'.$f1.'</span><span>'.$currencysymbol.' '.$f2.'</span></span>
</a>
</div> </div>
';
// Repeat loop until finished
$i++;
}
?>
<div id="loader"></div>
<div id="divResult"></div> <!-- here the rest of contents will display dynamically -->
</div>
</div>
</div>
</div>
</div>
Any pointers would be a great help as I just cannot seem to get this thing to work! And im a bit of a newb with PHP!
