For this part I’ll show how to use “load” in a basic example. We will have a online book and we will load the chapters without reloading the whole page. This is a stupid example, for many reasons. First – online publishers prefer more reloads. The AJAX functionality is a better decision for online business solutions, not for online reading. But I have no imagination for other relatively simple demo and I am lazy.
So – our example. It is an online book. We will select our chapter with prev(previos) and next buttons. The full ugly working example can be seen here - http://ldeveloper.hit.bg/book.load.html
We will store our chapter names in a JavaScript array:
var bookchapters = new Array( "chapter1.html", "chapter2.html", "chapter3.html" );
The load – loads a html and injects it into the DOM element. It can also filter the incoming document – very convenient if you don’t need the whole page.
So back to our example – the html:
<body >
<h1>JQuery and AJAX tutorial - part 1</h1>
<br />
<br />
<form>
<input type="button" value="Prev" id="prev">
<input type="button" value="Next" id="next">
</form>
<br>
<br>
<strong>Book Title</strong>
<div id="book">
</div>
</body>
And we load a chapter with the following(For this example our chapters are in a folder “book”):
$("#book").load("book/" + bookchapters[index]);
The whole code(html, js and css):
<html>
<head>
<title>JQuery and AJAX tutorial</title>
<style type="text/css">
#book {
background-color: #F0FFF0;
border : thin ridge;
height: 450px;
overflow: scroll
}
input {
background-color : White;
color : #006400;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var bookchapters = new Array( "chapter1.html", "chapter2.html", "chapter3.html" );
$(function () {
var index = 0;
$("#book").load("book/" + bookchapters[index]);
$("#prev").click(function () {
if(index > 0) {
index--;
$("#book").load("book/" + bookchapters[index]);
}
else {
alert("first chapter");
}
});
$("#next").click(function () {
if(index < bookchapters.length - 1) {
index++;
$("#book").load("book/" + bookchapters[index]);
}
else {
alert("last chapter");
}
});
});
</script>
</head>
<body >
<h1>JQuery and AJAX tutorial - part 1</h1>
<br />
<br />
<form>
<input type="button" value="Prev" id="prev">
<input type="button" value="Next" id="next">
</form>
<br>
<br>
<strong>Book Title</strong>
<div id="book">
</div>
</body>
</html>
Filtering the incoming page
This example shows how to use it. The “div:first” after the url in the load parameter string selects only the first div of the incoming document.
<html>
<head>
<title>JQuery and AJAX tutorial</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#page").load("in.html div:first");
});
</script>
</head>
<body >
<h1>JQuery and AJAX tutorial - part 1</h1>
<br />
<br />
<br>
<div id="page">
</div>
</body>
</html>
And the in.html:
<html>
<body>
<div>
First part of the document that will be loaded!
</div>
<br>
<div>
Next part, that won't show into the other.
</div>
</body>
</html>
