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.
This example has two lines of the list. You can sort freely these lists by drag and drop.
When you click an Item, the dialog appear and show which item is clicked.
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.
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 prepare list to sort. The source code below is main part of the "index.html".
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.
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
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.
Handling data
The source code below is one of "/samples/sortable/syncsorteddata.alns", which is accessed when sort has finished.
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".
Inner html of jQuery Dialog
The source code is of inner dialog which is shown when user click any of the item.
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.