The code:
Before using Mapbox, you must link to jQuery and mapbox.js. I do this in the HEAD of my document. I always use the minified jQuery that is hosted by Google. Also, if you want the map’s zoom to be activated by the mousewheel, you must include the mousewheel plugin: plugins.jquery.com/project/mousewheel

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/mousewheel.js"></script>
<script type="text/javascript" src="/js/map.js"></script>  

Then, some CSS. This is how I styled the map in this example, though you may use any rules you like (the Middle Earth map has an odd proportion):

  <style type="text/css">
#viewport {
width: 469px;
height: 400px;
cursor: move;
margin: 20px auto;
overflow: hidden; /*keep map contents from spilling over if JS is disabled*/
}
</style>  

Then, some HTML. The structure of your map must be almost exactly like this. Every layer DIV must have a height and width set to it. I did it inline in this example only for ease of understanding. IMG tags must be used for every layer except the starting one, which you should notice is structured much differently than the other layers. You currently must include the .mapcontent class on the inner layers, even if you aren’t planning to add additional content to the map:

  <div id="viewport">
<div style="background: url(images/layer1.png) no-repeat; width: 469px; height: 400px;">
<!--top level map content goes here-->
</div>
<div style="height: 1097px; width: 1286px;">
<img src="images/layer2.jpg" alt="" />
<div class="mapcontent">
<!--map content goes here-->
</div>
</div>
<div style="height: 1794px; width: 2104px;">
<img src="images/layer3.jpg" alt="" />
<div class="mapcontent">
<!--map content goes here-->
</div>
</div>
<div style="height: 2492px; width: 2922px;">
<img src="images/layer4.jpg" alt="" />
<div class="mapcontent">
<!--map content goes here-->
</div>
</div>
</div>  

The jQuery:

 <script type="text/javascript">
$(document).ready(function() {
$("#viewport").mapbox({mousewheel: true});
});
</script>   

