0

私の PHP は MySQL からデータを取得し、それを index.php のコンテナ div に問題なく表示します。ただし、データは、同じ行で使用可能なスペースを使用するのではなく、次々に (異なる行に) 表示されます。そこで、float を float: left; に変更しました。しかし今では、ページの最後に到達することなく、すべてを一度にロードするだけです。

float が変更される前から、私の問題はJavaScriptにあると思います。行ごとに 1 つのアイテムでしたが、現在は行ごとに 3 つのアイテムです。また、JSは ID を使用して、PHP ロード スクリプトをいつ呼び出すかを計算します。

body タグで全体的なコンテナとして使用される div の index.php スニペットを次に示します。2 番目の div は、ユーザーが画面の最後に到達したときにさらに多くのデータを読み込む無限スクロール機能用です。

<div id="postedComments">

<?php require_once 'jquery-masterLoader.php' ;  ?>

</div>
<div id="loadMoreComments" style="display:none;" > <center>test for hidden field            </center>
</div>

これは PHP jquery-masterLoader.php です。これは、ロード スクリプトを管理する 2 つの PHP ファイルの 1 つです。もう 1 つは、ユーザーが画面の最後に到達したときにのみ呼び出されるため、ショー アンド テルには必要ありません。

<?php
if ( strpos(strtolower($_SERVER['SCRIPT_NAME']),strtolower(basename(__FILE__))) ) {
header("Location: index.php");
die("Denny access");
}
    error_reporting(0) ;
    set_exception_handler('exception_handler') ;
    $config = parse_ini_file("core/config/my.ini") ;
    $db=new mysqli($config['dbLocation'] , $config['dbUser'] , $config['dbPassword'] ,                 
    $config['dbName']);
    if(mysqli_connect_error()) {
     throw new Exception("<b>Could not connect to database</b>") ;
    }
    if (!$result = $db->query("SELECT * FROM world_country ORDER BY id ASC LIMIT          
    0,30")) {
throw new Exception("<b>Could not read data from the table </b>") ;
    }

    while ($data = $result->fetch_object()) {
    $id = $data->id;
    $name = $data->Name ;
    $continent = $data->Continent;
    $population = $data->Population ;
    echo "
    <div class='postedComment' id=\"$data-                 
    >id \">

    <b>Country : </b>$name <br /> 
    <b>Continent : </b>$continent<br/>
    <b>Population : </b>$population 
    <i style=\"font-size:small;color:blue\">Index : $id</i>
    <hr /> 

    </div> 
    " ;

    } 
    /* close connection */
    $db->close();
    function exception_handler($exception) {
      echo "Exception cached : " , $exception->getMessage(), "";
    }

PHP にスタイルが混ざっていて申し訳ありません。これは進行中の作業です。

CSSのルールはこちら

#postedComments {
width: 100%;
display: block;
}

.postedComment {
width: 33%;
float: left;
min-width: 200px;           
min-height: 80px;           
}

 #loadMoreComments {
display:none;
}

html, body { 
height: ; 
width: 100%; 
margin: 0; 
padding: 0;
}

#body {
width: 60%; 
margin: 1% auto;
}

 /* Resets */

ul {
padding:0;
margin:0 0 20px 0;
list-style:none;
}

h1, h2 {
padding:0;
margin:0 0 20px 0;
font-weight:normal;
}

p {
padding:0;
margin:0 0 20px 0;
}

a:link, a:visited {
text-decoration:underline;
color:#000;
}

a:hover {
text-decoration:none;
}

ul li {
padding:5px 0;
}

ul li input[type="text"], ul li input[type="password"] {
width:200px;
}

