Ajax Request From Table Rows To Details

This is my first time on here so I'm sorry if I'm not quite up to snuff with all of you. In the process of learning AJAX so I'm brand new, but need to get a page done for our staf

Solution 1:

Use jQuery. First you need to make a web service on your server. The web service will accept a, let's say, POST parameter which will be either patient name or the patient ID. Based on this id/name you will query your MySQL database, fetch all the details and return as json.

On the front end, you can use jQuery.post(). You will need to pass the appropriate URL and the data. In return, you will get JSON data. In the success callback method of jQuery.post/$.post you can create a div on the right and display those data.

If you are going to return the data in json format, you can also just use $.postJSON()

Please make sure to set the appropriate headers in your PHP webservice. These two are probably the most important

Content-Type: application/json // if you are gonna return the data in JSON formatAccess-Control-Allow-Origin: * // to let the browser pass the data to the DOM model. This is to allow CORS (Cross Origin Resouce Sharing)

SAMPLE:

example.php

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
if (isset($_POST['patientID'])) {

    $patientID = $_POST['patientID'];
    $data = array();

    // Enter the appropriate details below$mysqli = new mysqli("host", "username", "password", "db_name");

    /* check connection */if ($mysqli->connect_errno > 0) {
        die('Unable to connect to database [' . $mysqli->connect_error . ']');
    }

    $statement = $mysqli->prepare("SELECT * FROM `patients` WHERE `patientID` = ? LIMIT 1");
    $statement->bind_param('i', $patientID);
    $statement->execute();

    // You need to write a variable for each field that you are fetching from the select statement in the correct order// For eg., if your select statement was like this:// SELECT name, COUNT(*) as count, id, email FROM patients// Your bind_result would look like this:// $statement->bind_result($name, $count, $id, $email);// PS: The variable name doesn't have to be the same as the column name$statement->bind_result($id, $name, $email, $phone);
    while ($statement->fetch()) {
        $data["id"] = $id;
        $data["name"] = $name;
        $data["email"] = $email;
        $data["phone"] = $phone;
    }
    $statement->free_result();

    echo json_encode($data);
}

example.html

<a href=""id="123" onclick="return getPatientData(this);">Patient #123</a>

example.js

functiongetPatientData(element) {
    var patientID = $(element).attr("id");
    $.post("example.php", {"patientID": patientID}, function (data) {
        // display the data in appropriate div
    }, 'json');
    returnfalse;
}

Solution 2:

You should do an jquery ajax call on element click

        $('.patientClass').on('click', function() { 

           var patientid = $(this).attr('id');
           // attr('id') should be the patients id
           $.ajax({
                url: "getPatientDetailsURL.php",
                type: "post",
                data: {
                    id: patientid
                },
                    success: function(response) {
                      // create div with response details or append parsed json to existing div
                }
            });
        )}

And on the backend get the patiend id with (int)$_POST['id']

Also you on the backend you can set the page to respond only to ajax calls like this:

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//code here
} else {
// not ajax call
}