Применение jQuery Fade in или Scroll Effect к Facebook как лента новостей - PullRequest
Новая
       11

Применение jQuery Fade in или Scroll Effect к Facebook как лента новостей

0 голосов
/ 19 ноября 2011

У меня есть лента новостей, разработанная с использованием PHP, MySQL и jQuery. Лента новостей выполняет свою работу, получая новый контент каждые 5 секунд. Однако это делается путем «обновления» всего содержимого. Я хочу только добавлять новый контент в ленту новостей. Я хочу использовать эффект постепенного появления или прокрутки (jQuery) для этого. Уже загруженные элементы должны оставаться в ленте и НЕ перезагружаться с каким-либо новым контентом. Как я могу это сделать?

Вот мои 2 страницы и код.

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 

<?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);
?>

Ответы [ 2 ]

1 голос
/ 10 декабря 2011

Вы всегда можете начать с прекращения злоупотребления innerHTML.

Вместо этого вы должны отправить JSON с вашего сервера в качестве воспроизведения и «собрать» затем DOM для новых элементов вручную.Чтобы сделать это проще, я бы предложил, помимо данных о новостях, отправить еще один параметр: номер версии .

Поток данных выглядит следующим образом:

  1. у вас нет version номера, доступного в закрытии (первый запуск):
    • отправьте запрос на ajax.php и получите JSON
    • извлеките version номер и сохраните в локальном закрытии
    • перебирает все элементы данных и генерирует ленту новостей (не с innerHTML)
  2. значение version равно , а не undefined:
    • вы запрашиваете данные у ajax.php?version=XXXX и получаете JSON:
      1. , если JSON пуст {}, тогда нет новых каналов.Ничего не делать
      2. , если JSON содержит данные, то:
        • вы обновляете version до последних, полученных от сервера
        • , просматриваете все данные и добавляете элементы новостной ленты

Вот как бы я это сделал.

1 голос
/ 19 ноября 2011

Я не совсем уверен, как именно у вас есть эта настройка, но она не кажется правильной:

  1. Создайте файл, который содержит только код php, и этот файл будет возвращать объект json, который будет содержать последние новости; Вы будете анализировать объект на стороне клиента. Ниже приведен пример того, как будет выглядеть ответ этого 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);
?>
  1. Второй файл будет содержать и feed.php, и остальную часть ajax.php. Когда вы выполняете вызов ajax для обновленных новостей, недавно созданный php-файл ответит объектом json, который вы проанализируете и зададите значения таблицы с ее актуальным содержимым.

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>

Я не проверял это, но это общая идея, как это должно работать. index.php - это место, где будет находиться пользователь, каждый интервал, который мы собираемся выполнить updateNews, и эта функция отвечает за вызов newsFeed.php через AJAX. newsFeed.php отвечает за запрос к базе данных и отвечает с помощью объекта json, который содержит всю новостную информацию. Как только updateNews () получает ответ от newsFeed.php, он перебирает объект JSON и добавляет содержимое ответа в div.

Надеюсь, что это имеет смысл.

...