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
- Testing automation
In order to access this example, please access the url below or "jQuery Selectable" link from the toppage.
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.
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.
In order to change the theme of jQuery, please take a look at jQuery Dialog. The way to do that is same.
At first, you have to write Html like below.
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.
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.
This example is testable code, there is more example to do testing automation. Please take a look at Testing jQuery Selectable example.