jQuery Sortable with Ajax and mySQL - php

Question

Hey I've created a sortable list for the backend of my site to organize my categories and I have it all working so it runs an update SQL statement with Ajax and it saves my data without a reload, but the order number that I'm displaying in my backend from the database doesn't change until I reload, any help would be great, thanks in advance!
PHP
<?php
$sql = "SELECT cat_id, cat_name, cat_slug, cat_status, cat_order, sta_id, sta_name
FROM app_categories LEFT JOIN app_status
ON app_categories.cat_status = app_status.sta_id
ORDER BY cat_order ASC";
if($result = query($sql)){
$list = array();
while($data = mysqli_fetch_assoc($result)){
array_push($list, $data);
}
foreach($list as $i => $row){
?>
<div class="row" id="page_<?php echo $row['cat_id']; ?>">
<div class="column two"><?php echo $row['cat_name']; ?></div>
<div class="column two"><?php echo $row['cat_slug']; ?></div>
<div class="column two"><?php echo $row['cat_status']; ?></div>
<div class="column two"><?php echo $row['cat_order']; ?></div>
</div>
<?php
}
}
else {
echo "FAIL";
}
?>
jQuery with Ajax call
$(document).ready(function(){
$("#menu-pages").sortable({
update: function(event, ui) {
$.post("ajax.php", { type: "orderPages", pages: $('#menu-pages').sortable('serialize') } );
}
});
});
And my ajax.php which does my update
<?php
parse_str($_POST['pages'], $pageOrder);
foreach ($pageOrder['page'] as $key => $value) {
$sql = "UPDATE app_categories SET `cat_order` = '$key' WHERE `cat_id` = '$value'";
if(query($sql)) {
echo "YES";
}
else {
echo "NO";
}
}
?>

Answer 1

You don't appear to have any kind of code for handling the front-end update. The easiest thing to do would be to add a callback in your ajax post and have the server send back the update information as json data.
So ajax.php would look more like
<?php
parse_str($_POST['pages'], $pageOrder);
foreach ($pageOrder['page'] as $key => $value) {
$sql = "UPDATE app_categories SET `cat_order` = '$key' WHERE `cat_id` = '$value'";
if(query($sql)) {
$orderSql = "SELECT cat_id, cat_name, cat_slug, cat_status, cat_order, sta_id, sta_name
FROM app_categories LEFT JOIN app_status
ON app_categories.cat_status = app_status.sta_id
ORDER BY cat_order ASC";
if($result = query($sql)){
echo json_encode(mysqli_fetch_assoc($result));
return;
}
} else {
echo json_encode( array('result' => 'failure'));
}
}
(Yeah, it's ugly and untested but you get the idea.)
Your javascript would then look something like
$.post("ajax.php", { type: "orderPages", pages: $('#menu-pages').sortable('serialize') }, function(res){
if (typeof res.result !== undefined && res.result === 'failure'){
alert('failed!');
return;
} else {
$.each(res, function(i, item){
$("#page_" + item.cat_id).find('div:eq(3)').html(item.cat_order);
});
}, 'json' );
Which again is terrible, but hopefully conveys the point.
Alternatively you could simply update the number in the sort div whenever it is moved. That would look like:
$("#menu-pages").sortable({
update: function(event, ui) {
$.post("ajax.php", { type: "orderPages", pages: $('#menu-pages').sortable('serialize') } );
$('.row').each(function(i){
$(this).find('div:eq(3)').html(parseInt(i) + 1);
});
}
});
Also not test, and that's assuming cat_sort is 1-indexed and not missing any values etc etc.