また、スクリプトを呼び出す JavaScript もここにあります。
(custom_jquery-debug.js)

 $(document).ready(function() {
    $("#postedComments").append("<p id='last'></p>");
    //$("#postedComments").append( "<div id='last'></div>" );
    console.log("Document Ready ------------------------");
    if ($("#last").length) {
        position = $("#last").offset();
        console.log("Initialization of last_DIV succeeded and it's values are ....Top-value is :"+
                    Math.floor(position.top) + " ---- Left-value is : "+
                    Math.floor(position.left));

    }
    doMouseWheel = 1;
    $(window).scroll(function() {
        if (!doMouseWheel) {
            return;
        }
        var distanceTop = $('#last').offset().top - $(window).height();
        console.log("Mouse scroll , and The DIV  last has an offset-top value of :"+
                    Math.floor($("#last").offset().top) + "----Window height is :"+
                    Math.floor($(window).height()) + "---- Last's offset minus window height is :"+
                    Math.floor(distanceTop));
        if ($(window).scrollTop() > distanceTop) {
            console.log("End of Window Reached >>>>>>>>>>>>>>>>>>>>>>>>>>");
            console.log("Show Div loadMoreComments and Class .postedComments.last has the id of  :"+
                        $(".postedComment:last").attr('id'));
            doMouseWheel = 0;
            $('div#loadMoreComments').show();
            $.ajax({
                dataType: "html",
                url: "jquery-loadMoreComments.php?lastComment=" + $(".postedComment:last").attr('id'),
                success: function(html) {
                    doMouseWheel = 1;
                    if (html) {
                        $("#postedComments").append(html);
                        console.log("Append html , sumarize .... first id has nr : " + 
                                    $(".postedComment:first").attr('id') + 
                                    " --- last id has nr :" + 
                                    $(".postedComment:last").attr('id'));
                        position = $("#last").offset();
                        console.log("New values of last_DIV  from IF_html are , Top:"+
                                    Math.floor(position.top) + " --- left :" + 
                                    Math.floor(position.left));
                        $("#last").remove();
                        if ($("#last").length == 0) {
                            console.log(">>>>>>>>>>>>>>>The last_DIV is removed from stage>>>>>>>>>>");
                        }
                        $("#postedComments").append("<p id='last'></p>");
                        if ($("#last").length) {
                            position = $("#last").offset();
                            console.log(">>>>>>>>>>>>>>>A new last_DIV is appended and it's values are , Top :" +
                                        Math.floor(position.top) + "  ---- Left :" + 
                                        Math.floor(position.left));
                        }
                        $('div#loadMoreComments').hide();
                    } else {
                        console.log("LoadMoreComments is replaced with a custom message");
                        $('div#loadMoreComments').replaceWith("<center><h1 style='color:red'>End of countries !!!!!!!</h1></center>");
                    }
                }
            });
        }
    });
});​

2 番目の JS スクリプト (custom_jquery.js)

$(document).ready(function() {
    $("#postedComments").append("<p id='last'></p>");
    //console.log("Document Ready");
    doMouseWheel = 1;
    $(window).scroll(function() {
        //console.log("Window Scroll ----");
        if (!doMouseWheel) {
            return;
        };
        var distanceTop = $('#last').offset().top - $(window).height();
        if ($(window).scrollTop() > distanceTop) {
            //console.log("Window distanceTop to scrollTop Start");
            doMouseWheel = 0;
            $('div#loadMoreComments').show();
            //console.log("Another window to the end !!!! "+$(".postedComment: last ").attr('id'));    
            $.ajax({
                dataType: "html",
                url: "jquery-loadMoreComments.php?lastComment=" + 
                     $(".postedComment : last ").attr('id'),
                success: function(html) {
                    doMouseWheel = 1;
                    if (html) {
                        $("#postedComments ").append(html);
                        //console.log("Append html---------" +$(".postedComment: first ").attr('id'));
                        //console.log("Append html---------" +$(".postedComment: last ").attr('id'));
$("#last ").remove();
$("#postedComments ").append( " < p id = 'last' > < /p>" );
$('div#loadMoreComments').hide();
}else{      
$('div#loadMoreComments').replaceWith("<center><h1 style='color:red'>End of countries !!!!!!!</h1 > < /center>");
 // Added on Ver.0.4
                        //Disable Ajax when result from PHP-script is empty (no more DB-results )
                        doMouseWheel = 0;
                    }
                }
            });
        }
    });
});​

初期の機能を取り戻すには、どのような変更を行う必要がありますか?

4

1 に答える 1

0

あなたのphpスクリプトでは、リミットスキップの変数はありません.$_GET ['lastComment']からこれを設定する必要があるようです:

$last=isset($_GET['lastComment']) ? $_GET['lastComment']*1 : 0;
if ($stmt = mysqli_prepare($db, "SELECT * FROM world_country ORDER BY id ASC LIMIT ?,30") {
  $stmt->bind_param('i',$last);
  $stmt->execute;
  /* only php >= 5.3 */
  if (!$result = $stmt->get_result()) {
     throw new Exception("<b>Could not read data from the table </b>") ;}
}

これにより、ajax GET リクエストからパラメーターが取得され、mysql クエリで使用されます。

次のコードを上記に置き換える必要があります

 if (!$result = $db->query("SELECT * FROM world_country ORDER BY id ASC LIMIT  0,30")) {
throw new Exception("<b>Could not read data from the table </b>") ;
    }
于 2012-12-08T13:23:09.703 に答える