Revision: 4431
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at December 10, 2007 11:36 by jpdamen
Initial Code
HTML:
--------
<ul id="sortme">
<li id="27" class="sortitem">Lorem</li>
<li id="44" class="sortitem">Foo</li>
<li id="136" class="sortitem">Bar</li>
<li id="19" class="sortitem">Ipsum</li>
</ul>
<div id="data" style="background-color: #CCCCCC; padding: 15px; border:
solid 1px #999;">
</div>
JQUERY:
-----------
$(document).ready(
function()
{
$("#sortme").Sortable({
accept : 'sortitem',
onchange : function (sorted) {
serial = $.SortSerialize('sortme');
/*
Instead of the $.ajax-call below, you could use these shorter funcs. In
addition to the hash used by $.ajax, the SortSerialize method above also
returns an object that can directly be used in the $().load and $.post/get
functions:
// $('#data').load("sortdata.php",serial.o.sortme);
or
// $.post("sortdata.php",serial.o.sortme, function(feedback){
$('#data').html(feedback); });
*/
$.ajax({
url: "sortdata.php",
type: "POST",
data: serial.hash,
// complete: function(){},
success: function(feedback){ $('#data').html(feedback); }
// error: function(){}
});
}
});
}
);
SORTDATA.PHP
-------------------
<?php
// This can do anything it wants with the posted data which comes as an
array. Here we just output it with print_r:
echo "DATA RECEIVED: <br>";
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
Initial URL
Initial Description
Initial Title
jquery sortable ajax php integration
Initial Tags
php, jquery
Initial Language
JavaScript