(^358) ❘ CHAPTER 13 SORTABLE
In Example 13-3, you add some code that retrieves data from each
of getting data from the id attribute, which is what jQuery UI uses by default, you can get data from
the custom data-path attribute.
$('ul#finderCategoryFiles').sortable({
connectWith : 'ul#finderOtherCategoryFiles',
placeholder : 'finderCategoryFilePlaceholder',
opacity : 0.8,
cursor : 'move',
update : function(event, ui)
{
var data = $(this).sortable(
'serialize', {
attribute : 'data-path',
expression : /^(.*)$/,
key : 'categoryFiles[]'
}
);
data += '&categoryId=1';
alert(data);
// Here you could go on to make an AJAX request
// to save the sorted data on the server, which
// might look like this:
//
// $.get('/path/to/server/file.php', data);
}
});
You start this project by defi ning a new anonymous function that is assigned to the custom update
event of the sortable plugin. The custom sortable update event fi res every time you complete a sort,
and it is therefore the most useful method to save the state of sorting as sorting occurs. Within the
anonymous function, you retrieve data from each
again but this time with the serialize option specifi ed in the fi rst argument. Then, in the options
you pass in the second argument to the sortable() method, you change the attribute that jQuery
UI serializes data from by using the attribute option and setting the value of that option to data-
path. The rest is the same: You use the expression option to retrieve the data-path attribute’s entire
value from beginning to end, rather than just a substring within that value. (You can use any regular
expression here.) And the key option is set to categoryFiles[], which is used to name the data in the
serialized string. This results in sending something like the following query string to the server side:
categoryFiles[]=/Blog/apple/CoreImage.html
&categoryFiles[]=/Blog/php/Polymorphism.html
&categoryFiles[]=/Blog/web/ie8_beta2.html
&category=1
On the server side, you have two GET arguments. The fi rst is an array called categoryFiles; the
second is an integer named category. The syntax for creating an array is that used for PHP, and, of
course, you want to adjust this syntax depending on the server-side language you’re actually using.
http://www.it-ebooks.info