PHP AJAX CRUD - 3 | How to fetch single data in pop up modal without page reload using jQuery Ajax

How to fetch single data in pop up modal without page reload using jQuery Ajax in PHP.

Hello Guys., so in this above video, we are learning about How to fetch single data in pop up modal without page reload using jQuery Ajax in PHP.

So.. As we are continuing from Video template where we are using Bootstrap for designing the view. To create new design as per your requirement go to getbootstrap.com

Step 1: Create a table named students below code:

Create a table as per below code in your database:


CREATE TABLE students (
    id int,
    fname varchar(100),
    lname varchar(100),
    class varchar(100),
    section varchar(100)
);


Step 2: Create a file named index.php and paste the below code:

<!doctype html>
<html lang="en">
<head>
    <!-- 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.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>PHP - AJAX - CRUD</title>
</head>
<body>


    <!-- View Modal -->
    <div class="modal fade" id="StudentViewModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Student Detail View</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                    <h4 class="id_view"></h4>
                    <h4 class="fname_view"></h4>
                    <h4 class="lname_view"></h4>
                    <h4 class="class_view"></h4>
                    <h4 class="section_view"></h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
            </div>
        </div>
    </div>


    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4>
                            PHP - AJAX - CRUD | Data without page reload using jquery ajax in php.
                            <button type="button" class="btn btn-primary float-right" data-toggle="modal" data-target="#Student_AddModal">
                                Add
                            </button>
                        </h4>
                    </div>
                    <div class="card-body">
                        <div class="message-show">

                        </div>
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Class</th>
                                    <th>Section</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody class="studentdata">
                                
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <script>
        $(document).ready(function () {
            getdata();

            $(document).on("click"".viewbtn"function () {

                var stud_id = $(this).closest('tr').find('.stud_id').text();
                // alert(stud_id);

                $.ajax({
                    type: "POST",
                    url: "ajax-crud/code.php",
                    data: {
                        'checking_view': true,
                        'stud_id': stud_id,
                    },
                    success: function (response) {
                        // console.log(response);
                        $.each(responsefunction (keystudview) { 
                            // console.log(studview['fname']);
                            $('.id_view').text(studview['id']);
                            $('.fname_view').text(studview['fname']);
                            $('.lname_view').text(studview['lname']);
                            $('.class_view').text(studview['class']);
                            $('.section_view').text(studview['section']);
                        });
                        $('#StudentViewModal').modal('show');
                    }
                });

            });            
        });
    </script>

  </body>
</html>


Step 3: Create a file named code.php inside ajax-crud and paste the below code:

First Create a folder name ajax-crud and create a file named code.php and paste the below code:

<?php 

$conn = mysqli_connect("localhost","root","","phpcrud");

if(isset($_POST['checking_view']))
{
    $stud_id = $_POST['stud_id'];
    $result_array = [];

    $query = "SELECT * FROM students WHERE id='$stud_id";
    $query_run = mysqli_query($conn$query);

    if(mysqli_num_rows($query_run) > 0)
    {
        foreach($query_run as $row)
        {
            array_push($result_array$row);
        }
        header('Content-type: application/json');
        echo json_encode($result_array);
    }
    else
    {
        echo $return = "No Record Found.!";
    }
}

?>



© Copyright - 2018 - 2021 | All rights reserved at Funda of Web IT