Search

Pages
- About
Recent Articles
Content by tags

Ajax design patterns DOM Html jQuery jScript Links MagicQuotes MySql OOP Optimizing PHP Security Snippet
Recent Comments

PhpScripter © 2008
RSS Feed | CSS and XHTML

How to use jQuery and get started with Ajax

Ajax are or was the buzzword of the so called web 2.0. The acronym stands for something quite unsexy: Asynchronous JavaScript and XML. But Ajax stands for more than just javascript fetching xml files and inserting them in a page. It’s used nowadays to move, insert and delete all kinds of data and stuff on a page, without reloading the whole page. Which gives an impression of a quick and fluent site.

The caveats of javascript

For a couple of years ago, tampering with JavaScript meant to sell your soul to the devil. Every browser have their own standards of interpreting JavaScripts, with made developing a sour business with lots and lots of curse words. Luckily nerds around the globe united and made some frameworks that takes care of all that boring business of coding exceptions for mayor browsers. Examples are:

They are all excellent and I would recommend any of them, and stick to it. My current flavor is jQuery which is relatively quick and well supported and has at least two books about it.

Using a javascript framework for ajax

I’m gonna show how easy it is to use. Lets start with something easy. Lets hide and show some data and later on insert data from a input field into the page without reloading or using server-side scripting.

Creating the html page

Lets create a simple html page and name it to index.html with this content:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
<html>
 
 <body>
 <h1>Ajax in a bun</h1>
 <div id="text">This text will be hidden and removed by javascript, you'll see..</div>
 </body>

Download jQuery and link it

Then download the latest release jQuery (1.2.6 when this was written) from here, choose “Minified” version (smaller and faster to load in the browser). Put it in the same folder as the above index.html file and link it into that file by:

..
<head>
  <title> Ajax in a bun </title>
  <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
</head>
..

Insert show / hide link

Now you’re all set to start using the wonderful world of jQuery. Lets insert a link to click that will hide and show that text:

..
<div id="text">This text will be hidden and removed by javascript, you'll see..</div>
<div><a href="#" id="text-hider">Hide/Show text above</a></div>
..

Id’s and classes, what are they for?

Now is the time to talk about those id attribute in html tags. Id’s are a unique identifier in every page and there must be only one. Classes and Id is a way to describe how a html document is supposed to be rendered by the browser and css stylesheets. But also as a way for javascript to manipulate the document by the DOM-tree as it’s called.

Add a click event with jQuery

So lets attach a click event to the id ‘text-hider’ that hides and showes the text with the ‘text’ id. I am using toggle() instead of click(), because the first can switch between hide and show without any extra checks if the text is hidden or not.

..
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" >
	$(document).ready(function() {
		$("#text-hider").toggle(function(){
			$("#text").hide();
		},function(){
			$("#text").show();
		});
	});
  </script>
..

And that should work like a charm when you click the link. The text disappears quick. How to you get it back? This is the absolute basis of Ajax, showing and removing stuff without reloading the page. If you then add the possibility to fetch data from another page and insert it into the page then the web isn’t as static and boring as it was for four years ago.

Learn more about jQuery

If you want to learn more go to Jquery’s getting started section and experiment.

The full index.html source

Here is the html file in its full glory:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> Ajax in a bun </title>
  <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
  <script type="text/javascript" >
	$(document).ready(function() {
		$("#text-hider").toggle(function(){
			$("#text").hide();
		},function(){
			$("#text").show();
		});
	});
  </script>
</head>
 <body>
 <h1>Ajax in a bun</h1>
 <div id="text">This text will be hidden and removed by javascript, you'll see..</div>
 <div><a href="#" id="text-hider">Hide/Show text above</a></div>
 </body>
</html>

Posted by Stig Lindqvist June 2008