Posted By

alexscript on 09/09/11

Tagged

Versions (?)

Last Edited at 09/09/11 01:02am

Statistics

Viewed 983 times

Favorited by 0 user(s)

Related snippets

How to read an xml file with jquery/javascript

/ Published in: JavaScript

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

//Perform when the document is ready/loaded/rendered
$(document).ready(function(){
   //Asynchronously retrieve the xml file contents		
   $.ajax({				
      type: "GET",				
      url: "sites.xml",				
      dataType: "xml",				
      success: function(xml) { //Upon successful retrieval
         //Iterate through the all the nodes/items
         $(xml).find('site').each(function(){ //For each item, perform the following						
            //Read each child node and associate the values with a variable
            var id = $(this).attr('id'); //Find an attribute within the "site" node/element						
            var title = $(this).find('title').text(); //Find the child element of "site" called title						
            var url = $(this).find('url').text(); //Find the child element of "site" called title						
            //Write out a custom link with the values above
            $('<div class="items" id="link_'+id+'"></div>').html('<a href="'+url+'">'+title+'</a>').appendTo('#page-wrap');
            //Establish the "desc" node/element as the this value below, to be referenced fro child nodes/elements
            $(this).find('desc').each(function(){							
               var brief = $(this).find('brief').text();
               var long = $(this).find('long').text();
               $('<div class="brief"></div>').html(brief).appendTo('#link_'+id);
               $('<div class="long"></div>').html(long).appendTo('#link_'+id);
            });					
         });				
      }			
   });		
});