Arduino  Diff  AJAXEngine  OpenAjax 
www.mathertel.deThe AJAX EngineSamples 3: AJAX ControlsCarPage.aspx

Cascading Select elements with AJAX

View Source

1. Select a class:


2. Select a model:

This page is a small sample that shows how to link 2 <select> boxes for a cascading selection by using OpenAjax events.

The first <select> element is used for selecting a car series and the second <select> element will display the available models. Both elements are implemented by using the <ajax:Select> control that can publish OpenAjax events when specifying the eventname attribute. The surrounding <div> element specifies the eventnamespace.

  <div eventnamespace="jcl"> 
    <p>1. Select a class:</p>
    <ajax:Select ID="ClassSelect" runat="server" eventname="carclass" style="width: 120px">
      <option value="C-Class">C-Class</option>
      <option value="E-Class">E-Class</option>
      <option value="S-Class">S-Class</option>
      <option value="SLK-Class">SLK-Class</option>
    </ajax:Select>
    <br />
    <p>2. Select a model:</p>
    <ajax:Select ID="ModelSelect" runat="server" eventname="carmodel" style="width: 120px">
    </ajax:Select>
  </div>

When the value of the first control is changed the select element publishes an "jcl.carclass" event.

For linking these 2 elements and a server side method a small javascript object is used:

var cascade = {
  _carclassvalue: null,
  
  handleEvent: function(name, data) {
    if (name == "jcl.carclass")
      this._carclassvalue = data;
    ajax.Start(this.FillAction, this);
  }, // handleEvent

  FillAction: {
    delay: 10,
    prepare: function(obj) { return (obj._carclassvalue); },
    call: proxies.CarData.getModelsByClass,
    finish: function (value, obj) { document.getElementById("ModelSelect").CreateOptions(value); },
    onException: proxies.alertException
  } // FillAction
} // cascade
OpenAjax.hub.subscribe("jcl.carclass", cascade.handleEvent, cascade);

The last line is the key for capturing the event published by the first <select> element and will cause the cascade.handleEvent method to be called.

This method will save the new carclass value to the local _carclassvalue variable and then start the AjaxAction FillAction.

The prepare function retrieves the stored value that is used as the parameter for the Ajax server webservice call that is available through proxies.CarData.getModelsByClass.

The finish function will be used the returned options to call CreateOptions on the second <select> element.

OpenAjax hub event log:

This page is part of the http://www.mathertel.de/ web site.