从MySQL数据在滚动jQuery / PHP上加载数据

Question

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!

Answer 1

loadmore.js -

Try to change loadmore.js : 1

$(document).ready(function(){   

to

jQuery(function($) {

Answer 2

$(window).scroll(function () {
    if ($(window).height() + $(window).scrollTop() == $(document).height()) {
        //do your stuff here
    }
});

I have followed this approach. Try it.