JQuery load() database record on user click 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. You can download the ZIP file with script at end of this page, here are details of the file used in this demo script.
Pages in the script
MySQL database connection details using PDO are kept here, read more on config.php file
this is the main file which display the records from table. This page has the JQuery script to load the data from backend pages.
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
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.phpLike 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.
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 .
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.
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
After replacing the variable str value we will get this line to load data.
For 7th record this will be equal to ( user has clicked 7th record )
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 .
From the array we will get details of this student id like this.
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,
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