從MySQL數據在滾動jQuery / PHP上加載數據

Question

下午全部。 我正在嘗試實現上述目標，並且一直在遵循上述指南，請參見@ http://www.asif18.com/4/php/window-on-scroll-load-contents-in-php-mysql-using-jquery-引導程序/

我創建的測試頁可以在這里看到。 http://coolnique.com/products_autoscroll.php

它似乎並沒有坐着。 當我訪問'loadmore'頁面時不會出錯，因此javascript無法正常工作？

這是我的js文件

$(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 */
                }
            });
        }
    });
});

這是我加載的更多文件...

<?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++;
                    }
                    }
                ?>

然后在我的主頁上有應加載的這段代碼

                $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>  

任何指針都將是一個很大的幫助，因為我似乎無法使這個東西正常工作！ 我用PHP有點新手！

Answer 1

loadmore.js-

嘗試更改loadmore.js ：1

$(document).ready(function(){   

至

jQuery(function($) {

Answer 2

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

我遵循了這種方法。 試試吧。