php - 使用可滚动条Jquery限制返回的结果 - Thinbug

使用可滚动条Jquery限制返回的结果

时间：2010-11-01 19:51:09

标签： php jquery mysql

我正在使用以下代码片段在我的网站上生成动态shoutbox：

HTML（index.html）

<body>

<div id="page">

    <div class="block_main rounded">
        <h2>My Shoutbox</h2>

        <form method="post" action="shout.php">
            Name: <input type="text" id="name" name="name" />
            Message: <input type="text" id="message" name="message" class="message" /><input type="submit" id="submit" value="Submit" />
        </form>

        <div id="shout" style="padding:0 10px 0; overflow-x:hidden; height:225px;; overflow-y:auto;">

        </div>
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {

    //populating shoutbox the first time
    refresh_shoutbox();
    // recurring refresh every 15 seconds
    setInterval("refresh_shoutbox()", 15000);

    $("#submit").click(function() {
        // getting the values that user typed
        var name    = $("#name").val();
        var message = $("#message").val();
        // forming the queryString
        var data            = 'name='+ name +'&message='+ message;

        // ajax call
        $.ajax({
            type: "POST",
            url: "shout.php",
            data: data,
            success: function(html){ // this happen after we get result
                $("#shout").slideToggle(500, function(){
                    $(this).html(html).slideToggle(500);
                    $("#message").val("");
                });
          }
        });    
        return false;
    });
});

function refresh_shoutbox() {
    var data = 'refresh=1';

    $.ajax({
            type: "POST",
            url: "shout.php",
            data: data,
            success: function(html){ // this happen after we get result
                $("#shout").html(html);
            }
        });
}


</script>
</body>

PHP脚本（shout.php）

<?php
try {
    $dbh = new PDO('mysql:host=localhost;dbname=DB', 'User', 'PW');

if($_POST['name']) {
    $name       = $_POST['name'];
    $message    = $_POST['message'];
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $sql = "INSERT INTO shoutbox (date_time, name, message) VALUES (NOW(), :name, :message)";
    $stmt = $dbh->prepare($sql);

    $stmt->bindParam(':name', $name, PDO::PARAM_STR);
    $stmt->bindParam(':message', $message, PDO::PARAM_STR);

    if ($stmt->execute()) {
        populate_shoutbox();
    }
} 
}
catch(PDOException $e) {
    echo $e->getMessage();
}

if($_POST['refresh']) {
    populate_shoutbox();
}


function populate_shoutbox() {
    global $dbh;
    $sql = "SELECT * FROM shoutbox ORDER BY date_time DESC limit 10";
    echo '<ul>';
    foreach ($dbh->query($sql) as $row) {
        echo '<li>';
        echo '<span class="date">'.date("m/d/Y g:i A", strtotime($row['date_time'])).'</span>';
        echo '<span class="name">'.$row['name'].'</span><br />';
        echo '<span class="message">'.$row['message'].'</span>';
        echo '</li>';
    }
    echo '</ul>';
}
?>

我遇到的问题是，当页面最初加载时，我将<div>设置为300px的高度，溢出-y：auto withint我的CSS。然而，当用户输入新信息时（例如，他们将新消息输入到shoutbox中），区域动态刷新，但它不再考虑div CSS滚动条规则。我将如何实现这一目标？

1 个答案:

答案 0 :(得分：1)

尝试将shout放入容器元素中，然后将滑块内容应用到它中。