article

Friday, March 21, 2014

Jquery Auto Refresh Div Content

Jquery Auto Refresh Div Content


jQuery and AJAX Call Code
<script src="http://code.jquery.com/jquery-latest.js"></script>
(function($)
{
    $(document).ready(function()
    {
        $.ajaxSetup(
        {
            cache: false,
            beforeSend: function() {
                $('#content').hide();
                $('#loading').show();
            },
            complete: function() {
                $('#loading').hide();
                $('#content').show();
            },
            success: function() {
                $('#loading').hide();
                $('#content').show();
            }
        });
        var $container = $("#content");
        $container.load("rss-feed-data.php");
        var refreshId = setInterval(function()
        {
            $container.load('rss-feed.php');
        }, 9000);
    });
})(jQuery);
PHP Data Script Code
<?php
$feed_url = 'http://tutorial101.com/blog/feed/';
$content = file_get_contents($feed_url);
$x = new SimpleXmlElement($content);
$feedData = '';
$date = date("Y-m-d H:i:s");

//output
$feedData .=  "<ul>";
foreach($x->channel->item as $entry) {
    $feedData .= "<li><a href='$entry->link' title='$entry->title'>" . $entry->title . "</a></li>";
}
$feedData .= "</ul>";
$feedData .= "<p>Data current as at: ".$date."</p>";

echo $feedData;
?>
View
<div id="wrapper">
    <div id="content"></div>
    <img src="loading.gif" id="loading" alt="loading" style="display:none;" />
</div>

Related Post