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
Implementation

Included jQuery files
Setup Html
Setup jQuery Selectable
Server side program

Testing automation

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.

jQuery Selectable example

You can select the item in the list with click and click pushing Ctrl key. If you push Ctrl key, multiple selection is available.

jQuery selectable multiple selection

Selected Item's id is shown above the list.

top of this page

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.

jQuery Selectable example folder

top of this page

Included jQuery files

This example uses css and JavaScript files of jQuery, listed below.


<link rel="stylesheet" href="/jquery/themes/cupertino/jquery-ui.css">

<script src="/jquery/jquery-1.10.2.js"></script>

<script src="/jquery/ui/jquery.ui.core.js"></script>
<script src="/jquery/ui/jquery.ui.widget.js"></script>
<script src="/jquery/ui/jquery.ui.mouse.js"></script>
<script src="/jquery/ui/jquery.ui.selectable.js"></script>

In order to change the theme of jQuery, please take a look at jQuery Dialog. The way to do that is same.

top of this page

Setup Html

At first, you have to write Html like below.


<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>

<ol id="selectable">
	<li class="ui-widget-content" id="item1">Item 1</li>
	<li class="ui-widget-content" id="item2">Item 2</li>
	<li class="ui-widget-content" id="item3">Item 3</li>
	<li class="ui-widget-content" id="item4">Item 4</li>
	<li class="ui-widget-content" id="item5">Item 5</li>
	<li class="ui-widget-content" id="item6">Item 6</li>
</ol>

In this code, list items has each id. This id is used to specify which items are selected, in JavaScript and server side program.

top of this page

Setup jQuery Selectable

After rendering the Html on the browser, it has to set up jQuery selectable plugin from JavaScript.


$(function() {
	$( "#selectable" ).selectable({
		stop: function() {
			var result = $( "#select-result" ).empty();
			var dataString = "";
			
			$( ".ui-selected", this ).each(function() {
				var index = $( "#selectable li" ).index( this );
				result.append( " #" + ( index + 1 ) );
				
				dataString = dataString + "," + this.getAttribute("id");
			});
			
			
			var queryString = "selectedIds=" + dataString.substr(1, dataString.length);
			
			$.ajax({
				url: "/samples/selectable/syncdata.alns",
				data : queryString,
				dataType: "html",
				success: function( data ) {
					
				}
			});
		}
	});
});

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.

top of this page

Server side program

After the stop event occur and the $.ajax() function access "/samples/selectable/syncdata.alns". The source code is below.


@selectedIds = String.split($IN.selectedIds, ",");
$size = Array.size(@selectedIds);
for($i = 0; $i < $size; $i++){
	// do something here
	
	$id = $selectedIds[$i];
	System.println("Selected id : " + $id);
}


return 0;

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.