jQuery Sortable and Dialog example

jQuery sortable is used when graphical sorting is necessary. This example shows you 2 line sorting using server side program. This is often used for software configuration.

Access and work the example
Implementation

Included jQuery files
Setup HTML
Setup jQuery Sortable and Dialog
Handling data
Inner html of jQuery Dialog

Testing automation

Access and work the example

In order to access this example, please access the url below or "jQuery Sortable Control" link from the toppage.

http://localhost:8080/samples/sortable/

Then the page below will appear.

jQuery sortable example

This example has two lines of the list. You can sort freely these lists by drag and drop.

Sort the jQuery sprtable with drag and drop

When you click an Item, the dialog appear and show which item is clicked.

jquery dialog appears

top of this page

Implementation

This example uses sortable lists and jQuery dialog. This example pattern is often used in page layout of website application, just like blog and cms.

The source code is in "ALINOUS_HOME/samples/sortable/" folder.

jquery sortable and dialog project

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.sortable.js"></script>

<script src="/jquery/ui/jquery.ui.draggable.js"></script>
<script src="/jquery/ui/jquery.ui.position.js"></script>
<script src="/jquery/ui/jquery.ui.resizable.js"></script>
<script src="/jquery/ui/jquery.ui.button.js"></script>
<script src="/jquery/ui/jquery.ui.dialog.js"></script>
<script src="/jquery/ui/jquery.ui.effect.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 prepare list to sort. The source code below is main part of the "index.html".


<div id="demo">
<ul id="sortable1" class="connectedSortable">
	<li class="ui-state-default clickable" id="a1">Item 1</li>
	<li class="ui-state-default clickable" id="a2">Item 2</li>
	<li class="ui-state-default clickable" id="a3">Item 3</li>
	<li class="ui-state-default clickable" id="a4">Item 4</li>
	<li class="ui-state-default clickable" id="a5">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
	<li class="ui-state-highlight clickable" id="b1">Item 1</li>
	<li class="ui-state-highlight clickable" id="b2">Item 2</li>
	<li class="ui-state-highlight clickable" id="b3">Item 3</li>
	<li class="ui-state-highlight clickable" id="b4">Item 4</li>
	<li class="ui-state-highlight clickable" id="b5">Item 5</li>
</ul>
</div>

<div id="dialog" title="Basic dialog"></div>

In this html, there are 2 lists and div tag to be the dialog.

The list item, which is li tag, has "clickable" class. This class is used to handle click event in the next JavaScript.

top of this page

Setup jQuery Sortable and Dialog

The JavaScript enable the jQuery sortable and dialog. In this code, it sets up below.

JQuery sortable
JQuery dialog
Click support


$(function() {
	var sorting = 0;
	$( "#sortable1, #sortable2" ).sortable({
		connectWith: ".connectedSortable",
		update: function(event, ui) {
			var currenId = this.getAttribute("id");
			
			var result = $("#" + currenId).sortable("toArray");
			
			//alert("updated: " + result );
			
			var queryString = "sortId=" + currenId + "&data=" + result;
			
			$.ajax({
				url: "/samples/sortable/syncsorteddata.alns",
				data : queryString,
				dataType: "html",
				success: function( data ) {
					
				}
			});
			
			// allow clicked operation after 600 milliseconds
			setTimeout(function(){sorting = 0;}, 600);
		},
		deactivate: function( event, ui ) {
			setTimeout(function(){sorting = 0;}, 300);
		},
		start: function( event, ui ){
			// exhibit clicked operation
			sorting = 1;
		}
	}).disableSelection();
	
	$(".clickable").click(function() {
		if(sorting == 1){
			return;
		}
		
		var url = "/samples/sortable/innerdlg.html";
		$.ajax({
			type: 'POST',
			url: url,
			data: {
				selectedId: this.id,
				innerHtml: this.innerHTML
			},
			dataType: 'html',
			success: function(data) {
				$('#dialog').html(data);
			},
			error:function() {
				alert('Error occur');
			}
		});
		$( "#dialog" ).dialog( "open" );
	});
	
	$( "#dialog" ).dialog({
		height: 280,
		width: 400,
		autoOpen: false,
		show: {
			effect: "blind",
			duration: 1000
		},
		hide: {
			effect: "explode",
			duration: 1000
		}
	});
});

The sortable() is called and set the list tags, whose id are "sortable1" and "sortable2". And define the event handler function. The event handler calls $.ajax() and access "/samples/sortable/syncsorteddata.alns" with parameter to notify the sorted result.

The dialog() is called to make the div tag be the dialog. The inner html is made when the list item clicked.

The click event is made manually by program. The click event must not occur when you are dragging or dropping the item. So it defines "var sorting" variable and inhibit to continue click operation.

The start event of jQuery sortable inhibit the operation. The deactivate and update event allow it after 600 and 300 milliseconds from they happened.

top of this page

Handling data

The source code below is one of "/samples/sortable/syncsorteddata.alns", which is accessed when sort has finished.


// data called

return 0;

This code does nothing, but by placing break point, we can know what parameter comes. This url is accessed twice, notify result for "sortable1" and "sortable2".

result of jQuery sortable1

result of jQuery sortable2

top of this page

Inner html of jQuery Dialog

The source code is of inner dialog which is shown when user click any of the item.


<!DOCTYPE html>
<html lang="en">
<body>
<script>
$(function() {
	$( "#btnclosedlg" ).click(function() {
		$( "#dialog" ).dialog( "close" );
	});
});
</script>
<h1>Inner dialog</h1>

<p>
	You selected item whose id is {$IN.selectedId}.<br />
	The name is {$IN.innerHtml}.
</p>
<p>
<button type="button" id="btnclosedlg">Close</button>
</p>

</body>
</html>

The javascript of "index.html" calls $.ajax() and access this url, which is "/samples/sortable/innerdlg.html". And this code shows the parameter.

Testing automation

This example is testable code, there is more example to do testing automation. Please take a look at Testing jQuery Sortable and Dialog.