HTML Select Element Binder - Sample Page

Welcome to documentation about this script.

My name is Gabriel Pires and I create this script to make easy my days as web-developer.

This is a simple javascript that work to bind with ajax a select HTML element.

Spec:

Version: v1.0
Last Update: 2010-09-01
The ajax handler is Ajax Requester - MyLib JS - Developed by David Mark - http://www.cinsoft.net/

The first thing you need know is: I create this script based in a simple convention of data.

An object with the follow attributes

Text: The simple text that you wanna show in interface
Value: The data hide in the value attribute of the option element
Select (Opitional): This represent the element that will be come selected in the element.

E.g: {"text":"my first item", "value":10, "selected":"selected"}

This object will be a part of our array.

E.g: 
[
{"text":"my first item", "value":10},{"text":"item 2", "value":20}
]

Let me show how do it:

Sample 1 - Using an array to fill

The first I'll create an array with data and capture the element:

var myData = [{"text":"Select an item", "value":0},{"text":"item 1", "value":1},{"text":"item 2", "value":2}];
var mySelect = document.getElementById('mySelect');

Now we'll create a new binder object and pass our select by parameter

var binder = new bindList(mySelect);
The object constructor require an select element by parameter.

All is ready to initiate the bind process


		binder.fill(

  		{

      		"source": myData, //THE ARRAY OBJECT

      		"success": function(){alert('here comes my success function');},//THE SUCCESS FUNCTION

      		"fail": function(){alert('here comes my fail function');},//THE FAIL FUNCTION

      		"load": "Loading data...",//THE MESSAGE THAT WILL BE SHOWN WHILE THE SCRIPT FILL THE LIST

      		"empty": "No Item(s)" // THE MESSAGE THAT WILL BE SHOWN WHEN THE SERVICE OR THE LIST HAS NO ITEM(S)

  		});

In the fill method we have and unique parameter composed by source, success, fail and load

source (required) - This parameter can be an array object or an url of a webservice (Sample 2).
sucess (Optional) - A simple callback function that run after the fill process.
fail (Optional) - A callback function to call in case of error.
load (Optional) - This represent the message that will be shown in your element until the fill process has been completed.

Done, now we have a binder function working perfectly. To see all the code running, look the sample1.html in the sample folder.

Sample 2 - Using a webservice to fill

The first I'll create an array with data and capture the element:

var myService = "my-service.php";
var mySelect = document.getElementById('mySelect');

Now we'll create a new binder object and pass our select by parameter

var binder = new bindList(mySelect);
The object constructor require an select element by parameter.

All is ready to initiate the bind process


		binder.fill(

  		{

      		"source": myService, //THE URL OF SERVICET

      		"success": function(){alert('here comes my success function');},//THE SUCCESS FUNCTION

      		"fail": function(){alert('here comes my fail function');},//THE FAIL FUNCTION

      		"load": "Loading data...",//THE MESSAGE THAT WILL BE SHOWN WHILE THE SCRIPT FILL THE LIST

      		"empty": "No Item(s)" // THE MESSAGE THAT WILL BE SHOWN WHEN THE SERVICE OR THE LIST HAS NO ITEM(S)

  		});

In the fill method we have and unique parameter composed by source, success, fail and load

source (required) - This parameter can be an array object or an url of a webservice
sucess (Optional) - A simple callback function that run after the fill process.
fail (Optional) - A callback function to call in case of error.
load (Optional) - This represent the message that will be shown in your element until the fill process has been completed.

Done, now we have a binder function working perfectly. To see all the code running, look the sample2.html in the sample folder.

Developer Notes:

1: Everytime that you fill a select element, all items inside will be removed.

2: In this version 1.0 there's no way to append an item to control. Only full bind.

3: The ajax handler is Ajax Requester - MyLib JS - Developed by David Mark - http://www.cinsoft.net/