JQuery load()

We can fetch the content returned by any URL or page by using load(). Here we have one display layer with id =d1, to the same layer we will load with a file loat-text.php.
Here is the inline code with the button to load external file load-text.php.
<button type="button" class="btn btn-info" onclick=$("#d").load("load-text.php");>Load Page</button>
<div id='d'></div> 
Inside load-text.php file we have only one line of text
<i>This message is from load-text.php file</i> 

Passing variable while loading the file using GET method

load function with data from backend script
We can pass variable to our file and then read them back. Here we have used in PHP file load-text1.php file to collect the parameter and return the same. Now we will use JQuery code to load the url with parameter on Button Click.


<button type="button" class="btn btn-info" id=b1>Load Page</button> 
 <div id='d1' ></div>


$(document).ready(function() {


When we have blank space , / ? : @ & = + $ # as part of the string then we can use encodeURIComponent() to encode the data before sending in query string.
var msg=encodeURIComponent("Hello World");
$("#d1").load("load-text1.php?msg="+ msg);
Our backend file load-text1.php code is here
echo "This is from load-text1.php file with Message : $msg ";

POST method

In the above code it has used GET method to post data to backend script, to use POST method we have to use object to post data. We will create object by reading two text boxes as first name and last name. We will use them to post data to backend , you can read more on how to read data entered in a text box.

We have used load-text2.php file to receive data from POST method. Then same data is retuned with a welcome message.
First Name
Last Name


First Name<br><input type=text name=t1 id=t1>  Last Name<br><input type=text name=t2 id=t2>  <br><button type="button" class="btn btn-info" id=b2>Load Page</button> 
 <div id='d2' ></div>


$(document).ready(function() {
$("#d2").load("load-text2.php", {'t1':str1,'t2':str2});
Our Backend script load-text2.php file code is here
echo "Welcome $t1 $t2";

Using Callback function

While loading the page we can use callback function to check status of the script. Here


<button type="button" class="btn btn-info" id=b3>Load Page</button> 
 <div id='d3' ></div>


$(document).ready(function() {
alert ( ' Content of load-text.php is loaded');
Using callback function we can display messages to the user about the backend process. Once the user click a button the process starts, then we will show a message telling user to wait. At the backed script we will create a delay of 5 seconds. After the delay period we will show process complete message to user by using the callback function. Here is the JQuery Script.
$(document).ready(function() {
$('#msg').html('Wait .. ');
$("#d1").load("load-delay-msgck.php", function() {
$('#msg').html('Done .. ');
setTimeout(function() { $("#msg").fadeOut('slow'); }, 4000);

Class not recognized for handling events in main page

If any class is used in loaded page, then to apply any event to this class we have to use like this.
$('#d2').on('click', ".my_class", function () {
// your script here 
//var b_card_id=this.id; // read the id of clicked class
Here my_class is class used in loaded page which gets loaded after an event. #d2 is the id of the Div to display content which is loaded.

Application using load

We will develop one PHP script where we will display name of the students from a MySQL table ( or array ). On click of the name of the student we can collect other details like Class, Mark from the table.
my_load_function=function my_function(){

///calling the function ///
You can read more on how to use an user defined function here.
category-display.php will have our back end code to handle data from server.

Associated events of loaded elements

If the loaded elements are added after creation of DOM , then we have to use this code to capture the click events. Read more on click event.
$('#display_body').on('click', ".edit_class", function () {
// Your code here 
#display_body is the element to where part of the page is loaded after DOM is created.
.edit_class is the class associated with the element for which events are monitored.



Thank you so much. This solution really worked for me , i have been struggling to to post table row id to external php page by row click in jquery

Post your comments , suggestion , error , requirements etc here .

Most Popular JQuery Scripts


Two dependant list boxes


Calendar with Date Selection


Data change by Slider


Show & Hide element
We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer