jQuery: generating a random link from a Google sitemap

Generating a random link from a Google sitemap is quite simple with jQuery. First of all, we need to define some method and properties within our class:

/**   @name SiteManager
      @access Public
      
      Main class to handle site contents */
      


var SiteManager = new function () {
    
    var that = this;
    
    var pageURL = location.href;
    var pageTitle = document.title;
    
    this.execute = function(callback) {
        
 
 return callback.method(callback.parameters);
    };
    
    
    var isActualContent = function(term) {
    
        
 return that.execute({
 
     parameters: pageTitle,
     method: function(parameters) {
     
         if(parameters.indexOf(term) == -1) {
  
      return true;
      
  } else {
  
      return false;
      
  }
     
     
     }
 
 
 });
    
    
    };
    
    this.XHR = function(type, url, callback) {
    
 url = 'http://www.yoursite.com/' + url;
 
 switch(type) {
     case 'xml':
       return $.get(url, callback);
       break;
       
     case 'html':
       return $.ajax({
    url: url,
    data: null,
    dataType: 'html',
    success: callback
       });
       break;
     
       
     default:
         break;     
     
 
 }
    
    
    
    };

Then we can create our custom method to fetch the data we need from the sitemap:

this.getRelatedResources = function() {
        
     var related = [];
        if(isActualContent('Home')) {
        return this.execute({
     
     parameters: [$('#content-sub > h2:first-child'), pageURL, '<div class="resource res single-res"><h3>Related resource</h3><ul><li>'],
     method: function(parameters) {
     
         return that.XHR('xml', 'sitemap.xml', function(data) {
  
      $(data).find('loc').each(function() {
      
         var text = $(this).text();

               var rawURL = parameters[1].replace('http://www.yoursite.com/', '').replace('index.html', '');
         
         var urlChunks = rawURL.split('/');
         
         var baseDir = urlChunks[0];
         var currentDir = urlChunks[1];

         
         if(text.indexOf(baseDir) != -1) {
         
             if(text.indexOf(currentDir) == -1) {
         
                 
          var re = /\/.+\.html$/;
          var link;
          
          if(re.test(text)) {
          
              link = '';
          
          } else {
          
          
              related.push(text);
          
          }
          
          
          
   
          
      }
          
         
         }
      
      });
      
      
      var currentIndex = Math.floor(Math.random() * (related.length));
      
      var html = parameters[2];
      
      html += '<a href="' + related[currentIndex] + '">Read</a></li></ul></div>';
      
      
      $(html).insertAfter('#content-sub h2:first-child + div.resource');
      
      
  });
     
     }
     
 });
 
 } else {
 
     return;
     
 }
    
    
    
    };

We fetch our sitemap through Ajax and we parse all the URLs by filtering the URL of the current page. Then all this data is pushed into the related array. Finally, we create a random index for this array and we extract only a single link. Do more with less!

Leave a Reply

Note: Only a member of this blog may post a comment.