Google+ Tools
Make Google+ profile picture
Make Google plus banners for profile
Create and share your Google Plus profile banners.

Profile image for mrk studios jafar on May 1, 2011

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

Language
jQuery
Tags

Jquery Templates with XML


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

Comments

blog comments powered by Disqus