Hi,
In the webworld, displaying webpage in less time plays an important role. So in many satuations you may required to load the page parts separately i.e through ajax call in the page load.
You can see in many webpage page will be loaded first and parts of the webpage is loaded after that.
This can be done using jquery ".load()" method.
This method will load data from server and place the returned html in the element.
.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )
url => url of the request to be send.
data => data that is sent to server.
complete => its an call back that will inoke after the load was done.
ex : $('#content').load('umamahesh/sample.html');
here 'content' => div id
url => umamahesh/sample.html
sample code:
<! DOCUMENT HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<h1>Response block</h1>
<div id="success"> </div>
<b>Error block:</b>
<div id="error"></div>
<script>
$("#success").load("success.html", function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
</script>
</body>
</html>
success.html
<! DOCUMENT HTML>
<html>
<head>
</head>
<body>
<div>
Hi my name is uma mahesh
</div>
</body>
</html>
You can load part of data from the url page as below
$('#content').load('umamahesh/sample.html #data');
When this method executes, it retrieves the content of umamahesh/sample.html, but then jQuery parses the returned document to find the element with an ID of data. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.
Thank You,
Uma Mahesh.
In the webworld, displaying webpage in less time plays an important role. So in many satuations you may required to load the page parts separately i.e through ajax call in the page load.
You can see in many webpage page will be loaded first and parts of the webpage is loaded after that.
This can be done using jquery ".load()" method.
This method will load data from server and place the returned html in the element.
.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )
url => url of the request to be send.
data => data that is sent to server.
complete => its an call back that will inoke after the load was done.
ex : $('#content').load('umamahesh/sample.html');
here 'content' => div id
url => umamahesh/sample.html
sample code:
<! DOCUMENT HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<h1>Response block</h1>
<div id="success"> </div>
<b>Error block:</b>
<div id="error"></div>
<script>
$("#success").load("success.html", function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
</script>
</body>
</html>
success.html
<! DOCUMENT HTML>
<html>
<head>
</head>
<body>
<div>
Hi my name is uma mahesh
</div>
</body>
</html>
You can load part of data from the url page as below
$('#content').load('umamahesh/sample.html #data');
When this method executes, it retrieves the content of umamahesh/sample.html, but then jQuery parses the returned document to find the element with an ID of data. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.
Thank You,
Uma Mahesh.
No comments:
Post a Comment