That is all! (requires mousewheel plugin: http://plugins.jquery.com/project/mousewheel). If you don’t require the mousewheel, the map may be created simply as $(“#viewport”).map(). Of course, there are some more advanced settings. Here are all of the settings and their defaults:

  <script type="text/javascript">
$("#viewport").mapbox({
zoom: true,//is the map zoomable?
pan: true,//is the map draggable?
defaultLayer: 0,//this is an array type of number (zero being the first layer), which indicates which layer is shown by default
layerSplit: 4,//this is how many zoom levels each layer has.  The higher this number is, the smoother the transition will be between each layer
mapContent: ".mapcontent",//this is the class that goes on the layer which holds any content you will manually place onto the map
defaultX: null,//if not set, the map will be centered on the x-axis.  If set, the left side of the map will be here
defaultY: null,//defaultY is the same as defaultX, but for the y-axis
callBefore: function(layer, xcoord, ycoord, viewport) {},//callback which happens when the left mouse button is held down, and gives access to the layer node, the x and y coordinates, and the viewport node.
callAfter: function(layer, xcoord, ycoord, viewport) {},//callback which happens when the left mouse button is released
beforeZoom: function(layer, xcoord, ycoord, viewport) {},//callback which occurs before the map zooms in either direction.
afterZoom: function(layer, xcoord, ycoord, viewport) {},//callback which occurs after the map zooms in either direction.
mousewheel: false //false by default only because it requires mousewheel event plugin: http://plugins.jquery.com/project/mousewheel
}
)
</script>  

In addition to the settings, there are some methods that may be passed to any map once it has been created:

 <script type="text/javascript">
$("#viewport").mapbox("zoom");//zooms in 1 level (determined by layerSplit option)
$("#viewport").mapbox("zoom", 2);//zooms in 2 levels
$("#viewport").mapbox("back");//zooms out 1 level
$("#viewport").mapbox("back", 2);//zooms out 2 levels
$("#viewport").mapbox("zoomTo", 2);//zooms to the default size of the third layer (0 being the first)
$("#viewport").mapbox("left");//move the current layer left 10 pixels
$("#viewport").mapbox("right");//move the current layer right 10 pixels
$("#viewport").mapbox("up");//move the current layer up 10 pixels
$("#viewport").mapbox("down");//move the current layer down 10 pixels
$("#viewport").mapbox("left", 20);//move the current layer left 20 pixels
$("#viewport").mapbox("right", 20);//move the current layer right 20 pixels
$("#viewport").mapbox("up", 20);//move the current layer up 20 pixels
$("#viewport").mapbox("down", 20);//move the current layer down 20 pixels
$("#viewport").mapbox("center");//centers current layer
$("#viewport").mapbox("center", {
x: 200,
y: 400
});//centers current layer at positions 200px, 400px on the x and y axis
</script>   

Here’s an example using some of these methods to implement a control panel for the map:

  jQuery(document).ready(function() {
$("#viewport2").mapbox({
mousewheel: true,
layerSplit: 8//smoother transition for mousewheel
});
jQuery(".map-control a").click(function() {//control panel
var viewport = $("#viewport2");
//this.className is same as method to be called
if(this.className == "zoom" || this.className == "back") {
viewport.mapbox(this.className, 2);//step twice
}
else {
viewport.mapbox(this.className);
}
return false;
});
})   

Demo: http://dllurl.com/61
Download: http://dllurl.com/62
Source: http://dllurl.com/61

Additional Resource :  Asbestos and Mesothelioma Cancer

Related Listings:

1. JQuery Mousewheel Plugin prototype.js mousewheel Event.wheel(e) extension Scroll mouse wheel to see delta...
2. jParallax – Stunning Animation Effects jParallax has had a major overhaul in readiness to be...
3. jQuery plugin Tooltip Script Replacing standard tooltips is easy: Just include the script on...

Features

* Send entire form when one element changes
* Send just the changed element
* Form buttons and input:submit is not sent unless clicked
* Override action/method parameter of form or fallback
* Send elements from multiple forms in one request
* Callbacks on sending, success and error
Usage:

$("input.autosave").autosave({
    url: url, // Defaults to parent form url or window.location.href
    method: "post",  // Defaults to parent form url or get
    grouped: true, // Defaults to false. States whether all "input.autosave" should be sent in the request or only the
    one it was triggered upon
    success: function(data) {
        console.log(data);
    },
    dataType: "json", // Defaults to JSON, but can be XML, HTML and so on
    send: function() {
        // Do stuff while we wait for the ajax response, defaults to doing nothing
        console.log("Saving");
    },
    error: function(xmlReq, text, errorThrown) {
        // Handler if the ajax request fails, defaults to console.log-ing the ajax request scope
        console.log(text);
    }
});
// Submits entire form each time one of the
// elements are changed
$("form#myForm").autosave();
 

Todo:
Support timed autosave for textareas

Demo: http://dllurl.com/60
Download: http://dllurl.com/59
Source: http://dllurl.com/60

Related Listings:

1. jQuery Plugin – autoSave autoSave is the result of one too many user complaints...
2. Animated Ajax Delete : jQuery I’m a huge fan of WordPress’ method of individual article...
3. Autopopulating Select Boxes Allow the user to select a top level category from...

The plugin has a few options you can pass to it. You can set the delay amount and determine if you want to show the “image loading” progress bar. I’m currently in the middle of re-writing my blog site, so I’m not going to bother posting detailed instructions just yet. Just take a look at the demo source. I’ve provided three different examples that should help you figure things out. If not, give me a shout out below. Enjoy!

Demo: http://dllurl.com/54
Download: http://dllurl.com/52
Source: http://dllurl.com/53

Related Listings:

1. SWF Video Player Script This new component will give your viewers the ability to...
2. Javascript Wait While Loading Page Display Image If you have a page that takes long time...
3. Image Watermark on Uploaded Images This tutorial shows you how you can add a watermark...

Pretty slick no? The possibilities for this plugin are endless. Doctors can have before and after images of patients, Photoshop users can show the before and after differences between images, remodelers can show the before and after images of projects and on and on. This plugin weighs in at only 7K and can be used multiple times on a page.

* Slick effect, no Flash needed
* It’s just 7K
* Reusable on multiple containers
* Degradable. If the visitor doesn’t have JavaScript they will still see both images.

How to Use

First, your before and after images must be the same size. Each image must be inside its own div, and both of those within a containing div which must have an ID. See this example.

   <div id="container">
 <div><img alt="before" src="before.jpg" width="600" height="366" /></div>
 <div><img alt="after" src="after.jpg" width="600" height="366" /></div>
</div>

All images *MUST* have the width and height declared otherwise the plugin won’t work in Safari, Chrome, and any other webkit-based browsers.

To use the plugin you’ll need to have a copy of jQuery and the jQuery UI, or point to jquery on Google and jqueryui on Google, and the plugin. Place the files on your site and link to them:

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>
<script type="text/javascript">
$(function(){
	$('#container').beforeAfter();
});
</script>

That’s it! You can apply the before/after plugin to any number of elements on a page.
Options

The following options are configurable:

* animateIntro – whether or not to have the drag bar start completely to the right of the container and gradually move by itself to the midpoint (default false)
* introDelay – if animateIntro is true, the number of milliseconds to wait before beginning the automatic drag bar move to the center of the image (default 1000)
* introDuration – if animateIntro is true, the number of milliseconds it will take for the drag bar to go from the right side of the image to the middle of the image (default 1000)
* showFullLinks – whether or not to display links below the image that a visitor can click on that will automatically show the full before or full after image (default true)

Options are added when calling the script:

 $('#container').beforeAfter({
	animateIntro : true,
        introDelay : 2000,
        introDuration : 500,
        showFullLinks : false
});  

Demo: http://dllurl.com/50
Download: http://dllurl.com/51
Source: http://dllurl.com/50

Related Listings:

1. Password Strength – Estimates brute force time jQuery plugin This plugin shows the strength of you passwords by telling...
2. imgAreaSelect with jQuery Plugin imgAreaSelect is a jQuery plugin for selecting a rectangular area...
3. jQuery Lightbox Plugin jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra...

The following is a html code as simple as it can be with an image type input and a Submit button:

 <form name="submit_image" method="post" enctype="multipart/form-data"  action="">

<input type="file" name="image"/>
<input name="Submit" type="submit" value="Upload Picture"/>

</form>  

This is the function that applies the watermark over the uploaded picture and uploads the picture on the server. It considers that the location where the images are to be uploaded is a folder named “images”:

 function copy_marked($img_name,$newname,$type)
{
// check image type. The image type is sent as parameter 3 ($type). Note that for every image type a different function is used to create an image in memory from the uploaded file.

   if(!strcmp("image/jpg",$type) || !strcmp("image/jpeg",$type) || !strcmp("image/pjpeg",$type))
        $src_img=imagecreatefromjpeg($img_name);

    if(!strcmp("image/png",$type))
        $src_img=imagecreatefrompng($img_name);

    if(!strcmp("image/gif",$type))
        $src_img=imagecreatefromgif($img_name);

// get image size, we'll need it later
    $old_x=imageSX($src_img);
    $old_y=imageSY($src_img);

// create destination image
    $dst_img=ImageCreateTrueColor($old_x,$old_y);

    imagecopyresampled($dst_img,$src_img,0,0,0,0,$old_x,$old_y,$old_x,$old_y);

    // on this demo, the watermark image will be named watermark.gif and will be located in images folder. If you intend to use other file, you will have to change this
    $watermark_file='images/watermark.gif';

// you can setup the transparency used for watermark image.
   $transparency=50;

// just in case you don't know what extension the watermark file has. This function is listed lower
   $wext=getFileExtension('images/watermark.gif');

// create an image from watermark file
    if(!strcmp("jpg",$wext) || !strcmp("jpeg",$wext)) $watermark=imagecreatefromjpeg($watermark_file);

    if(!strcmp("png",$wext)) $watermark=imagecreatefrompng($watermark_file);

    if(!strcmp("gif",$wext)) $watermark=imagecreatefromgif($watermark_file);

// get watermark width
    $watermark_width = imagesx($watermark);
    $watermark_height = imagesy($watermark);

// place watermark image on the right left of the main image
    $dest_x = $old_x - $watermark_width - 5;
    $dest_y = $old_y - $watermark_height - 5;

 // uncomment these lines and comment the ones above if you want to place the watermark in the very center of the image
//    $dest_x = (($thumb_w - $watermark_width)/2);
//    $dest_y = (($thumb_h - $watermark_height)/2);

// merge the two images
  imagecopymerge($dst_img, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, $transparency);

 // copy the new created image to the destination file, in the images folder
   if(!strcmp("image/png",$type))  imagepng($dst_img,$newname);

    else if(!strcmp("image/gif",$type))  imagegif($dst_img,$newname);

    else imagejpeg($dst_img,$newname);

// delete the images from memory
   imagedestroy($dst_img);
    imagedestroy($src_img);

}  

Function getFileExtension(), needed to get the file extension:

 function getFileExtension($str) {
        $i = strrpos($str,".");
        if (!$i) { return ""; }
        $l = strlen($str) - $i;
        $ext = substr($str,$i+1,$l);
        return $ext;
}  

Having all these functions, here is how you verify if the form was submitted and call the copy_marked() function to upload the file and place the watermark:

  if($_SERVER['REQUEST_METHOD']=='POST')
{
    if ($_FILES['image']['name'])
    {
        $image=$_FILES['image']['name'];
         $newname="images/".$image;
        copy_marked($_FILES['image']['tmp_name'],$newname,$_FILES['image']['type']);
    }
} 

Demo: http://dllurl.com/48
Source: http://dllurl.com/49

Related Listings:

1. DHTML API, Drag & Drop for Images and Layers – Ajax – Javascript A Cross-browser JavaScript DHTML Library which adds Drag Drop functionality...
2. Moo Flow Images Gallery MooFlow is a Gallery that looks like Apple’s iTunes or...
3. Scripts for annotating images FotonotesTM is an standard, specification, and collection of scripts for...

To implement this you will need to:

1. Every time your page loads a “init()” function will load.

  <body onLoad="init()"> 

2. Define a div named “loading” right after < body > section.

 <div id="loading" style="position:absolute; width:100%; text-align:center; top:300px;">
<img src="loading.gif" border=0/></div>  

The loading.gif image should be an animated gif that suggests that the page is still loading.

3. Place this javascript code right after you define the div.

 <script>
 var ld=(document.all);
  var ns4=document.layers;
 var ns6=document.getElementById&amp;&amp;!document.all;
 var ie4=document.all;
  if (ns4)
 	ld=document.loading;
 else if (ns6)
 	ld=document.getElementById("loading").style;
 else if (ie4)
 	ld=document.all.loading.style;
  function init()
 {
 if(ns4){ld.visibility="hidden";}
 else if (ns6||ie4) ld.display="none";
 }
 </script>  

Demo: http://dllurl.com/46
Source: http://dllurl.com/47

Related Listings:

1. CJ Image Video Previewer CJ Image Video Previewer is meant to mimic the video...
2. JavaScript image combobox v1.5 Are you tired with your old fashion dropdown? Try this...
3. Loading Panel Widget Probably needless to say, but here it is. A web...

http://yournewsdomain.com?topic=it 	-  link that goes to IT news page

http://yournewsdomain.com?topic=business 	- link that goes to business news page

To be rewritten in this form:

http://it.yournewsdomain.com

http://business.yournewsdomain.com

You can achieve this without actually creating the subdomains on your server. This can be done with Apache mod_rewrite.

For this method to work you need a server that runs Apache and has mod_rewrite module installed. Also, if you don’t have access to server configuration files, then you might need some help from your hosting support for the second step and possibly with the fists step of this tutorial.

Step 1. Create a wildcard DNS A record in your DNS Zone.

A wildcard DNS record is a record reprezented by the character “*” , that will match all non existing subdomain names. For example *.yournewsdomain.com will match for  key1.yournewsdomain.com , key2.yournewsdomain.com and so on.

You will need to edit the DNS zone records for your domain and add an A record for *.yournewsdomain.com. , pointing to the IP for your domain.

If your domain  is on a shared hosting account, then you will need to search in your control panel for a section for DNS management. Enter a new A type DNS record, set as name “*” and enter the IP for your domain. If you cannot find a DNS management section on your hosting account, then you will have to ask your hosting support to add it for you.

Step 2. Setup wildcard ServerAlias

You must now configure Apache server to serve the pages that come for any subdomain of your domain. Do this by adding a wildcard ServerAlias.

Add the following line to httpd.conf VirtualHosts section for your domain:

ServerAlias www.yournewsdomain.com yournewsdomain.com *.yournewsdomain.com

Again, if you are on a shared hosting and don’t have access to httpd.conf file, and no means in your control panel to edit your VirtualHosts section, then you must  ask help from your hosting support.

Step 3. Add rewrite rules to your .htaccess file

First you must prepare your .htaccess file . If the file does not exist, create it.

You might already have these lines in your .htaccess files, if you do don’t add them again.

Options +FollowSymLinks

You need this option enabled for your rewrite rules to work. But in most cases is already enabled in the configuration files for the http server.

RewriteEngine On

Use this line if RewriteEngine is not already enabled on your server.

RewriteBase /

If your code is in the root of your domain, then use / as the rewrite base, like in the line above. If it is in a folder, then use the path to that folder, for example:

RewriteBase /subdomain/

Add the actual rewrite rules:

RewriteCond %{HTTP_HOST} !www.yournewsdomain.com$ [NC]
RewriteCond %{HTTP_HOST} ^(www.)?([a-z0-9-]+).yournewsdomain.com [NC]
RewriteRule (.*) index.php?topic=%2 [NC,QSA]

First 2 lines add the condition for the actual rewrite rule (line 3) to come in place.

First line will add an exception for the subdomain www. Add here a similar line for each subdomain that you don’t want to follow the same rule.

Second line adds the condition that the URL is in a form that looks like a subdomain , with or without the www string in front (http://anything.yournewsdomain.com).

The actual rule is the third line, and will translate any URL that matches the above conditions to a form: http://yournewsdomain.com?topic=%2.

Some things explained in the rewrite rules:

1. %2 is a back-reference that is created in the second condition. Back-references are created by groups of parentheses in the condition pattern. So in this case, the first parenthesis (www.) will create first back-reference that can be used with %1, and the second one ([a-z0-9-]) , that matches the subdomain like form, will create the second back-reference, which we use with %2.

2. The flag NC at the end of the conditions and rule means that the comparisons should be made case insensitive (No Case).

3. The flag QSA at the end of the rule means that if there are additional queries at the end of URL string, they should be added to the URL when rewritten (Query String Append).

You might need  to make adjustments to the rewrite rule form, for example instead of index.php you have other landing page, or instead of the parameter “topic” you have other.

Source: http://dllurl.com/44

Related Listings:

1. CodeIgniter – Open source PHP web application framework CodeIgniter is a powerful PHP framework with a very small...
2. Template Elements – CSS Framework Elements is a down to earth CSS framework. It was...
3. Record Mouse Movement The “movelogger” records the mouse movement a users does on...

How to do this: add a small readonly input that will show the number of left words. Every time an event that means that characters are added to the textarea, a javascript function will be called. The javascript function will count the number of words that are already in the box and display the number of words left in the small input field. The function will be presented later.

The events that need to be watched are: key up, key down and paste, so we will use the functions: onKeyDown, onKeyUp and onPaste.

Here follows the html part with the form and here the function CountWordsLeft is called in the conditions discussed earlier.

  <form name="count_form" method="post" action="">

<textarea name="desc" cols="40" rows="7" id="desc"
    onKeyDown="CountWordsLeft(count_form, document.count_form.desc, document.count_form.count,100);"
    onKeyUp="CountWordsLeft(count_form, document.count_form.desc, document.count_form.count,100);"
    onPaste="CountWordsLeft(count_form, document.count_form.desc, document.count_form.count,100);">
</textarea>

<input readonly name="count" type="text" size="5" value="100"/>

</form>  

The javascript function takes as parameters:
– myForm – the name of the form
– field – the name of the field we count words for, in out case the textarea named desc
– count – the name of the small readonly field that shows the left words
– no_words – maximum number of words allowed

The function works like this: first it removes all characters in front that are not alphanumeric (it will remove spaces for example) . Then in with the resulted string all non alphanumeric characters are replaced with space (” “). Only after that the text is split using space as a separator and the resulted words are counted. The count input box is updated with the number of words left.

 function CountWordsLeft(myForm, field, count, no_words) {
    var text=field.value + " ";
    if(no_words>0)
    {
        var iwhitespace = /^[^A-Za-z0-9]+/gi; // remove initial whitespace
        var left_trimmedStr = text.replace(iwhitespace, "");
        var na = rExp = /[^A-Za-z0-9]+/gi; // non alphanumeric characters
        var cleanedStr = left_trimmedStr.replace(na, " ");
        var splitString = cleanedStr.split(" ");
        var word_count = splitString.length -1;
        count.value=no_words-word_count;
    }
}
  

Demo: http://dllurl.com/41
Source: http://dllurl.com/42

Related Listings:

1. Jquery Alphanumerical Validation I ran into a javascript alphanumeric validation problem, though it...
2. Validation Hints for Forms As someone is typing an in an input field, it...
3. Building a better web forms : Context highlighting using jQuery In my previous article “Labels in form layouts” I wrote...

Update: On May 8th, Google announced the Feed Control. As a result, this plugin has been updated (and simplified!) to use the new Google control.

This page demonstrates the plugin by converting the markup displayed below into the feed content displayed in the sidebar to the right.

<div id="feeds">
    <a class="feed" href="http://jquery.com/blog/feed/">jQuery Blog</a>
    <a class="feed" href="http://www.learningjquery.com/feed/">Learning jQuery</a>
</div>  

Using the Google API, each anchor is converted to a series of semantic < div > elements which can be styled to your liking using CSS. The CSS structure of the generated markup is detailed here: http://code.google.com/apis/ajaxfeeds/documentation/reference.html

The following script is included in the head of this document:

  <!-- include Google Feed API -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=[your API key]"></script> 

<!-- include this plugin -->
<script type="text/javascript" src="jquery.gfeed.js"></script> 

<script type="text/javascript">
    // when the DOM is ready, convert the feed anchors into feed content
    $(document).ready(function() {
        $('a.feed').gFeed( { target: '#feeds', tabs: true } );
    });
</script>  

Options
Options can be passed to the gFeed method using an object literal. The following options are supported:

target
jQuery selector which identifies where the feed content should be inserted on the page.
title
Allows you to provide a specific feed title to override the markup.
url
Allows you to provide a specific url for the feed (which means you don’t have to use anchors).
max
Identifies the maximum number of feed items to display for a given feed. The default is 5.
tabs
true if feeds should be rendered using Google’s tabbed drawing mode.

Using the options argument we can limit each feed to only 3 items like this:

  $(document).ready(function() {
    $('a.feed').gFeed( { max: 3 } );
});  

Manually Adding a Feed
Rather than convert existing elements to feeds, we can easily add feeds on the fly like this:

   $(document).ready(function() {
    // add a feed manually
    $('#alistapart').gFeed({
        url: 'http://www.alistapart.com/feed/rss.xml',
        title: 'A List Apart Feed (Added by Brute Force)'
    });
}); 

Download: http://dllurl.com/36
Source: http://dllurl.com/37

Related Listings:

1. jFeed – jQuery Feed Parser A lightweight JavaScript feed parser based on jQuery and couldn’t...
2. Pulling Your Flickr Feed with jQuery Feeds are the easiest way to view updated content, whether...
3. jSquared is a jQuery plugin for UI like in Google Squared This plugin allows you to organize advanced search user interface...

1. Latest copy of jQuery
2. A basic understanding of JSON (don’t let this put you off – it’s really very, very easy)
3. A server-side script that can respond to the AJAX request (though I’ve provided a simple example)

Demo

Our demo will specifically look to build a simple form that allows us to book human resource for a project. The top level category is the resource type, and the sub-category will list the individual’s names.

See the demo in action
How it works

Once the top level category select is changed, it sends an AJAX request for the sub-categories. The result of which are converted to select options and the sub-category select’s elements are replaced.
Unobtrusive JavaScript

First things first: as with any page that is loaded with JavaScript and AJAX functionality, it should work without JavaScript.

To achieve this for our tutorial here’s what we need to ensure:

1. When the page is loaded, the sub-category is loaded (if the top level has a selected item).
2. There is a ‘load sub-category’ button the user can select to re-load the page. We will hide this button with a

The Code

There are 4 parts to this demo.

1. The page’s HTML.
2. The server-side code to produce the dynamic page (i.e. to pre-load the select boxes when the user first visits).
3. The jQuery & JavaScript.
4. The JSON response (which will reuse the server-side code).

HTML

<form action="/select_demo.php">
  <label for="ctlJob">Job Function:</label>
  <select name="id" id="ctlJob">
    <option value="1">Managers</option>
    <option value="2">Team Leaders</option>
    <option value="3">Developers</option>
  </select>
  <noscript>
    <input type="submit" name="action" value="Load Individuals" />
  </noscript>
  <label for="ctlPerson">Individual:</label>
  <select name="person_id" id="ctlPerson">
    <option value="1">Mark P</option>
    <option value="2">Andy Y</option>
    <option value="3">Richard B</option>
  </select>
<input type="submit" name="action" value="Book" />
</form>  

Server-side

This is just a simple example, but it should be obvious that you can expand this to go off to a database and return an object in a JSON data structure:

  < ?php
if ($_GET['id'] == 1) {
  echo <<<HERE_DOC
[ {optionValue: 0, optionDisplay: 'Mark'}, {optionValue:1, optionDisplay: 'Andy'}, {optionValue:2, optionDisplay: 'Richard'}]
HERE_DOC;
} else if ($_GET['id'] == 2) {
  echo <<<HERE_DOC
[{optionValue:10, optionDisplay: 'Remy'}, {optionValue:11, optionDisplay: 'Arif'}, {optionValue:12, optionDisplay: 'JC'}]
HERE_DOC;
} else if ($_GET['id'] == 3) {
  echo <<<HERE_DOC
[{optionValue:20, optionDisplay: 'Aidan'}, {optionValue:21, optionDisplay:'Russell'}]
HERE_DOC;
}?> 

Note that this is not accessible. To ensure accessibility, the server side will handle the pre-population of the select boxes as the page is loaded. Here is an example (excluding the headers, footers and JavaScript) of the accessible example.
JSON Response

If I pass the server side id = 2, i.e. /select.php?id=2&ajax=true, the return value is (the ajax=true is an arbitrary flag that I’m using to differentiate between a normal user request and one done via AJAX):

 [ {optionValue:10, optionDisplay: 'Remy'},
{optionValue:11, optionDisplay: 'Arif'},
{optionValue:12, optionDisplay: 'JC'}]  

The enclosing square brackets denotes an array and each element is separated by a comma.

Within the array are three objects. If you’re familiar with PHP or Perl, you can basically treat these as hashes. The objects have keys (in this case two keys, one called ‘optionValue’ and one called ‘optionDisplay’), and values. Note that keys don’t need to be wrapped in quotes (though in some cases you will need them sometimes).

jQuery & AJAX Request

Our JavaScript is going to attach itself after the page is load, and fire an event each time the job function select box is changed.

The event will send the new value of the select box and reload the contents of the person select box.

Note that I’m be a bit naughty here, in that I’m plugging HTML directly in to the DOM.

Each item in the JSON response is looped round and used to build up the new options for the select box. As the response is an array (as mentioned earlier), we can call the .length method on it.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
  $("select#ctlJob").change(function(){
    $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '';
      }
      $("select#ctlPerson").html(options);
    })
  })
})
</script>

Where to take it next

So that’s the primer. Next steps: upgrade, integrate, extend and stylise. Below is an example of the category selection when submitting an item for sale on Ebay.

Demo: http://dllurl.com/24
Download: http://dllurl.com/25
Source: http://dllurl.com/23

Related Listings:

1. Auto Populating Select Boxes Script If you are familiar with using select boxes for categorisation...
2. AJAX Chained Select Script PHP This script requires PHP. You can also other server...
3. Incremental Search for Select Boxes – jQuery Plugin Did you ever have to scroll through a select box...