Underneath all the hype and hoopla, AJAX is just a means of loading data from the server to the web browser without a visible page refresh. Here is a simple example of using ajax with the help of jquery.

The Problem

I have a drop down list whose content should change based an event or maybe another selection.

The Solution – Ajax!

Jquery has made ajax calls very trivial with several function in the library.  The example below is probably one of the more advanced functions.

{code type=javascript}
//ajax function
$.ajax({
type: ‘POST’,
url: ‘/url_to_get_output_data’,
data: {‘myInput’:some_js_var},
dataType: ‘json’,
success: function(myOutput) {
//at this stage, json data has been returned and now we can display it
//first empty the selection list
$(‘#myListID’).empty();
//loop through json, build html and append to list
$.each(myOutput, function(myIndex, myVal) {
var html = ”;
html += ‘<option value=”‘+myIndex+'” label=”‘+myVal+'”>’+myVal+'</option>’;
$(‘#myListID’).append($(html));
});
}
});
{/code}