How to connect Jquery draggable UI with mysql via AJAX - php

Question

I would like to drag elements in my horizontal list and than save the position in mysql.
The text sort=1&sort=2.... ist just for testing purpose.
this is my code in jquery
$("#sortable").sortable({
stop: function(event, ui) {
var data = $(this).sortable('serialize', {key:"sort"});
$('#tags').text(data);
$.ajax({
data: data,
type: 'POST',
url: 'listpriority.php'
});
}
});
The sortable function is working. It serializes me the list.
Now on the server side i would like to recive the serialized data.
my php code:
<?php
print_r($_POST['sort']);
?>
But the print_r function show me only the length of the list.
the full php code should be:
<?php
include = ""; // the connection to sql
if(isset($_POST['sort'])) {
$sort = $_POST['sort'];
$sql = "UPDATE tags SET position='".$sort."'";
$result = mysqli_query($conn, $sql);
}
?>

Answer 1

My solution for the problem:
$( "#sortable" ).sortable({
update: function(event, ui) {
var data = $(this).sortable('serialize', { key: "sort" });
$('#tags').text(data);
$.post("listpriority.php", {data});
}
});
i changed the $.ajax to $.post and than i echo out the data in php echo($_POST['data']);

Answer 2

Try to get and set data from hidden field
<div class="main_div">
<div class="inner">
<span>1</span>
<input type="hidden" name="original[]" value="1">
<input type="hidden" name="new[]" class="new_ord" value="1">
</div>
<div class="inner">
<span>2</span>
<input type="hidden" name="original[]" value="2">
<input type="hidden" name="new[]" class="new_ord" value="2">
</div>
<div class="inner">
<span>3</span>
<input type="hidden" name="original[]" value="3">
<input type="hidden" name="new[]" class="new_ord" value="3">
</div>
<div class="inner">
<span>4</span>
<input type="hidden" name="original[]" value="4">
<input type="hidden" name="new[]" class="new_ord" value="4">
</div>
<div class="inner">
<span>5</span>
<input type="hidden" name="original[]" value="5">
<input type="hidden" name="new[]" class="new_ord" value="5">
</div>
</div>
And php script is
if(isset($_POST['post']) == 1) {
$original = $_POST['original'];
$new_val = $_POST['new_val'];
for ($i=0; $i < count($original); $i++) {
$sql = 'UPDATE TABLE Table_name SET order="'.$new_val[$i].'" WHERE id="'.$original[$i].'"';
echo $sql."\n\r";
}
}
See jquery code here and uncomment ajax call portion
Maybe it helps you