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:

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

An object with the follow attributes

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

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

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/