AJAX does not request to url page to get success response

November 6, 2023

I have a problem where the AJAX does not request to delete_data.php to get success response. Why is this occur? AJAX does not even go to delete_data.php to execute the code. When I click the Delete Data button, it will pop up confirmation to delete, but when I click Confirm Delete button but nothing happened. I figure that it did not execute code from delete-data.php. Can anyone check problem on my AJAX.

index.php

<!DOCTYPE html>
<html>
<head>
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

</head>
<body>
    <div class="container">
        <!-- Button to trigger the deletion and show the modal -->
        <button class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">Delete Data</button>
    </div>

    <!-- Bootstrap Modal for the alert -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Delete Confirmation</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete the data?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">Delete</button>
                </div>
            </div>
        </div>
    </div>

<!-- Bootstrap Success Modal -->
<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="successModalLabel">Success</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Data has been successfully deleted.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap Error Modal -->
<div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="errorModalLabel">Error</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                An error occurred while deleting the data.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

    <!-- Add Bootstrap JS and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Your JavaScript code -->
    <script>
        $(document).ready(function() {
            $("#confirmDelete").click(function() {
                // Make an AJAX request to your server to delete data from the database
                // Upon successful deletion, show a success modal
                // Otherwise, show an error modal
                $.ajax({
                    type: "POST",
                    url: "delete_data.php", // Replace with your server-side script URL
                    success: function(response) {
                        if (response === "success") {
                            $('#deleteModal').modal('hide'); // Close the confirmation modal
                            $('#successModal').modal('show'); // Show a success modal
                        } else {
                            $('#deleteModal').modal('hide'); // Close the confirmation modal
                            $('#errorModal').modal('show'); // Show an error modal
                        }
                    }
                });
            });
        });
    </script>



</body>
</html>

delete_data.php

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.
Visit Medevel

<?php
// Your database connection code here
//header('Content-Type: application/json');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Perform the data deletion operation in your database
    // Replace this with your actual deletion code

    // Example deletion code
    $deleted = true; // Assume the data was successfully deleted

    if ($deleted) {
        echo "success";
    } else {
        echo "error";
    }
    
    /*if ($deleted) {
        echo json_encode(array("status" => "success"));
    } else {
        echo json_encode(array("status" => "error"));
    }*/

}
?>