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

时间:2013-10-21 13:10:16

标签: javascript php jquery mysql

下午全部。 我正在尝试实现上述目标并遵循上述指南,请参阅@ http://www.asif18.com/4/php/window-on-scroll-load-contents-in-php-mysql-using-jquery-bootstrap/

我在这里可以看到我创建的测试页面。 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的新手!

2 个答案:

答案 0 :(得分:0)

loadmore.js -

尝试更改loadmore.js :1

$(document).ready(function(){   

jQuery(function($) {

答案 1 :(得分:0)

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

我遵循了这种方法。试试吧。