You’ve got to put the AJAX routine inside the button’s click handler
This should get you started:
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Sortable list</title>
<style>
#results { margin: 5px; padding: 5px; }
ul > li { cursor: pointer }
</style>
</head>
<body>
<ul id="list_1" class="sortable connected">
<li data-item="1">Image 1</li>
<li data-item="2">Image 2</li>
<li data-item="3">Image 3</li>
<li data-item="4">Image 4</li>
<li data-item="5">Image 5</li>
<li data-item="6">Image 6</li>
</ul>
<ul id="list_2" class="sortable connected">
<li data-item="1">Image 1</li>
<li data-item="2">Image 2</li>
<li data-item="3">Image 3</li>
<li data-item="4">Image 4</li>
<li data-item="5">Image 5</li>
<li data-item="6">Image 6</li>
</ul>
<ul id="list_3" class="sortable connected">
<li data-item="1">Image 1</li>
<li data-item="2">Image 2</li>
<li data-item="3">Image 3</li>
<li data-item="4">Image 4</li>
<li data-item="5">Image 5</li>
<li data-item="6">Image 6</li>
</ul>
<button>Submit</button>
<div id="results"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$('.sortable').sortable();
$('.connected').sortable({
connectWith: '.connected'
});
function getListOrder(){
var params = [];
$(".connected").each(function(){
var items = [];
$(this).children().each(function(){
items.push("Item " + $(this).data("item"));
})
params.push(items);
})
return params;
}
function makeAjaxRequest(params){
$.ajax({
type: "POST",
data: { lists: params },
url: "process_ajax.php",
success: function(res) {
$("#results").html("<p>$_POST contained: " + res + "</p>");
}
});
}
$("button").on("click", function(){
var params = getListOrder();
makeAjaxRequest(params);
})
</script>
</body>
</html>
process_ajax.php
<?php
// Database logic here
echo '<pre>';
print_r($_POST);
echo '</pre>';
?>
Let me know how you get on