I have a jQuery sortable list. Ultimately what I want is a simple php array of list id's. I'm trying to take the id and position in the array and add it to a database. I would like a user to be able to change the order of the list as long as they want, and when they are satisfied with the order, click a button to submit.
I have seen many examples of sortable lists that update every time an item position is switched, but that is not what I want.
This is simplified. The id's will be dynamically generated with php.
<body>
<form>
<ul id="sortable-1">
<li id="order1">Item 1</li>
<li id="order2">Item 2</li>
<li id="order3">Item 3</li>
<li id="order4">Item 4</li>
<li id="order5">Item 5</li>
</ul>
<input type="button" value="Submit" onclick="go">
</form>
</body>
jQuery that will make the list sortable and also post every time the order is changed, not what I want. I need a separate function called go with the ajax. Also, is .sortable('toArray').toString() what I want intead of ("serialize")? It seems to make a simple array of id values.
$(function(){
$("#sortable-1").sortable({
update: function(event, ui){
var operationOrder = $(this).sortable('toArray').toString();
$ajax({
data: operationOrder,
type: 'POST',
url: 'order.php'
});
}
});
});
The php, which would hold an array of id values:
$order = array();
$string = $_POST['data'];
$order = explode(",", $string);
Thanks for any help. It may be simplistic for experienced programmers but I've been working on it for days...
In order to receive data array with $_POST['data'] you need to send array as value for key data. Also note you shouldn't have to stringify the array. jQuery will properly form encode it for you.
$ajax({
data:{data: operationOrder},// don't need to stringify this array
type: 'POST',
url: 'order.php'
});
Now to verify, learn how to inspect ajax requests in browser console network tab and you will see exactly what is sent. Browser console (F12) is always where you start when debugging ajax