jQuery Load Function Example
Let's have a closer look at the jQuery .load() function.
Description
The $.getScript function is an AJAX shorthand method for inserting HTML straight into a matched element on the web page. Lets have a look at an example of the load jQuery function in action. Further Reading »
Demo
Demo: Using .load() to grab HTML content from another web page
Download
The download package includes all the inline HTML, CSS, JavaScript, jQuery and images required for the .load() function demo so you can try it yourself and change as you please.
Code
<!-- Copyright 2011 jQuery4u.com -->
<!DOCTYPE html>
<html>
<title>jQuery Function Demo - jQuery4u.com</title>
<head>
<script src="http://www.jquery4u.com/function-demos/js/jquery-1.6.4.min.js"></script>
<script src="http://www.jquery4u.com/scripts/function-demos-script.js"></script>
<script type="text/javascript">
var JQFUNCS =
{
runFunc:
{
/* ------------------------------ load Demo ------------------------------ */
"load":
{
run: function(id)
{
$('#'+id).html('<img src="/function-demos/images/loading.gif" />');
$('#'+id).load('http://www.jquery4u.com .header');
},
reset: function(id)
{
$('#'+id).empty().hide();
}
}
}
}
</script>
</head>
<body>
<p class="example">Demo: Using .load() to grab HTML content from another web page</p>
<p><a href="#" id="load-demobtn" class="demobtn btn actionr">Run Demo</a> <a href="#" id="load-codebtn" class="codebtn btn actionr">View Code</a> <a href="#" id="load-resetbtn" class="resetbtn btn actionr" style="display: none;">Reset</a></p>
<div class="demoarea" id="load"></div>
</body>
</html>
<!-- Copyright 2011 jQuery4u.com -->