Thiết kế website giá rẻ

Question

I just want to delete data instantly without refresh from the database. i have written the code for inserting the data to database via ajax and php and same pushed data i am calling or printing instantly in a table without refresh on same form page which i used to submit the data and it works fine but if i want to delete the data without refresh, its not working, it shows “data deleted successfully” but after then not fetching the fresh data from database.

i have used setTimeout javascript function in order to delay the incoming fresh data(after delete) so that echoing success delete message and fetching fresh data does not happen all together but still it is not fetching data after echoing “data deleted successfully”. As well as i used complete parameter of $.ajax() so that after completion of ajax request complete param will run the fresh fetchDataFromDatabase() but still its not working.

Console is giving error which is mentioned below

Uncaught ReferenceError: fetchDataFromDatabase is not defined success http://localhost/ajaxx/aryanformsubmit/ajaxcode.js:64 jQuery 6 deletetask http://localhost/ajaxx/aryanformsubmit/ajaxcode.js:55 onclick http://localhost/ajaxx/aryanformsubmit/form.php#:1

form.php

<!-- <!doctype html> -->
<html>
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

    <!-- code for submitting below form via ajax -->
    <script src="ajaxcode.js"></script>

  </head>
  <body>
      

  <form>
<div class="form-group">
  <label for="name">Name</label>
  <input type="text" autocomplete="off" class="form-control" name="name" id="name" aria-describedby="helpId" placeholder="">


<br><br>

  <label for="email">Email</label>
  <input type="email" autocomplete="off" class="form-control" name="email" id="email" aria-describedby="helpId" placeholder="">

  <input type="text" value="pending" hidden class="form-control" name="status" id="status" aria-describedby="helpId" placeholder="">

  <br><br>

  <button type="submit" id="submit" class="btn btn-primary">Submit</button>


</div>
</form>

<div id="feedback"></div>


<table class="table">
  <thead>
    <tr>
    <th>S.NO</th>
      <th>Name</th>
      <th>Email</th>
      <th>Status</th>
      <th>Action</th>
      
    </tr>
  </thead>
  <tbody id="tasklist">


  </tbody>


</table>


  <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

ajaxcode.js

$(document).ready(function () {
    // Code for submitting form via AJAX
    $("#submit").click(function (e) { 
        e.preventDefault();
        
        var name = $("#name").val();
        var email = $("#email").val();

        if (name === "" || email === "") {
            $("#feedback").fadeIn().removeClass("alert alert-success").addClass("alert alert-danger").html("All fields are required");
        } else {
            $.ajax({
                type: "post",
                url: "insertquery.php",
                data: $("form").serialize(),                  
                success: function (response) {
                    $("#feedback").fadeIn().removeClass('alert alert-danger').addClass('alert alert-success').html(response).fadeOut(6000);
                    // After successful insertion, fetch data from the database
                    fetchDataFromDatabase();
                },
                error: function(xhr, status, error) {
                    $("#feedback").fadeIn().removeClass('alert alert-success').addClass('alert alert-danger').html("Error: " + xhr.responseText);
                }
            });
        }
    });

    // Function to fetch data from the database
   // Function to fetch data from the database
function fetchDataFromDatabase() {
    $.ajax({
        url: 'getalldata.php', // Replace with your server-side script URL
        type: 'GET',
        success: function(data) {
            // Update the #tasklist element with the HTML response
            $('#tasklist').html(data);
        },
        error: function(xhr, status, error) {
            // Handle errors
            console.error(xhr.responseText);
        }
    });
}


    // Initial data fetching on page load
    fetchDataFromDatabase();
});


//script to delete tasks
function deletetask(taskid){
    if(confirm("Do you really want to delte this data?")){

        $.ajax({
            type: "post",
            url: "del.php",
           // data: {id:taskid}//object method for sending data,
            data:"id=" + taskid,
            // dataType: "dataType",
            success: function (response) {
                alert(response);
                // fetchDataFromDatabase();
               //  setTimeout(fetchDataFromDatabase, 5000);
            },
            complete: function(response){
                fetchDataFromDatabase();
            }
            
            // error: function(xhr, status, error) {
            //     // Handle errors
            //     console.error(xhr.responseText);
            // }
        });
    }
}

getalldata.php

$(document).ready(function () {
    // Code for submitting form via AJAX
    $("#submit").click(function (e) { 
        e.preventDefault();
        
        var name = $("#name").val();
        var email = $("#email").val();

        if (name === "" || email === "") {
            $("#feedback").fadeIn().removeClass("alert alert-success").addClass("alert alert-danger").html("All fields are required");
        } else {
            $.ajax({
                type: "post",
                url: "insertquery.php",
                data: $("form").serialize(),                  
                success: function (response) {
                    $("#feedback").fadeIn().removeClass('alert alert-danger').addClass('alert alert-success').html(response).fadeOut(6000);
                    // After successful insertion, fetch data from the database
                    fetchDataFromDatabase();
                },
                error: function(xhr, status, error) {
                    $("#feedback").fadeIn().removeClass('alert alert-success').addClass('alert alert-danger').html("Error: " + xhr.responseText);
                }
            });
        }
    });

    // Function to fetch data from the database
   // Function to fetch data from the database
function fetchDataFromDatabase() {
    $.ajax({
        url: 'getalldata.php', // Replace with your server-side script URL
        type: 'GET',
        success: function(data) {
            // Update the #tasklist element with the HTML response
            $('#tasklist').html(data);
        },
        error: function(xhr, status, error) {
            // Handle errors
            console.error(xhr.responseText);
        }
    });
}


    // Initial data fetching on page load
    fetchDataFromDatabase();
});


//script to delete tasks
function deletetask(taskid){
    if(confirm("Do you really want to delte this data?")){

        $.ajax({
            type: "post",
            url: "del.php",
           // data: {id:taskid}//object method for sending data,
            data:"id=" + taskid,
            // dataType: "dataType",
            success: function (response) {
                alert(response);
                // fetchDataFromDatabase();
                 setTimeout(fetchDataFromDatabase, 5000);
            },
            error: function(xhr, status, error) {
                // Handle errors
                console.error(xhr.responseText);
            }
        });
    }
}

insertquery.php

<?php

include("connection.php");
?>

<!-- retrieve form data using post gloabl method -->
<?php

$name=$_POST['name'];
$email=$_POST['email'];
$status=$_POST['status'];

$insertdata = "INSERT INTO ajaxform (name, email,status) VALUES (?, ?,?)";
$stmt = mysqli_prepare($mysqli, $insertdata);

// Bind parameters and execute the statement
mysqli_stmt_bind_param($stmt, "sss", $name, $email,$status);
$success = mysqli_stmt_execute($stmt);

// Check if the query was successful
if ($success) {
    echo "Data inserted successfully.";
} else {
    // Display error message
    echo "Error: " . mysqli_error($mysqli);
}

// Close the statement and connection
mysqli_stmt_close($stmt);
mysqli_close($mysqli);
?>

del.php

<?php

include("connection.php");

?>


<?php
$id=$_POST['id'];
$delete="delete from ajaxform where id='$id'";
$run=mysqli_query($mysqli,$delete);
if($run){
    echo "Data deleted successfully!!";
}
else{
    echo "Id not found hence data not deleted";
}


?>

Thiết kế website giá rẻ

Danh mục

data is getting deleted with the help of ajax and php but why I have to refresh manually to check whether data deleted or not