Howto use the SelectAutoOptions class

The SelectAutoOptions class aims to be a simple class which helps dynamically filling a select element in an HTML form with the content of an XML file. This class inherits from the Controler class but doesn't have actually a view associated with it. This should change in the future versions of MetaJS library.

A first use of SelectAutoOption

To use the current version of the SelectAutoOptions class you have to know the DOM identifier of the select element that you want to fill (its id property), having an xml file which contains values you want to fill in your select and then create an instance object of the SelectAutoOptions class which will be able to handle the filling of your select.

For example suppose that in your HTML page you have a select defined like this :

<select id="mySelect" name="mySelect"></select>

As you see, you shouldn't have to create options for this element. Indeed the SelectAutoOptions object will fill even the default value. Nevertheless you could add option elements to your select if you want to.

So we have a HTML form which contains a select element identified by mySelect, now you need to write an XML file which contains the values you want to fill in your select.

Here is an example of such a xml file:

<result>
 <tuple>
  <id>1</id>
  <value>My first displayed value</value>
 </tuple>
 <tuple>
  <id>2</id>
  <value>My second displayed value</value>
  </tuple>
  <tuple>
   <id>3</id>
   <value>My third displayed value</value>
  </tuple>
</result>

Now that you have the select element and the XML file xhich contains the values you want to fill in it, then you should start creating a new SelectAutoOptions instance for this input.

To create a new instance of the SelectAutoOptions, use the following code:

  var mySelectControler=new SelectAutoOptions("mySelect",Array("0","Choose in the list ..."));

Here after, we show the arguments that you could pass to the SelectAutoOptions contructor :

(arguments0) should be the identifier of your DOM element,
(arguments1) is optional and should be the initial value you want to fill,
(arguments2) allows you to define some dependent select element.

Now you have all the elements needed to be able to use your SelectAutoOptions instance except the way to inform your select about your xml file name. Suppose that your xml file is named test.xml, then you only need to call the well known execRequest as explained in this howto.

To tell your select to take values from your test.xml file, use the following code:

mySelectControler.execRequest("test.xml");

You get all the informations needed to create your first test application which dynamically loads values in the select of your HTML form.

The full sample source code

The XML file

test.xml

<result>
  <tuple>
    <id>1</id>
    <value>My first displayed value</value>
  </tuple>
  <tuple>
    <id>2</id>
    <value>My second displayed value </value>
  </tuple>
  <tuple>
    <id>3</id>
    <value>My third displayed value </value>
  </tuple>
</result>

The HTML file

selectExample.html

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; UTF-8" />
<script type="text/javascript" src="http://metajs.googlecode.com/svn/trunk/metajs/Meta.js" charset="utf-8"></script>
<script type="text/javascript">
// <![CDATA[
System.libpath="http://metajs.googlecode.com/svn/trunk/metajs/";
System.require("Controler.SelectAutoOptions");
System.start=function(){
var mySelectControler=new SelectAutoOptions("mySelect",Array("0","Choose in the list ..."));
mySelectControler.execRequest("test.xml");
}
// ]]>
</script>
<title>SelectAutoOptions sample of use</title>
</head>

<body>
<form id="test1" submit="" onsubmit="return false;">
<select id="mySelect" name="mySelect"/>
</form>
<script type="text/javascript">
// <![CDATA[
System.ensure_included();
// ]]>
</script>
</body> </html>

Using SelectAutoOption in real application

As you can see in the previous use case, once the start function is executed, you can't access your SelectAutoOption instance anymore. Indeed as you've defined the mySelectControler variable in the start body, this variable is local in this function and can't be accessed from outside. In real world applications you will need to develop accesses from anywhere in the page.

In order to be able to use your instance once the page was loaded you will need to define the mySelectControler as a global variable. See the example bellow, use the following syntax in the header section of your HTML page :

System.libpath="http://metajs.googlecode.com/svn/trunk/metajs/";
System.require("Controler.SelectAutoOptions");
System.start=function(){
  mySelectControler=new SelectAutoOptions("mySelect",Array("0","Choose in the list ..."));
  mySelectControler.execRequest("test.xml");
}

function loadTheOtherOne(){
  if(loaded=="test.xml"){
    mySelectControler.execRequest("test1.xml");
    loaded="test1.xml";
  }
  else{
    mySelectControler.execRequest("test.xml");
    loaded="test.xml";
  }
}

var mySelectControler;
var loaded="test.xml";

As you can see we have just defined mySelectControler outside the start function body, so we can use it from outside the start fcuntion. Here we will use this instance from the loadTheOtherOne function which load the test.xml or test1.xml XML file if it's not the already loaded one.

Now you are able to access your instance from anywhere in the page and interact with it. So you will add to your page a new submit button which simply runs the loadTheOtherOne function when the user clicks on it.

The full example bellow uses this new submit button. The XML files used (test.xml and test1.xml) are quite similar to the previous ones and are not copied in here.

The full sample source code

The HTML file

selectExample2.html

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; UTF-8" />
<script type="text/javascript" src="http://metajs.googlecode.com/svn/trunk/metajs/Meta.js" charset="utf-8"></script>
<script type="text/javascript">
// <![CDATA[
System.libpath="http://metajs.googlecode.com/svn/trunk/metajs/";
System.require("Controler.SelectAutoOptions");
System.start=function(){
  mySelectControler=new SelectAutoOptions("mySelect",Array("0","Choose in the list ..."));
  mySelectControler.execRequest("test.xml");
}

function loadTheOtherOne(){
  if(loaded=="test.xml"){
    mySelectControler.execRequest("test1.xml");
    loaded="test1.xml";
  }
  else{
    mySelectControler.execRequest("test.xml");
    loaded="test.xml";
  }
  return false;
}

var mySelectControler;
var loaded="test.xml";
// ]]>
</script>
<title>SelectAutoOptions sample of use</title>
</head>

<body>
<form id="test1" submit="" onsubmit="return false;">
<select id="mySelect" name="mySelect">
</select>
<input type="submit" name="sub1" value="load another file" onclick="loadTheOtherOne();"/>
</form>
<script type="text/javascript">
// <![CDATA[
System.ensure_included();
// ]]>
</script>
</body> </html>