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.
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:
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.
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.
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/