Construction, Ajax, and Interactivity

Example 1 : Load External Page

jQuery has the functionality to render html pages into a div without the browser reloading, let's take a look at how this is done.

The jQuery

$(document).ready(function(){//create new anonymous function
  $('#info ul a').click(function(e) {//create a click event on the hyper link
	//new variable binding the click function attribute hrefand #description div
    var url = $(this).attr('href') + ' #description';
	//targeting the #contentArea load in the clicked weboage
    $('#contentArea').html('loading...').load(url);
	e.preventDefault();
	//prevent looping 
		
	});//close click function
});//close anonymous function 

$(document).ready(function(){//anonymous function 
     $('#info ul a').click(function(){//target click function
									$('.rlink').hide();
		//create new variable to insert a link after the #contentArea							
		  var i = $('<a href="#info" class="rmove">Clear Loaded Items</a>').insertAfter('#contentArea');
		 		  i.click(function(){//call on the variable for click event
		       //empty() content div
			   var c = $('#description').remove();
			   //empty the created link div
			   var e = i.remove(); 
			   
			   //call on variables c and e
			   var $y = c + e; 
			   //excuted click event
			              $y;
						   var $m = $('.rlink').show();
						   $m
				}); //close remove click function
		 });//clos the click trigger
	 });//close Anonymous function

The CSS

#info ul{
	padding:0px 0 10px 0;
	margin:0px;
}

#info ul li {
	list-style:none;
}



#info ul li a {
	font-family:arial;
	font-size:14px;
	color:#FFF;
	border-bottom:dashed #FFF 1px;
	text-decoration:none;
	padding:5px;
}

#info ul li a:hover {
	font-family:arial;
	font-size:14px;
	color:#FF0;
	border-bottom:dashed #FF0 1px;
	text-decoration:none;
	padding:5px;
}

.rmove {
	font-family:arial;
	font-size:14px;
	color:#FFF;
	border-bottom:dashed #FFF 1px;
	cursor:pointer;
}

The HTML

<div id="info">
<ul>
<li><a href="html/demopage.html">Demo Html Page</a></li>
</ul>
<div id="contentArea"><p>Content will Load here..</p></div>
</div>
</div>

The Working Code

Content will Load here..

Example 2 : GET Xml data

In this example the GET ajax function will look inside a node and find the children nodes to display.

jQuery Code

var d = { //main variable to load xml
load : function() {//load function to load the varialbe
$.ajax({ // begin a ajax
	type:'GET',//get something
	url:'html/tech.xml',//getting document//
    success: function(data){//if success
	 $(data)//targeting cached data
	 .find('item')//find the node item
	 .each(function() {//for each item
					var d = $(this).find('title').text();//var to cache all title
					var c = $(this).find('link').text();//cache url
					//once cached create new  paragraph with a link
						   $('<p><a href="'+ c +'">' +  d  +'</a></p>').appendTo('#rssFeed');
						   })//clse each function
	     }//closesuccess function

     });//close ajax
   }//cloase load function
}//close Dom variable

$(document).ready(function(){//new anonymous function
						   d.load();//load var d
			});//close anonymous function

The CSS

#rssFeed a {
color:#FFF;
text-decoration:none;
font-size:12px;
border-bottom: 1px dashed #FFF;
border-top: 1px dashed #FFF;
padding:15px 0 15px 0;
margin:0;
}

#rssFeed a:hover {
color:#FF0;
text-decoration:none;
font-size:12px;
border-bottom: 1px dashed #FF0;
border-top: 1px dashed #FF0;
padding:15px 0 15px 0;
margin:0;
}

#rssFeed p {
padding:20px 0 20px 0;
}

The HTML

<div id="rssFeed">
</div>

The Working Code

Below will be a list of xml items taken fron the New York Times XML file.