Charl van Niekerk » Blog: Custom Muti Widgets

Main

Latest

Custom Muti Widgets

Here is some code, again making use of the Google AJAX Feed API, but this time you roll your own DOM so you have the world's flexibility of how you want the data to be displayed on your site.

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Google AJAX Feed API</title>

  <!-- Load the Google JavaScript library -->
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>

  <!-- Add our own scripts -->
  <script type="text/javascript">
   // Decide which RSS feed you want to load
   var feedUri = "http://muti.co.za/by?name=charlvn&output=rss";

   // Load Google's feed engine
   google.load("feeds", "1");

   /**
    * Do the actual magic in this function. The content
    * gets dynamically loaded and pushed into the DOM.
    */
   function loadMuti() {
    // Disable the button before we start loading
    var button = document.getElementById("mutibutton");
    button.disabled = true;

    // Load the actual data via Google
    var feed = new google.feeds.Feed(feedUri);

    // Decide what happens after the feed has been loaded
    feed.load(function(result) {
     if (result.error) {
      // If the feed could not load, enable the button again
      button.disabled = false;
     } else {
      // Create and insert the necessary elements into the DOM
      var ul = document.getElementById("muti");
      for (var i = 0; i < result.feed.entries.length; i++) {
       var entry = result.feed.entries[i];

       // Create an anchor for the link
       var a = document.createElement("a");
       a.href = entry.link;
       a.appendChild(document.createTextNode(entry.title));

       // Create an item to insert into the unordered list
       var li = document.createElement("li");
       li.appendChild(a);
       ul.appendChild(li);
      }
     }
    });
   }

   /**
    * Ensure the button is enabled before refreshing,
    * otherwise some browsers might keep it disabled
    * even after the page has been reloaded.
    */
   function resetMuti() {
    document.getElementById("mutibutton").disabled = false;
   }
  </script>
  <style type="text/css">
   /**
    * This will apply to all elements in the DOM,
    * whether it is sourced from the original HTML
    * or dynamically generated via scripting.
    */
   #muti li a {
    color: white;
    background: green;
   }
  </style>
 </head>
 <body onunload="resetMuti()">
  <!-- This is the unordered list where the links will be populated -->
  <ul id="muti"></ul>

  <!-- Here is the button triggering the ajax action -->
  <button id="mutibutton" onclick="loadMuti()">Load My Muti Submissions</button>
 </body>
</html>

I tried to document it well so that you can see what's going on. Please comment if you have any questions though!

It's a real pity that we can't call google.load("feeds", "1") only after the user clicks the button. That would mean that if they do not click the button we can avoid loading the whole feed library. However this causes strange behaviour in many browsers, probably some document.write inside of the library or something of the sort, not sure.

This has been tested in Firefox 3.0.1 on Linux and seems to work fine. Not sure about other browsers. This is not something that should be used, it's just a demo, you build your own thing and use this as an example for learning. :)

We are still trying to support HTML 5 as far as possible, naturally.

Oh yes and as a last note. This should work with any public Atom or RSS feed, not just with muti.

I have a live demo of the code up if anybody wants it.

Main

Latest

Archives

Custom Muti Widgets

0 Comments