3

このトピックにあるヘルプに従いました: MySQL データベースでの無限スクロールの使用

そして、これが適切に機能するようになりました。jquery masonry を使用してブロックで表示されるページがあり、ブロックには mysql データベースのデータが入力されます。ページの最後までスクロールすると、loading.gif 画像が正常に取得されますが、画像の直後に「表示する投稿はありません」と表示されます。それが本当なら、それは言うべきことです。最初は約 10 ～ 15 件の投稿のうち 5 件しか呼び出していないため、残りの投稿はページの下部に到達すると読み込まれるはずですが、実際にはそれ以上ないときに表示されるはずのメッセージが表示されます。投稿。

これが私のJavaScriptです：

var loading = false;
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()) {   
            var h = $('.blockContainer').height();
            var st = $(window).scrollTop();
            var trigger = h - 250;

              if((st >= 0.2*h) && (!loading) && (h > 500)){
                loading = true;
                $('div#ajaxLoader').html('<img src="images/loading.gif" name="HireStarts Loading" title="HireStarts Loading" />');
                $('div#ajaxLoader').show();
                $.ajax({
                    url: "blocks.php?lastid=" + $(".masonryBlock:last").attr("id"),
                    success: function(html){
                        if(html){
                            $(".blockContainer").append(html);
                            $('div#ajaxLoader').hide();
                        }else{
                            $('div#ajaxLoader').html('<center><b>No more posts to show.</b></center>');
                        }
                    }
                });
            }
        }
    });

ブロックが実際にあるページのphpは次のとおりです。このページは、最初にデータベースから 5 項目を投稿します。JavaScript は最後に投稿された ID を取得し、それを ajax 経由で blocks.php スクリプトに送信します。ブロックは最後に投稿された ID を使用して、データベースから残りの項目を取得します。

