How to post and update jQuery Serialize using AJAX - php

Question

Please note, I have gone through the below StackOverflow question which is exactly what i need but unfortunately, it isn't posting
Question similar to
My Code -
Test.php
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
<ul id="sortable">
<li id="item-1">Item 1</li>
<li id="item-2">Item 2</li>
</ul>
Span 1: <span id="span"></span>
Span2: <span id="span2"></span>
<script>
$(document).ready(function () {
$('ul').sortable({
axis: 'y',
stop: function (event, ui) {
var data = $(this).sortable('serialize');
$('#span2').text(data);
$.ajax({
data: data,
type: 'POST',
url: 'test2.php',
success: function(data){
$("#span").text(data);
}
});
}
});
});
</script>
Test2.php
<?php
include('../db.php');
$date = $_POST["data"];
$conn = new mysqli ($servername, $dbusername, $dbpassword, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "UPDATE table SET something = '$something'
WHERE id = '$id'";
if(mysqli_query($conn, $sql)){
echo $date;
}
$conn->close();
?>
Can anyone help me out why the data is not posting to test2.php page
and
how can i sort the table using the data posted to test2.php
Thanks in advance.

Answer 1

For those who came across the same problem here's the solution :
Test.php
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
<ul id="sortable">
<?php
$q = ' SELECT * FROM temp';
$result = mysqli_query($conn, $q);
if ($result->num_rows > 0) {
while( $items = $result->fetch_assoc() ){
?>
<li id='sort_<?php echo $items['id'] ?>'>
<ul style="display:inline-block;"><?php echo $items['name'] ?></ul>
<ul style="display:inline-block;"><?php echo $items['name'] ?></ul>
</li>
<?php
}
}
?>
</ul>
<script>
$(document).ready(function () {
$('#sortable').sortable({
opacity: 0.325,
tolerance: 'pointer',
cursor: 'move',
update: function(event, ui) {
var post = $(this).sortable('serialize');
$.ajax({
type: 'POST',
url: 'test2.php',
data: post,
dataType: 'json',
cache: false,
success: function(output) {
console.log('success -> ' + output);
},
error: function(output) {
console.log('fail -> ' + output);
}
});
}
});
});
$('#sortable').disableSelection();
</script>
Test2.php
<?php
$isNum = false;
foreach( $_POST['sort'] as $key => $value ) {
if ( ctype_digit($value) ) {
$isNum = true;
} else {
$isNum = false;
}
}
if( isset($_POST) && $isNum == true ){
$orderArr = $_POST['sort'];
$order = 0;
if ($stmt = $conn->prepare(" UPDATE temp SET o_id = ? WHERE id=? ")) {
foreach ( $orderArr as $item) {
$stmt->bind_param("ii", $order, $item);
$stmt->execute();
$order++;
}
$stmt->close();
}
echo json_encode( $orderArr );
$conn->close();
}
?>
Hope it helps the one in need.