Post
Ask Question

Loading A Page Into Div Using jQuery

In this section, we will learn to load an HTML page into div tag using jQuery. This task seems quite simple but very useful sometimes. Let's go and implement it.

Scenario

Let's make a road map to implement this task. We have a page, which we wish to be loaded. What we will do is, we will take an anchor, onclick on this anchor we will load an html page onto div through jQuery.
.load() method

Basically .load() method will load the data from the server and it will place the returned HTML page into the matched element.
.load( url [, data ] [, complete ] )

url :

It will contain string, to which the request is sent. It is of string type.

data

Data is basically of string and plain object type and is included with request.

Complete

This section of .load() method will be executed when the request is completed.

Type:function(string,string,[])
 
Code Snippet  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  6. </head>  
  7. <script type="text/javascript">  
  8.     jQuery(function () {  
  9.         jQuery('#anchorLink').click(function () {  
  10.             jQuery('#pagecontainer').load('Page.html',  
  11.                             function () {  
  12.                                 alert('Content Successfully Loaded.')  
  13.                                  
  14.                             }  
  15.                     );  
  16.         });  
  17.     })  
  18.         </script>  
  19. <body>  
  20. <a href="javascript:void(0)" id="anchorLink">To Load your page,click here...</a><br />  
  21.         <div id="pagecontainer" />  
  22. </body>  
  23. </html>  
Screen

 
 
On clicking this anchor
 
 
 
Closure
 
We have successfully loaded a page into div using jQuery. Queries and suggestions are always welcomed. Thanks for going through this article. 


Similar Articles