2011-06-24 108 views
0

我已經把一個jQuery腳本輸入註釋時,它關係到一個數據庫,並拉動結果返回,並將其顯示在頁面上。這個效果很好,但是我需要一個只有註釋的獨立頁面,它每5秒自動刷新一次結果(而不是單擊瀏覽器上的刷新)。我還想要的是對FadeIn的評論。我試圖用我在網上找到的資源做到這一點,但其中大多數似乎不斷複製我的內容以及令人耳目一新。刷新評論部分

你能幫忙嗎? enter image description here

Comments.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="comments.css"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Live Comments</title> 
</head> 
<body> 
<div id="leaveComment"> 
    <h2>Leave a Comment</h2> 
    <div class="row"> 
    <label>Your Name:</label> 
    <input type="text"> 
    </div> 
    <div class="row"> 
    <label>Comment:</label> 
    <textarea cols="10" rows="5"></textarea> 
    </div> 
    <button id="add">Add</button> 
</div> 
<div id="comments"> 
    <h2>Live Comments</h2> 
</div> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
      $(function() { 

       //retrieve comments to display on page 
       $.getJSON("comments.php?jsoncallback=?", function(data) { 

        //loop through all items in the JSON array 
        for (var x = 0; x < data.length; x++) { 

         //create a container for each comment 
         var div = $("<div>").addClass("row").appendTo("#comments"); 

         //add author name and comment to container 
         $("<label>").text(data[x].name).appendTo(div); 
         $("<div>").addClass("comment").text(data[x].comment).appendTo(div); 
        } 
       }); 
       //add click handler for button 
       $("#add").click(function() { 

        //define ajax config object 
        var ajaxOpts = { 
         type: "post", 
         url: "addComment.php", 
         data: "&author=" + $("#leaveComment").find("input").val() + "&comment=" + $("#leaveComment").find("textarea").val(), 
         success: function(data) { 

          //create a container for the new comment 
          var div = $("<div>").addClass("row").appendTo("#comments"); 

          //add author name and comment to container 
          $("<label>").text($("#leaveComment").find("input").val()).appendTo(div); 
          $("<div>").addClass("comment").text($("#leaveComment").find("textarea").val()).appendTo(div).hide().fadeIn("slow"); 

          //empty inputs 
          $("#leaveComment").find("input").val(""); 
          $("#leaveComment").find("textarea").val(""); 
         } 
        }; 

        $.ajax(ajaxOpts); 

       });  
      });  
     </script> 
</body> 
</html> 

Moderator.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link rel="stylesheet" type="text/css" href="comments.css"> 
</head> 
<body> 
<div id="comments"> 
    <h2>Live Comments</h2> 
</div> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
      $(function() { 

       //retrieve comments to display on page 
       $.getJSON("comments.php?jsoncallback=?", function(data) { 

        //loop through all items in the JSON array 
        for (var x = 0; x < data.length; x++) { 

         //create a container for each comment 
         var div = $("<div>").addClass("row").appendTo("#comments"); 

         //add author name and comment to container 
         $("<label>").text(data[x].name).appendTo(div); 
         $("<div>").addClass("comment").text(data[x].comment).appendTo(div); 
        } 
       }); 
       //add click handler for button 
       $("#add").click(function() { 

        //define ajax config object 
        var ajaxOpts = { 
         type: "post", 
         url: "addComment.php", 
         data: "&author=" + $("#leaveComment").find("input").val() + "&comment=" + $("#leaveComment").find("textarea").val(), 
         success: function(data) { 

          //create a container for the new comment 
          var div = $("<div>").addClass("row").appendTo("#comments"); 

          //add author name and comment to container 
          $("<label>").text($("#leaveComment").find("input").val()).appendTo(div); 
          $("<div>").addClass("comment").text($("#leaveComment").find("textarea").val()).appendTo(div).hide().fadeIn("slow"); 

          //empty inputs 
          $("#leaveComment").find("input").val(""); 
          $("#leaveComment").find("textarea").val(""); 
         } 
        }; 

        $.ajax(ajaxOpts); 

       });  
      });  
     </script> 
</body> 
</html> 

的comments.php

<?php 

    //db connection detils 
    $host = "localhost"; 
    $user = "CommentsDB"; 
    $password = "password"; 
    $database = "comments"; 

    //make connection 
    $server = mysql_connect($host, $user, $password); 
    $connection = mysql_select_db($database, $server); 

    //query the database 
    $query = mysql_query("SELECT * FROM comments"); 

    //loop through and return results 
    for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) { 
     $row = mysql_fetch_assoc($query); 

     $comments[$x] = array("name" => $row["name"], "comment" => $row["comment"]);   
    } 

    //echo JSON to page 
    $response = $_GET["jsoncallback"] . "(" . json_encode($comments) . ")"; 
    echo $response; 

