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


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.