Google+ Peter Bromberg's .NET Blog | Display RSS Feed with JSONP and AJAX UI-blocking Loader

Peter Bromberg's .NET Blog All Things Programming

Display RSS Feed with JSONP and AJAX UI-blocking Loader

2. July 2013 08:38 by admin in ASP.NET, JSON

Here is a technique to display an RSS feed with the jQuery $ajax method, using Yahoo's YQL query API to retrieve the feed and return it as JSON:

<!DOCTYPE HTML>
<html>
 <head>
<title> Feed Demo with Ajax Loader </title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="Scripts/jquery.blockUI.js"></script>
  <script>
function stopUI() {
    $.blockUI({ message: '<img id="AjaxLoader" src="Images/ajax-loader.gif" />',
        css: {
            padding: '25px',
            margin: 0,
            width: '5%',
            top: '40%',
            left: '40%',
            color: '#000',
            textAlign: 'center',
            border: '3px solid #aaa',
            backgroundColor: '#efefef',
            cursor: 'wait'
        },
        overlayCSS: {
            backgroundColor: '#000',
            opacity: 0.2
        }
    });
    $('body').css('cursor', 'wait');
}
 
// REMOVE THE BLOCKED INTERFACE
function startUI() {
    $.unblockUI();
    $('body').css('cursor', 'default');
}
 
$(function() {
    stopUI();
     getFeed();
});
 
function getFeed()
{ 
    $.ajax({
// ajax request to yql public json url 
      url : 'http://query.yahooapis.com/v1/public/yql',
      jsonp : 'callback',
// tell jQuery that we need JSON format
      dataType : 'jsonp',
// tell YQL that what we want and to output in JSON format
      data : {
          q : 'select * from rss where url ="http://www.peterbromberg.net/syndication.axd"',
          format : 'json'
      },
// parse response data
      success : function(data) {
        $.each(data.query.results.item, function(i,data)
        {
var news_data =
"<div><a href='"+data.link+"'>" + data.title + "</a>" + 
          data.description +"</div>";
          $(news_data).appendTo("#news");
        });
 
      }    ,
      complete: function(){
          startUI();
          } 
    });
 
}
</script>
 </head>
 <body>
<div id="news"></div>
 </body>
</html>


The download includes the Ajax-loader image as well as the required jquery.blockUI.js javascript.


 

blockUi.zip (9.58 kb)

Add comment

  Country flag


Loading