Advanced Search

Jquery Templates with XML

/ Published in: jQuery
Save to your folder(s)
A good JSON tutorial here: http://www.giantflyingsaucer.com/blog/?p=2581&cpage=1#comment-3018

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. //HEAD//////////////////////////////////////////////////////
  2. <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
  3.  
  4.  
  5.  
  6.  
  7. //XML///////////////////////////////////////////////////////
  8.  
  9. <?xml version="1.0" encoding="utf-8" ?>
  10. <thing>
  11.   <item id="72" date="04.30.2011" title="This is what it is" />
  12. </thing>
  13.  
  14.  
  15. //HTML/////////////////////////////////////////////////
  16. <div id="AnyDiv"></div>
  17.  
  18.  
  19.  
  20. //AJAX///////////////////////////////////////////////
  21.  
  22.  
  23. $.ajax({
  24.   type: "GET",
  25.   url: "theXML.xml",
  26.   dataType: "xml",
  27.   cache: false,
  28.  
  29.   //START SUCCESS
  30.   success: function(xml) {
  31.  
  32. //FOR EACH LOOP
  33. $(xml).find("item").each(function() {
  34.  
  35.   //CREATE ARRAY			
  36.   thePosts = [{
  37.     id: $(this).attr("id"),
  38.     content: $(this).attr("content"), 
  39.     date: $(this).attr('date'), 
  40.     user: $(this).attr('username'), 
  41.   }];
  42.  
  43.  
  44.   //ATTACH TEMPLATE
  45.   $('#theList').tmpl(thePosts).appendTo('#AnyDiv');
  46.  
  47.  
  48.    //END FOR EACH					
  49.    });
  50.  
  51.  
  52.   //END SUCCESS
  53.   }		
  54.  
  55.  
  56. });
  57. //END AJAX////////////////////////////////////////////////////
  58.  
  59.  
  60.  
  61. //JQUERY HTML//////////////////////////////////////////
  62. <script id="theList" type="text/x-jquery-tmpl">
  63.  
  64.    <p>${id}</p>
  65.    <p>${content}</p>
  66.    <p>${date}</p>
  67.    <p>${user}</p>
  68.  
  69. </script>

URL: http://api.jquery.com/category/plugins/templates/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.