Posted By

jafar on 05/01/11

Tagged

Versions (?)

Last Edited at 05/01/11 09:56pm

Statistics

Viewed 630 times

Favorited by 0 user(s)

Related snippets

Jquery Templates with XML

/ Published in: jQuery

A good JSON tutorial here: http://www.giantflyingsaucer.com/blog/?p=2581&cpage=1#comment-3018

Highlighted TextExpand

//HEAD//////////////////////////////////////////////////////
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

//XML///////////////////////////////////////////////////////

<?xml version="1.0" encoding="utf-8" ?>
<thing>
  <item id="72" date="04.30.2011" title="This is what it is" />
</thing>

//HTML/////////////////////////////////////////////////
<div id="AnyDiv"></div>

//AJAX///////////////////////////////////////////////

$.ajax({
  type: "GET",
  url: "theXML.xml",
  dataType: "xml",
  cache: false,

//START SUCCESS
  success: function(xml) {

//FOR EACH LOOP
$(xml).find("item").each(function() {

//CREATE ARRAY			
  thePosts = [{
    id: $(this).attr("id"),
    content: $(this).attr("content"), 
    date: $(this).attr('date'), 
    user: $(this).attr('username'), 
  }];
						
						
  //ATTACH TEMPLATE
  $('#theList').tmpl(thePosts).appendTo('#AnyDiv');
						
						
   //END FOR EACH					
   });

//END SUCCESS
  }

});
//END AJAX////////////////////////////////////////////////////

//JQUERY HTML//////////////////////////////////////////
<script id="theList" type="text/x-jquery-tmpl">

<p>${id}</p>
   <p>${content}</p>
   <p>${date}</p>
   <p>${user}</p>

</script>

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

Report this snippet Tweet