Way 2 Web

Web development tips


 
Ajax Linked Selection

Introduction

Ajax Linked Selection is based on our JavaScript Linked Selection, which relates two select tags so that the second is filled with data relevant to the value of the first.

However, this time the data is refreshed using Ajax calls to a second page, which retrieves the data from a database, memory cache or the like.

BONUS: To link three select boxes, simply create a another widget linking the last two select boxes. (See below.)

API

Constructor

AjaxLinkedSelection (masterTag, slaveTag, url [, method]
                  [, requestParams][, errorHandler]);
masterTag
Object reference or ID of the first select box
slaveTag
Object reference or ID of the second select box
url
The url of the Ajax server-side page that retrieves "slave data" for the "master selected id".
This page must be able to read in the request "id" as well as other parameters you specify as requestParams (below), and must return a JavaScript array of objects, where each object has attributes: "text" "value", and "selected". (The last one is optional).
method
The http request method: GET (default) or POST
requestParams
Array of parameter name-value pairs. These are fixed parameters sent in the Ajax request every time it is sent. Use this to indicate the data request type and the culture, as we have in our demo. The master selected id value is added to the parameter list automatically, and named "id".
errorHandler
Function reference to error handler function. (For advanced users.)
[Top of page]

Demo

Country and State

Select country to populate states. There are no states for UK.

Default values: country=USA; state=New York.

[Top of page]

Code

HTML

<select id="country" name="country">
    <option value="">-- select country ---</option>
    <option value="2">Canada</option>
    <option value="3">UK</option>
    <option value="1" SELECTED>USA</option>
</select>
<br />
<select id="state" name="state">
</select>

Javascript

<script language="javascript" src="../../js/x/x_core.js"></script>
<script language="javascript" src="../../js/y/ylib.js"></script>
<script language="javascript" src="../../js/y/y_util.js"></script>
<script language="javascript" src="../../js/y/y_AjaxLinkedSelection.js"></script>
<script language="javascript">
    var params = ["action=state","culture=en-us"];
    var countryStates = new ylib.widget.AjaxLinkedSelection(
                                    "country", "state", 
                                    "ajaxServer.asp", 
                                    "GET", params);
</script>

Server-side ASP page (ajaxServer.aspx)

<%@ Page Language="C#" AutoEventWireup="true" 
        CodeFile="ajaxServer.aspx.cs" Inherits="widgets_ajax_ajaxServer" %>

Server-side ASP page - code behind (ajaxServer.aspx.cs)

protected void Page_Load(object sender, EventArgs e) {
    Response.ContentType = "text/javascript";
    string id = Request.QueryString.Get("id");
    string action = Request.QueryString.Get("action");
    StringBuilder returnString = new StringBuilder();
    
    /* 
        Retrieve the data based on values "id" and "action"
        and build a response string in this format: 
            [{text:"...",value:"...",selected:false},
             {text...}]
        No final ";" is necessary
        
        For example:
    returnString.Append("[{text:\"California\",value:\"CA\",selected:false}," +
                         "{text:\"OH\",value:\"Ohio\",selected:false}," + 
                         "{text:\"NY\",value:\"New York\",selected:true}]");
        
    */                                  
    
    Response.Write(returnString.ToString());
}

We use Request.QueryString because we specified "GET" in our widget constructor. We could have used "POST" and Request.Form instead.

We specified the value for action in the widget constructor (in params), since it remains constant between requests. The value for id is supplied by the widget. It corresponds to the selected option of the first select box.

[Top of page]

Three or more select boxes

What if you decide to add a city selection, filled with data dependent on the state?

Simply add another <select> tag, and widget. (And, of course, the server-side processing logic in your ajaxServer.aspx page.) Piece of cake.

var paramsCity = ["action=city","culture=en-us"];
var stateCities = new ylib.widget.AjaxLinkedSelection(
                                "state", "city", 
                                "ajaxServer.asp", 
                                "GET", paramsCity);

Files

Have you benefitted from this site?

If so, please consider making a donation.

Your appreciation is.. well, greatly appreciated.

[Top of page]

Recommendations