?> 

addComments.php

<?php 

    //db connection detils 
    $host = "localhost"; 
    $user = "CommentsDB"; 
    $password = "password"; 
    $database = "comments"; 

    //make connection 
    $server = mysql_connect($host, $user, $password); 
    $connection = mysql_select_db($database, $server); 

    //get POST data 
    $name = mysql_real_escape_string($_POST["author"]); 
    $comment = mysql_real_escape_string($_POST["comment"]); 

    //add new comment to database 
    mysql_query("INSERT INTO comments VALUES(' $name ',' $comment ')"); 

?> 
+3

你嘗試過這麼遠嗎?你期望什麼?什麼沒有按照你的預期工作? – hakre

+7

你肯定會需要一個時間戳來檢查新的評論。 –

+0

你想在Facebook上發表評論嗎? –

回答

0

你有兩個選擇:加入append()荷蘭國際集團新的內容後,刪除舊的內容。

或者設置一個「佔位符」元素,並使用的.html()就可以了 - 這樣你更換舊的內容,你不增加更多。

+0

我不想刪除舊評論,我只需要在版主頁面上進行自動刷新,這樣他們的「版主」就不需要繼續重新加載他的瀏覽器,以便在添加到評論中時看到新評論。 html頁面 – Magnum26

+0

我沒有說要刪除舊評論,我說要刪除舊內容。然後你用新內容(包括所有評論)替換它。 – Ariel

2

QUOTE:自動刷新每5秒

使用此代碼的結果。

function checkForComments() {} 

$(document).ready(function() { 
    //Wait 5 seconds then call checkForComments(); 
    setInterval("checkForComments()", 5000); 
}); 

5000這裏是時間以毫秒爲單位,相當於5秒。


QUOTE:但大多數人似乎不斷複製我的內容以及清涼。

從你的問題中不清楚comments.php輸出到底是什麼。如果輸出數據庫中所有的評論最好的辦法是保持一個陣列已張貼到頁面的評論的id的。只要寫一個功能中的JavaScript 檢查如果特定的ID存在數組中追加它,如果它不


QUOTE:我也想是的評論淡入

關注該問題 Making my ajax updated div fade in

修訂

的Java腳本加載評論

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script type="text/javascript"> 
    //stores the comment IDs 
    var comments=new Array(); 
    var count=1 ; 
    function checkForComments() { 
     $.getJSON("comments.php", addComments); 
    } 
    function addComments(data) { 
     //loop through all items in the JSON array 
     for (var x = 0; x < data.length; x++) { 
      alert(data[x].id); 
      if(jQuery.inArray(data[x].id, comments)==-1){ 
       comments[count] = data[x].id; 
       //create a container for each comment 
       var div = $("<div>").addClass("row").appendTo("#comments"); 
       //add author name and comment to container 
       $("<label>").text(data[x].name).appendTo(div); 
       $("<div>").addClass("comment").text(data[x].comment).appendTo(div); 
       count++; 
      } 
     } 
    } 


    $(document).ready(function() { 
     checkForComments(); 
     setInterval("checkForComments()", 5000); 
    }); 
</script> 

我的comments.php

<?php 
//make connection 
$server = mysql_connect($host, $user, $password); 
$connection = mysql_select_db($database, $server); 

//query the database 
$query = mysql_query("SELECT * FROM comments"); 

//loop through and return results 
for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) { 
    $row = mysql_fetch_assoc($query); 
    //I have added ID here, 
    $comments[$x] = array("id" => $row["id"], "name" => $row["name"], "comment" 
     => $row["comment"]); 
} 

echo json_encode($comments); 
?> 

SQL徵求意見表

CREATE TABLE IF NOT EXISTS `comments` (
    `id` int(11) NOT NULL AUTO_INCREMENT, 
    `name` varchar(64) NOT NULL, 
    `comment` text NOT NULL, 
    PRIMARY KEY (`id`) 
) 
+0

我將在上面的問題中添加comments.php。如果你可以幫助代碼,我會非常感激,因爲我不能真正編碼這些東西,我只是把代碼混合在一起;) – Magnum26

+0

好的。當評論頁面加載時,它是否顯示任何評論?或者是在頁面加載後使用js添加到頁面的註釋。 –

+0

對於comments.html頁面,註釋會自動填充,而moderator.html頁面只會在頁面刷新時填充註釋。 – Magnum26