JQuery load record data from MySQL table or Array on click of button & by passing parameter DEMO

We will display name of students and ID by taking data from MySQL table name student. User will click the button to check the other details like mark , class of the student.
DEMO of displaying selected records by using load()
You can download the ZIP file with script at end of this page, here are details of the file used in this demo script.
Video Tutorial on LOAD function

Video Tutorial on displaying record using load()

Pages in the script

config.php :

MySQL database connection details using PDO are kept here, read more on config.php file

load-display.php :

this is the main file which display the records from table. This page has the JQuery script to load the data from backend pages.

load-display-dtl.php :

The backend script with multidimensional array. This script received student id and returns the matching record details ( from the array ) to main script load-display.php

load-display-dtl-db.php :

This page does the same process as load-display-dtl.php but collects the data from MySQL student table

In our main script load-display.php , inside JQuery script we have commented one line and used the other line. By changing this you can decide whether to load the data from load-display-dtl.php or from load-display-dtl-db.php ( From Array or from Database table )

Displaying the list of students with name and id load-display.php

Like any other simple display we can list out the records by using PDO. While displaying we will format the records to trigger our JQuery script and display the return details from our backend script.

<?Php
require "config.php";  // Database connection string

$sql="select id,name from student limit 0,10"; // Query to get records from student table 

echo "<table>";

foreach ($dbo->query($sql) as $row) {
echo "<tr><td>$row[id] </td><td> $row[name]</td><td><a value=$row[id] class='b_dtl'><img src=pt.gif></a></td><td><div id='$row[id]' class='my_dtl'> </div> </td> </tr>";
}

echo "</table>";
?>

You can see in the above code we have displayed one image as hyper link ( pt.gif) and same hyper link have value attribute with student id, so each record have one unique value associated which is passed to JQuery script once user clicks the button.

We receive this value inside our JQuery script like this .

var str=$(this).attr("value"); // Find out which button is clicked, its value

You can read more on how to get the value of button clicked from a group of buttons here.
If the user clicks the 7th record then variable str will store 7 .

We kept one div tag with id equal to student id to display the details of the records. To this div tag we will load the return details.

<div id='$row[id]' class='my_dtl'></div>

Here each row will have its own tag with id equal to student id

To access this id from our JQuery script we will use like this

$("#"+str)

After replacing the variable str value we will get this line to load data.

$("#"+str).load('load-display-dtl.php?str='+str);

For 7th record this will be equal to ( user has clicked 7th record )

$("#7").load('load-display-dtl.php?str=7');

Backend script returning the student details (load-display-dtl.php )

In the above query we have passed the student id to our backend script load-display-dtl.php file, here we have PHP multidimensional array with all student details. We will collect the student like this .

$str=$_GET['str'];

From the array we will get details of this student id like this.

echo "id: ".$my_array[$str]['id'].", Name: ".$my_array[$str]['name']." , Mark : ",$my_array[$str]['mark'];

You can read more on multidimensional array in PHP here

If you are using load-display-dtl-db.php file to get record details then you are using MySQL database with PDO connection, you can read more on how to get records from table here.

Here is the code to get record details from table,

<?Php
require "config.php"; // database connection details 
$str=$_GET['str']; // collect the student id

$count=$dbo->prepare("select * from student where id=:id");
$count->bindParam(":id",$str,PDO::PARAM_INT,3);

if($count->execute()){
$row = $count->fetch(PDO::FETCH_OBJ);
echo "id: ".$row->id.", Name: ".$row->name." , Mark : ",$row->mark;
}else{
echo "Database Problem ";
}

?>

This is one example how to use load function to get data from MySQL database table or from any other sources.

How to Install and test

Download the zip file at the end of this page.
Inside you will find sql_dump.text file to create tables in the database.
Open config.php and enter your MySQL database login details.
Go to load-display.php page and check records

load() DEMO of filtering records by radio button
HTTP GET Method HTTP POST method

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

JQuery load() database record on user click DEMO

Video Tutorial on displaying record using load()

Pages in the script

Displaying the list of students with name and id load-display.php

Backend script returning the student details (load-display-dtl.php )

Subscribe

1

2

3

4