jQuery load()

jQuery .load() requests HTML from a URL and places the returned markup inside the matched element. It is convenient for partial-page updates when the backend returns HTML rather than JSON.

Basic load() Top ↑

$( "#result" ).load(
    "content.php"
);

Load after a Button Click Top ↑

$( "#b1" ).on( "click", function () {
    $( "#result" ).load(
        "content.php"
    );
});

See click events.

Pass Variables with GET Top ↑

const id =
    $( "#record_id" ).val();

$( "#result" ).load(
    "record.php?id=" +
    encodeURIComponent( id )
);

Prefer a data object when practical:

$( "#result" ).load(
    "record.php",
    {
        id: $( "#record_id" ).val()
    }
);

When a data object is supplied, jQuery .load() uses POST.

Callback Function Top ↑

$( "#result" ).load(
    "content.php",
    function (
        responseText,
        textStatus,
        jqXHR
    ) {
        if ( textStatus === "error" ) {
            $( this ).text(
                "Unable to load content."
            );
        }
    }
);

Events inside Loaded Content Top ↑

If loaded content contains new buttons or links, bind delegated events to a stable ancestor instead of expecting a handler attached before loading to find future elements.

$( "#result" ).on(
    "click",
    ".edit-button",
    function () {
        console.log(
            "Clicked record:",
            $( this ).data( "id" )
        );
    }
);

Demo: delayed message loaded into a page →

Applications using load() Top ↑

• Load content automatically when the page opens
• Filter student records by class
• Load one record by button/ID
• Inline edit/update workflow

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<button type="button" class="btn btn-info" 
  onclick=$("#d").load("load-text.php");>Load Page</button>
<div id='d'></div>

Original example 2

<i>This message is from load-text.php file</i>

Original example 3

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

Original example 4

<script>
$(document).ready(function() {
$("#b1").click(function(){
$("#d1").load("load-text1.php?msg=Hello_world");
})
})
</script>

Original example 5

var msg=encodeURIComponent("Hello World");
$("#d1").load("load-text1.php?msg="+ msg);

Original example 6

<?Php
$msg=$_GET['msg'];
echo "This is from load-text1.php file with Message : $msg ";
?>

Original example 7

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>

Original example 8

<script>
$(document).ready(function() {
$("#b2").click(function(){
str1=$('#t1').val();
str2=$('#t2').val();
$("#d2").load("load-text2.php", {'t1':str1,'t2':str2});
})
})
</script>

Original example 9

<?Php
$t1=$_POST['t1'];
$t2=$_POST['t2'];
echo "Welcome $t1 $t2";
?>

Original example 10

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

Original example 11

<script>
$(document).ready(function() {
$("#b3").click(function(){
$("#d3").load("load-text.php",function(){
alert ( ' Content of load-text.php is loaded');
})
})
})
</script>

Original example 12

<script>
$(document).ready(function() {
/////
$("#b1").click(function(){
$('#msg').html('Wait .. ');
$('#msg').show();
$("#d1").load("load-delay-msgck.php", function() {
$('#msg').html('Done .. ');
setTimeout(function() { $("#msg").fadeOut('slow'); }, 4000);
});
})
////////////////
})
</script>

Original example 13

my_load_function=function my_function(){
$('#display_body').load("category-display.php");;
}

///calling the function ///
my_load_function();

Original example 14

$('#display_body').on('click', ".edit_class", function () {
// Your code here 
})

Additional Original Learning Routes Top ↑

• function.php
• http-get.php
• http-post.php
• textbox.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: