eoinmcg/php jquery reorder

## php jquery reorder
<?php

	// Simple proof of concept for reordering lists with jquery & ajax
	// data is received in array $_POST['item'] to be saved to db or cookie etc

	if ( count($_POST) && is_array($_POST['item']) )
	{
		echo "<p><strong>New order:</strong>";

		foreach ( $_POST['item'] as $key => $val )
		{
			echo "<br />id:$val = $key (rank)";
		}

		exit;
	}

 ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<title>Reordering with sortable</title>

	<link type="text/css" rel='stylesheet' href='/assets/css/style.css' media="screen, projection" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function () {

$('#reorder').sortable({
        opacity: '0.5',
        update: function(e, ui){
            newOrder = $(this).sortable("serialize");
            console.log(newOrder);
            $.ajax({
                    url: "<?php echo $_SERVER['PHP_SELF']; ?>",
                    type: "POST",
                    data: newOrder,
                    success: function(feedback){
                         $("#feedback").html(feedback);
                    }
                    });
                }
    });


});
</script>


<style type="text/css">

	ol { list-style: none; display: block; width: 300px; }
	ol li { display: block; padding: 5px; margin: 5px 0; border: 1px solid #eee; background: #efefef; }
	ol li:hover { cursor: move; }

</style>

</head>

<body>

	<ol id="reorder">
		<li id="item-4">Item #4</li>
		<li id="item-1">Item #1</li>
		<li id="item-2">Item #2</li>
		<li id="item-3">Item #3</li>
	</ol>

	<div id="feedback">
	</div>

</body>

</html>
	<?php

	// Simple proof of concept for reordering lists with jquery & ajax
	// data is received in array $_POST['item'] to be saved to db or cookie etc

	if ( count($_POST) && is_array($_POST['item']) )
	{
	echo "<p><strong>New order:</strong>";

	foreach ( $_POST['item'] as $key => $val )
	{
	echo "<br />id:$val = $key (rank)";
	}

	exit;
	}

	?>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<title>Reordering with sortable</title>

	<link type="text/css" rel='stylesheet' href='/assets/css/style.css' media="screen, projection" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	$(document).ready(function () {

	$('#reorder').sortable({
	opacity: '0.5',
	update: function(e, ui){
	newOrder = $(this).sortable("serialize");
	console.log(newOrder);
	$.ajax({
	url: "<?php echo $_SERVER['PHP_SELF']; ?>",
	type: "POST",
	data: newOrder,
	success: function(feedback){
	$("#feedback").html(feedback);
	}
	});
	}
	});


	});
	</script>


	<style type="text/css">

	ol { list-style: none; display: block; width: 300px; }
	ol li { display: block; padding: 5px; margin: 5px 0; border: 1px solid #eee; background: #efefef; }
	ol li:hover { cursor: move; }

	</style>

	</head>

	<body>

	<ol id="reorder">
	<li id="item-4">Item #4</li>
	<li id="item-1">Item #1</li>
	<li id="item-2">Item #2</li>
	<li id="item-3">Item #3</li>
	</ol>

	<div id="feedback">
	</div>

	</body>

	</html>