将jQuery淡入或滚动效果应用于Facebook，如新闻源

Question

I have a news feed that has been developed using PHP, MySQL, and jQuery. 我有一个使用PHP，MySQL和jQuery开发的新闻源。 The news feed does it's job by getting new content every 5 seconds. 新闻源通过每5秒获取新内容来完成它的工作。 However, this is done by a "refresh" of the complete content. 但是，这是通过“刷新”完整内容来完成的。 I want to only ADD any new content to the news feed. 我只想在新闻Feed中添加任何新内容。 I want a fade in or scroll effect to be used (jQuery) for this to occur. 我希望使用淡入或滚动效果（jQuery）来实现此目的。 The items already loaded should stay on the feed and NOT reload with any new content. 已加载的项目应保留在Feed中，不得使用任何新内容重新加载。 How can I do this? 我怎样才能做到这一点？

Here are my 2 pages and code. 这是我的2页和代码。

feed.php feed.php

 <body >

    <script>
    window.setInterval(function(){
      refreshNews();
    }, 5000);
    </script>




    <div id="news"></div>


    <script>

        function refreshNews()
        {
            $("#news").fadeOut().load("ajax.php", function( response, status, xhr){

                if (status == "error"){

                }
                else
                {
                    $(this).fadeIn();
                }
            });
        }
    </script>
    </body>
    </html>

ajax.php ajax.php

<?php require_once('../../Connections/f12_database_connect.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

mysql_select_db($database_f12_database_connect, $f12_database_connect);
$query_newsfeed_q = "SELECT * FROM newsfeed ORDER BY pk DESC";
$newsfeed_q = mysql_query($query_newsfeed_q, $f12_database_connect) or die(mysql_error());
$row_newsfeed_q = mysql_fetch_assoc($newsfeed_q);
$totalRows_newsfeed_q = mysql_num_rows($newsfeed_q);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
<table border="1">
  <tr>
    <td>pk</td>
    <td>title</td>
    <td>content</td>
  </tr>
  <?php do { ?>
    <tr>
      <td><?php echo $row_newsfeed_q['pk']; ?></td>
      <td><?php echo $row_newsfeed_q['title']; ?></td>
      <td><?php echo $row_newsfeed_q['content']; ?></td>
    </tr>
    <?php } while ($row_newsfeed_q = mysql_fetch_assoc($newsfeed_q)); ?>
</table>
</body>
</html>
<?php
mysql_free_result($newsfeed_q);
?>

Answer 1

I am not quite sure exactly how you have this setup, but it does not seem right: 我不太确定你是如何进行这种设置的，但它似乎并不正确：

Create a file that only contains the php code, and this file is going to return a json object that will contain the up to date news; 创建一个只包含php代码的文件，这个文件将返回一个包含最新消息的json对象; you will parse the object on the client side. 您将解析客户端上的对象。 The following is an example of what the response of this php file will look like. 以下是此php文件的响应示例。

newsFeed.php newsFeed.php

<php
     $array_with_news = array('news1' => array('pk' => 'pk1', 'title' => 'title1', 'content' => 'title2'), 'news2' => array('pk' => 'pk2', 'title' => 'title2', 'content' => 'content2'));

     echo json_encode($array_with_news);
?>

The second file is going to contain both feed.php and the rest of ajax.php. 第二个文件将包含feed.php和其余的ajax.php。 When you do your ajax called for the updated news, the newly created php file will response with a json object that you will parse and set the values of the table with its up to date content. 当您执行ajax调用更新的新闻时，新创建的php文件将使用您将解析的json对象进行响应，并使用其最新内容设置表的值。

index.php 的index.php

<html>
<head>
<script type="text\javascript">

window.setInterval(function(){
  updateNews();
}, 5000);


function updateNews(){
 var scope = this;
 $.getJSON('newsFeed.php*', function(data) {
  //data will contain the news information
  $.each(data, function(index, value) {
   this.addNewsRow(value);
  });

 });
}

function addNewsRow(newsData){
 //this function will add html content 
 var pk = newsData.pk, title = newsData.title, content = newsData.content;
 $('#news').append(pk + ' ' + title + ' ' + content);
}
</script>
</head>
<body>
 <div id="news"></div>
</body>
</html>

I have not test this, but this is the overall idea of how it should work. 我没有对此进行测试，但这是它应该如何工作的总体思路。 index.php is where the user is going to be, every interval we are going to execute updateNews and this function is in charge of calling newsFeed.php through AJAX. index.php是用户将要去的地方，我们将执行updateNews的每个时间间隔，这个函数负责通过AJAX调用newsFeed.php。 newsFeed.php is in charge of query the database and responding with a json object that contains all the news information. newsFeed.php负责查询数据库并使用包含所有新闻信息的json对象进行响应。 Once updateNews() gets a response from newsFeed.php it will loop through the JSON object and add the content of the response to the div. 一旦updateNews（）从newsFeed.php获得响应，它将遍历JSON对象并将响应的内容添加到div。

Hope that makes sense. 希望有道理。

Answer 2

You could always begin by stopping the abuse of innerHTML . 你总是可以通过停止滥用innerHTML来开始。

Instead you should send JSON from your server as a replay and "build" then DOM for the new items manually. 相反，您应该从服务器发送JSON作为重播，然后手动“构建”DOM以获取新项目。 To make it easier , i would suggest to, besides data about news, send another parameter: version number . 为了方便起见，我建议除了有关新闻的数据外，还要发送另一个参数： 版本号 。

The flow of data goes like this: 数据流如下：

you have no version number available in closure ( first run ): 你没有关闭version号（第一次运行）：
- send request to ajax.php and receive JSON 发送请求到ajax.php并接收JSON
- extract version number and store in local closure 提取version号并存储在本地闭包中
- loop through all data items, and generate news feed ( not with innerHTML ) 循环遍历所有数据项，并生成新闻源（不使用innerHTML）
value of version is not undefined : 价值version 不 undefined ：
- you request data from ajax.php?version=XXXX and receive JSON: 您从ajax.php?version=XXXX请求数据并接收JSON：
  1. if JSON is empty {} , then there are no new feeds. 如果JSON为空{} ，则没有新的Feed。 Do nothing 没做什么
  2. if JSON contains data , then: 如果JSON包含数据，则：
    - you update version to the latest received from server 您将version更新为从服务器收到的最新version
    - loop through all the data and add news feed items 循环遍历所有数据并添加新闻Feed项

Thats how i would do it. 多数民众赞成我将如何做到这一点。

将jQuery淡入或滚动效果应用于Facebook，如新闻源

问题描述

2 个解决方案

解决方案1
1 已采纳 2011-11-19 16:55:13

解决方案2
1 2011-12-10 13:18:01

将jQuery淡入或滚动效果应用于Facebook，如新闻源

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-11-19 16:55:13

解决方案2 1 2011-12-10 13:18:01

解决方案1
1 已采纳 2011-11-19 16:55:13

解决方案2
1 2011-12-10 13:18:01