Home/ Questions/Q 6822271
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T21:38:35+00:00

I have a news feed that has been developed using PHP, MySQL, and jQuery.

  • 0

I have a news feed that has been developed using PHP, MySQL, and jQuery. The news feed does it’s job by getting new content every 5 seconds. However, this is done by a “refresh” of the complete content. I want to only ADD any new content to the news feed. I want a fade in or scroll effect to be used (jQuery) for this to occur. The items already loaded should stay on the feed and NOT reload with any new content. How can I do this?

Here are my 2 pages and code.

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I am not quite sure exactly how you have this setup, but it does not seem right:

    1. 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; 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.

    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. The second file is going to contain both feed.php and the rest of 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.

    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. newsFeed.php is in charge of query the database and responding with a json object that contains all the news information. 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.

    Hope that makes sense.

    • 0