Nov 13, 2008

Simple AJAX with JQuery(part 1) – ugly example

After getting some experience with JQuery from the previous tutorials, you may be ready for some fun. AJAX development is relatively easy with the JQuery framework.

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>



Nov 6, 2008

Intro to JQuery - part 2 - JQuery examples

If this is your first encounter of JQuery, I recommend the post – Intro to JQuery.

This is a short document on how-to use JQuery API. Necessary knowledge for this post includes JavaScript, HTML and CSS basics.


Let’s change the last example of the previous post a little. We can handle the logic without the counter variable:


<script type="text/javascript">
$(function () {
$("#ourID").click(function () {
var c = parseInt($(this).html());
$(this).html(c + 1);
});
} );
</script>



We can add more complex code with the html(), not only one number. For example:


<html>
<head>
<title>JQuery basic tutorial</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#ourID").click(function () {
$(this).html(String($(this).html() + "<br/><b>We added a row!</b>"));
});
} );
</script>
</head>
<body>
<h1>JQuery basic tutorial</h1>
Click in the box:
<div id="ourID" style="font-size: larger;background-color: #FFA500;border : medium dashed;text-align: center; width: 250px">
This is our test div element.
</div>
</body>
</html>



Be careful to add a correct html for the html() function value or you will end with unexpected results.

JQuery have more methods for DOM manipulations. For full list of these methods I recommend reading the documentation - http://docs.jquery.com/Manipulation

Very power JQuery functionality is the opportunity to easily traverse the DOM tree. One very useful element in this part is the each(). It is used to execute a function within the context of every matched element. This is simple example of its usage:


<html>
<head>
<title>JQuery basic tutorial</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("div").each(function () {
$(this).css({border : "medium double Red", backgroundColor: "orange"});
}
);
} );
</script>
</head>
<body>
<h1>JQuery basic tutorial</h1>
<div>First div element
</div>
<div>Second div element
</div>
</body>
</html>



And now a little more complex example:
The code bellow gets all the <p>(paragraph) childs of the <div> elements and sets them a css class “our class”. There are many other ways to achieve the same thing, this is just example of using each() and children().


<html>
<head>
<title>JQuery basic tutorial</title>
<style type="text/css">
.ourclass {
border : medium double #FFA500;
width: 90px;
height: 90px;
}

</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("div ").each(function () {
$(this).children("p").each(function () {
$(this).addClass("ourclass");
});
}
);
} );
</script>
</head>
<body>
<h1>JQuery basic tutorial</h1>
<div style="border : 1px solid Black;">First div element<div></div>
</div><br/>
<div style="border : 1px solid Black;">Second div element with two paragraphs
<p>First <b>p</b></p>
<p>Second p</p>
</div>
<p style="border : 1px dotted Black;">This is a paragraph but it is not a div child</p>
</body>
</html>

Popular Posts