How to post and update jQuery Serialize using AJAX

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.

Firstly wrap your code in try and catch that way it will show the error also add error function to ajax this will catch error in ajax. Secondly having ajax call on sorting stop function is a bad idea — Faizan Fayaz, May 27 '21 at 06:41
**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, May 27 '21 at 10:06

score 0 · Answer 1 · answered May 27 '21 at 08:01

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.

How to post and update jQuery Serialize using AJAX

1 Answers1