Return to Snippet

Revision: 45475
at May 1, 2011 21:58 by jafar


Updated Code
//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>

Revision: 45474
at May 1, 2011 21:56 by jafar


Initial Code
//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("node").each(function() {

  //CREATE ARRAY			
  posts = [{
    id: $(this).attr("id"),
    content: $(this).attr("content"), 
    date: $(this).attr('date'), 
    user: $(this).attr('username'), 
  }];
						
						
  //ATTACH TEMPLATE
  $('#theList').tmpl(posts).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>

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

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

Initial Title
Jquery Templates with XML

Initial Tags


Initial Language
jQuery