AJAX Update DataTable after On Success

Question

I have a datatable on userX.php. which has three tabs and each tab contains a table. (table1 table2 and 3) Scenario is there is an action button on each rows in tab 1 and 2, when it is clicked it will move the particular row to the next table / tab using AJAX for preventing page load. below image is the table

TABLE

using AJAX I would be changing the status column in the table in order to push into the next tab. below is the jquery ajax part

        $(".changeStatus").click(function(event){
          event.preventDefault();
          var status =  "SECOND STATUS";
          var id = $(this).attr('data-id');
          $.ajax({
            url     : 'dbo.php',
            method  : 'POST',
            data    : {status : status , id : id},
            success : function(response){
              //Where I tried to reload the DIV Body on Success, but it not loading at all
              $("#loadContent").load("userX.php", response);
            }
          });
        });

and my dbo.php is // IGNORE SQL INJECTION

$host = "localhost";
$username = "root";
$password = "";
$dbname = "database";


$conn = mysqli_connect($host, $username, $password, $dbname);
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

if(isset($_POST['status'])){
    $status = $_POST['status'];
    $id = $_POST['id'];
    $sqlstatus= "update order set status = '$status' where id=".$id;
    $result = mysqli_query($conn, $sqlstatus);
    if($result){
        echo('record status is changed');
    }
}

the loadContent element is caught from the userX.php's body id as below to update per every clicks.

<body id="loadcontent">
      <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
        <div class="container">
          <img class="navbar-brand" href="userX.php" src="logo.png">

//The three tables and tabs would be followed
</body>

Once the status is changed here, the content is refreshed but without the tabs. as in if I change the status of tab 2 to tab 3, the active tab jumps back to tab one but with tab 3 updated contents. meaning the status is changed, and real time updated. The error is in the navigation pills.

I do not want to load my table body from another class due to project compatibility. But open for suggestions. is there any other way to implement this to keep the table refreshed right after the action without loading?

Answer 1

I tried reinitializing the datatable once the function is processed without any interruptions. It worked like charm.

     $(document).on('click','#ChangeNext',function(event){
        if(confirm("Are you sure changing status?")){
            event.preventDefault();
            var statusid = $(this).attr('data-id');
            $.ajax({
                url     : 'dbo.php',
                method  : 'POST',
                data    : {statusid : statusid},
                success : function(data)
                {
                    //WHERE IT WORKED
                    $('#exampleone').DataTable().ajax.reload();
                }
            });
        }
        else{
            return false;
        }
    });

AJAX Update DataTable after On Success

Question

1 answers

solution1
1 ACCPTED 2020-11-22 09:10:30

AJAX Update DataTable after On Success

Question

1 answers

solution1 1 ACCPTED 2020-11-22 09:10:30

solution1
1 ACCPTED 2020-11-22 09:10:30