jQuery | {"Mat's Random Thoughts"}

Some weeks back I came across jQuery. Once in a while a library comes along that makes you say “wow”. To me jQuery is among those. jQuery is a JavaScript library that allows you to perform complicated (or sometimes not complicated but boring) JavaScript work in just a few lines.

What’s the fuss about jQuery! Lets say you want to do the following:

When the page is loaded, draw some tabbed panes.
When the page is loaded, make an AJAX call to get an RSS xml file and then parse through the XML response and display all blog titles.
When a link is clicked you want some list items (in li tags) to turn blue via css manipulation.
And you want to display the number of paragraphs within a div.
Last you want the div to hide (slowly).
Oh also when you click on the tabs you want to print out the current time.

Now imagine all of this on a single html page (small page). That is a fair bit of JavaScript there. With jQuery I put all of that on a single html page so you can see its power.

Here is the complete html code…save it to file test.html. Note that I include the latest js code directly from jQuery site. If you download the library then change the script include paths appropriately.

 &lt;html&gt;
   &lt;head&gt;
     &lt;script type="text/javascript"src="http://jqueryjs.googlecode.com/files/jquery-1.2.2.min.js"&gt;&lt;/script&gt;
     &lt;link rel="stylesheet"href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css"type="text/css" media="screen" title="Flora (Default)"&gt;
     &lt;script type="text/javascript"src="http://dev.jquery.com/view/trunk/ui/current/ui.tabs.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript"&gt;
       $(document).ready(function(){
         // draw the tabs
         $("#example &gt; ul").tabs();
         // make the ajax call to load the atom xml
         $.ajax({
           url: 'atom.xml',
           type: 'GET',
           dataType: 'xml',
           timeout: 1000,
           error: function(){
             alert('Error loading XML document');
           },
           success: function(xml){
             $(xml).find('entry').find('title').each(function(){
               var item_text = $(this).text();
               $('&lt;li&gt;&lt;/li&gt;')
               .html(item_text)
               .appendTo('ol').appendTo("#titles");
             });
           }
         });
         // attach a event handler to ALL links on the page
         $("a").click(function(){
           // change the style of the links to bold
           $("a").addClass("test");
           // effects example...hide the clickme link
           $("#clickme").hide("slow");
           // change the li items to blue color
           $("#orderedlist &gt; li").addClass("blue");
           // print the number of paras and the current time
           $("#numparas").text("Number of paras " + $("#mycontainer p").size() +". Time is "+ new Date());
           return false;
         });
       });
     &lt;/script&gt;
     &lt;style type="text/css"&gt;
       a.test { font-weight: bold; }
       .blue {color:blue}
     &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
     &lt;a id="clickme"href="http://blogs.averconsulting.com/"&gt;Click here top hide meand make the li items blue!!&lt;/a&gt;
     &lt;ul id="orderedlist"&gt;
       &lt;li&gt;test1&lt;/li&gt;
       &lt;li&gt;test2&lt;/li&gt;
     &lt;/ul&gt;
     &lt;div id="titles"&gt;
       &lt;b&gt;&lt;u&gt;Some of my bloggedtopics...&lt;/u&gt;&lt;/b&gt;&lt;br/&gt;
     &lt;/div&gt;
     &lt;div id="mycontainer"&gt;
       &lt;p&gt;para1&lt;/p&gt;
       &lt;p&gt;para2&lt;/p&gt;
       &lt;p&gt;para3&lt;/p&gt;
     &lt;/div&gt;
     &lt;div id="numparas"&gt;
     &lt;/div&gt;
     &lt;div id="example" class="flora"&gt;
       &lt;ul&gt;
         &lt;li&gt;&lt;ahref="#fragment-1"&gt;&lt;span&gt;Tab-1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;ahref="#fragment-2"&gt;&lt;span&gt;Tab-2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;ahref="#fragment-3"&gt;&lt;span&gt;Tab-3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
       &lt;div id="fragment-1"&gt;
         Tab-1 content here...
       &lt;/div&gt;
       &lt;div id="fragment-2"&gt;
         Tab-2 content here...
       &lt;/div&gt;
       &lt;div id="fragment-3"&gt;
         Tab-3 content here...
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/body&gt;
 &lt;/html&gt;

<html>

<head>

$(document).ready(function(){

// draw the tabs

$("#example > ul").tabs();

// make the ajax call to load the atom xml

$.ajax({

url: 'atom.xml',

type: 'GET',

dataType: 'xml',

timeout: 1000,

error: function(){

alert('Error loading XML document');

success: function(xml){

$(xml).find('entry').find('title').each(function(){

var item_text = $(this).text();

$('<li></li>')

.html(item_text)

.appendTo('ol').appendTo("#titles");

});

}

});

// attach a event handler to ALL links on the page

$("a").click(function(){

// change the style of the links to bold

$("a").addClass("test");

// effects example...hide the clickme link

$("#clickme").hide("slow");

// change the li items to blue color

$("#orderedlist > li").addClass("blue");

// print the number of paras and the current time

$("#numparas").text("Number of paras " + $("#mycontainer p").size() +". Time is "+ new Date());

return false;

});

</script>

a.test { font-weight: bold; }

.blue {color:blue}

</style>

</head>

<body>

<a id="clickme"href="http://blogs.averconsulting.com/">Click here top hide meand make the li items blue!!</a>

</ul>

<b><u>Some of my bloggedtopics...</u></b><br/>

</div>

</div>

</div>

<ul>

</ul>

Tab-1 content here...

</div>

Tab-2 content here...

</div>

Tab-3 content here...

</div>

</body>

</html>

Download the atom.xml file and copy it to the same folder as test.html.Fire up test.html in your browser.

A few pointers:

$(“#orderedlist > li”) means return the li elements inside the element with id ‘orderedlist‘.
$.ajax is the call to the ajax function. If you are familiar with JSON you should be fine reading that code.
$(xml).find(‘entry’).find(‘title’).each(function(){….}parses the AJAX XML response. Finds all entry/title elements and for each executes the anonymous function.
$(“a”).click(function(){….} attaches an anonymous event handler function to ALL link tags.
$(“a”).addClass adds a style class to all link tags.
$(“#mycontainer p”).size() means count the number of<p> tags inside the div element with id ‘mycontainer’.
$(“#numparas”).text means replace the text inside.

There is the jQuery library and then there is the jQuery UI library.The tabs example above uses the jQuery UI library. There are other UI widgets built around jQuery and I like what I see. Though I wish the table supported inline editing of cells. There is a plugins that allowed editing but I will better if the main table code supports editing.