ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

jQuery Load() Method

jquery-javascript Load() Method

This tutorial will show you how to use Load() method in jQuery. The load() method  has the ability to load data from the other page and place it into the selected elements. This method is a bit the same with ajax.

 

 Basic Syntax:

$(selector).load(URL,data,callback);
  • url – specifies the file(url) you want to load.
  • data – specifies the data you want to send to the server.
  • callback – it execute a function after the load() method is completed.

 

Basic Example:

<h3>Click Me</h3>
 <div id="content"></div> 

<script type="text/javascript" src="places/jquery/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("h3").click(function(){
  $("#content").load("viewme.html")
 });
});
</script>

 

 

Here is the content of the second file: “viewme.html”:

 <h1>Hellow World!!!</h1>

Description: If you click all <h3> elements on the page, the load method will be executed. The data in the server (viewme.html) will be displayed in the selected element.

 

Call Back Example:

<h3>Click Me</h3>
<div id="content"></div> 

<script type="text/javascript" src="places/jquery/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("h3").click(function(){
   $("#content").load("viewme.html",function(){
       alert("The data has been loaded.")
    })
   });
});
</script>

 

Here is the content of the second file: “viewme.html”:

 <h1>Hellow World!!!</h1>

Description: If you click all <h3> elements on the page, the load method will be executed. The data in the server (viewme.html) will be displayed in the selected element and it will alert at the same time.

output:load() method PI

 

For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :
Email – jannopalacios@gmail.com
Mobile No. – 09305235027 – tnt
Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!