jQuery Selectable example
jQuery Selectable is a parts to select options graphically. This example shows you how to synchronize the selection with the server side program.
Access and work the example
In order to access this example, please access the url below or "jQuery Selectable" link from the toppage.
http://localhost:8080/samples/selectable/
Then the page below will appear.
You can select the item in the list with click and click pushing Ctrl key. If you push Ctrl key, multiple selection is available.
Selected Item's id is shown above the list.
Implementation
This example shows you how to implement the selectable part and synchronize the data by using ajax.
The source code is in the "ALINOUS_HOME/samples/selectable/" folder.
Included jQuery files
This example uses css and JavaScript files of jQuery, listed below.
In order to change the theme of jQuery, please take a look at jQuery Dialog. The way to do that is same.
Setup Html
At first, you have to write Html like below.
In this code, list items has each id. This id is used to specify which items are selected, in JavaScript and server side program.
Setup jQuery Selectable
After rendering the Html on the browser, it has to set up jQuery selectable plugin from JavaScript.
The stop event occur when the selection made. If use use Ctrl + Click, this event do when user release Ctrl button.
This event handler function send data to the url "/samples/selectable/syncdata.alns". This time, it uses query string as data. If you want to write simpley, you can use JSon format. The sample is in jQuery Sortable & Dialog.
Server side program
After the stop event occur and the $.ajax() function access "/samples/selectable/syncdata.alns". The source code is below.
In this example code, split the parameter named "selectedIds" with "," by String.split(), and print the ids to the console.
Testing automation
This example is testable code, there is more example to do testing automation. Please take a look at Testing jQuery Selectable example.