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
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
- </head>
- <script type="text/javascript">
- jQuery(function () {
- jQuery('#anchorLink').click(function () {
- jQuery('#pagecontainer').load('Page.html',
- function () {
- alert('Content Successfully Loaded.')
-
- }
- );
- });
- })
- </script>
- <body>
- <a href="javascript:void(0)" id="anchorLink">To Load your page,click here...</a><br />
- <div id="pagecontainer" />
- </body>
- </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.