By now I am sure you have heard of the JavaScript(JS) library called jQuery. If not jQuery is a lightweight cross browser JS library that is free open source. It is the most popular JS library in use today.
Here are some of the features of jQuery:
- Supports All Versions of CSS
- Supports Events and Utilities
- Works with Ajax
- Creates Usability, Effects and Animations
- Works in all Popular Internet Browsers
- Small File Size
- Can combine with Prototype
- Can work with Other Coding Languges
Here is a link to some jQuery Tutorials
What I am going to show here is a simple jQuery/Ajax example. Say we’re developing a form with a drop down box for city. When the user selects the city we want to hide the drop down box and instead show the text “You live in the city of <city>.”
How to Get the jQuery Library
When I load the jQuery library I prefer to load it from google. Since jQuery is one of the most popular JS libraries it may already be cached on the user’s computer. There are some other reasons I will not get into on this blog post, but leave a comment and we can discuss it.
So here is how you can load the jQuery library from google
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.4.1");></script>
Pretty simple. The code above goes in the head tag.
Putting Together the Page
Now that you know how to load the library, let’s take a look at the main html page:
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.4.1");</script>
<script type="text/javascript">function dynamic_Select(ajax_page, city) { $.ajax({ type: "GET", url: ajax_page, data: "ch=" + city, dataType: "text/html", success: function(html){$("#txtResult").html(html);} }); }</script>
<div id="txtResult">
<form method="post">
<select name="city">
<option>What City do you live in?</option>
<option value="Philadelphia">Philadelphia</option>
<option value="Conshohocken">Conshohocken</option>
<option value="Havertown">Havertown</option>
<option value="Drexel Hill">Drexel Hill</option>
<option value="Ardmore">Ardmore</option>
</select>
</form>
</div>
The above code loads jQuery from google then loads a jQuery/Ajax function called dynamic_Select which accepts two variables. The first variable is ajax_page which is the page that will be called when the select box changes values. The second, city, is the value of the select box. Inside the function it sets type to GET and URL to the dynamic page name. The data will be “ch”+city which will parsed out to city.php?ch=city, and the dataType is text/html because that is what we are returning. The success is the event that gets triggered if there are no problems with the code behind page. So for this example we are going to overwrite the inner html of the div id txtResult so the select box will no longer be visible.
Now lets take a look at the city.php file:
<?php
echo "You live in the city of ".$_GET[ch].".";
?>
Ok so this is a super simple example. All we are doing is getting the variable $_GET[ch] which is the value of the select box and outputting it to the txtResult div with some text. You could take this a step further and insert it into a DB to collect information on your users. Or if this was a contact us form we could send out the email and return a message to the user without leaving the page.
So that is it, a very simple jQuery/Ajax example. Below is a working demo and a zip of the code. So try it for yourself.
So what tips or tricks would you like to see us do next?