$allPosts = $link->query("/*qc=on*/SELECT * FROM all_posts ORDER BY post_id DESC LIMIT 5");
        while($allRows = mysqli_fetch_assoc($allPosts)) {
            $postID = $link->real_escape_string(intval($allRows['post_id']));
            $isBlog = $link->real_escape_string(intval($allRows['blog']));
            $isJob = $link->real_escape_string(intval($allRows['job']));
            $isVid = $link->real_escape_string(intval($allRows['video']));
            $itemID = $link->real_escape_string(intval($allRows['item_id']));

            if($isBlog === '1') {
                $query = "SELECT * FROM blogs WHERE blog_id = '".$itemID."' ORDER BY blog_id DESC";
                $result = $link->query($query);
                while($blogRow = mysqli_fetch_assoc($result)) {
                    $blogID = $link->real_escape_string($blogRow['blog_id']);
                    $blogTitle = $link->real_escape_string(html_entity_decode($blogRow['blog_title']));
                    $blogDate = $blogRow['pub_date'];
                    $blogPhoto = $link->real_escape_string($blogRow['image']);
                    $blogAuthor = $link->real_escape_string($blowRow['author']);
                    $blogContent = $link->real_escape_string($blogRow['content']);  

                    //clean up the text
                    $blogTitle = stripslashes($blogTitle);
                    $blogContent = html_entity_decode(stripslashes(truncate($blogContent, 150)));           

                    echo "<div class='masonryBlock' id='".$postID."'>";
                    echo "<a href='post.php?id=".$blogID."'>";
                    echo "<div class='imgholder'><img src='uploads/blogs/photos/".$blogPhoto."'></div>";
                    echo "<strong>".$blogTitle."</strong>";
                    echo "<p>".$blogContent."</p>";
                    echo "</a>";
                    echo "</div>";

                }
            }

以下は、AJAX が呼び出す blocks.php スクリプトの php です。

//if there is a query in the URL
if(isset($_GET['lastid'])) {

//get the starting ID from the URL
$startID = $link->real_escape_string(intval($_GET['lastid']));
//make the query, querying 25 fields per run
$result = $link->query("SELECT  * FROM all_posts ORDER BY post_id DESC LIMIT '".$startID."', 25");

$html = '';
//put the table rows into variables
while($allRows = mysqli_fetch_assoc($result)) {
    $postID = $link->real_escape_string(intval($allRows['post_id']));
    $isBlog = $link->real_escape_string(intval($allRows['blog']));
    $isJob = $link->real_escape_string(intval($allRows['job']));
    $isVid = $link->real_escape_string(intval($allRows['video']));
    $itemID = $link->real_escape_string(intval($allRows['item_id']));

    //if the entry is a blog
    if($isBlog === '1') {
        $query = "SELECT * FROM blogs WHERE blog_id = '".$itemID."' ORDER BY blog_id DESC";
        $result = $link->query($query);
        while($blogRow = mysqli_fetch_assoc($result)) {
            $blogID = $link->real_escape_string($blogRow['blog_id']);
            $blogTitle = $link->real_escape_string(html_entity_decode($blogRow['blog_title']));
            $blogDate = $blogRow['pub_date'];
            $blogPhoto = $link->real_escape_string($blogRow['image']);
            $blogAuthor = $link->real_escape_string($blowRow['author']);
            $blogContent = $link->real_escape_string($blogRow['content']);  

            $blogTitle = stripslashes($blogTitle);
            $blogContent = html_entity_decode(stripslashes(truncate($blogContent, 150)));

            $html .="<div class='masonryBlock' id='".$postID."'>
                    <a href='post.php?id=".$blogID."'>
                    <div class='imgholder'><img src='uploads/blogs/photos/".$blogPhoto."'></div>
                    <strong>".$blogTitle."</strong>
                    <p>".$blogContent."</p>
                    </a></div>";

        }
    }
    echo $html;
}

jquery の無限スクロール プラグインを使用してみましたが、その方法でははるかに難しいように思えました。ここで何が問題なのかわかりません。アラートを追加してテストを行ったところ、javascript スクリプトは完全に処理されているので、blocks.php を使用する必要があります。

編集： SQLクエリを次のように変更することで、この問題を一時的に修正しましたSELECT * FROM all_posts WHERE post_id < '".$startID."' ORDER BY post_id DESC LIMIT 15

ブロックは ajax 経由で読み込まれるようになりましたが、一度に 1 つのブロックしか読み込まれません。ajaxはブロックごとにリクエストを送信し、次々とフェードインしています.jquery masonryで一度にすべてフェードインさせることはできますか?

4

2 に答える 2

2

別の回答であなたのコードを見ました。値をオフセットする代わりに、MySql で LIMIT 機能を使用することをお勧めします。例：

SELECT * FROM all_posts ORDER BY post_id DESC LIMIT '".(((int)$page)*5)."',5

これは、AJAX リクエストでページ番号を取得し、オフセットを自動的に取得します。これは 1 つの一貫したクエリであり、ページの最後の結果とは無関係に機能します。jQuery コードで page=1 または page=2 のようなものを送信します。これは、いくつかの異なる方法で行うことができます。

まず、ページ上に構築された要素の数を数え、ページ上の数で割ります。これにより、ページ番号が生成されます。

次に、jQuery を使用して、現在のページ番号を本文にバインドできます。

$(body).data('page', 1)

ページの読み込みごとに 1 ずつ増やします。

これは、すべての操作に対して 1 つのクエリを使用し、既にページにあるデータに関する多くの情報を必要としないため、実際にはより良い方法です。

注意すべき唯一のことは、このロジックでは最初のページ要求が 1 ではなく 0 である必要があるということです。これは、1*5 が 5 に評価され、最初の 5 行がスキップされるためです。0 の場合、0*5 と評価され、最初の 0 行をスキップします (0*5 は 0 であるため)。

ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-01-31T21:04:30.067 に答える
0

デバッグを試みましたか？

まだ使用していない場合は、firebug プラグインを入手することをお勧めします。

ajax呼び出しは空を返しますか? 含まれている場合は、SQL をエコーし​​てみて、それが正しいステートメントであり、すべての変数に期待される情報が含まれていることを確認してください。クライアント、サーバー、データベース間で多くの通信が行われていることを考えると、多くのことが失敗する可能性があります。

あなたのコメントに応えて、このコードに html を追加しています:

if(html){
     $(".blockContainer").append(html);
     $('div#ajaxLoader').hide();
}

if ステートメントの前にconsole.log (html)とconsole.log($(".blockContainer").length)を実行します。

于 2013-01-31T20:22:37.867 に答える