To start with Ajax and jQuery, we need a basic layout template like this. What we want to do is pretty simple: when the user clicks on the "View all my O'Reilly books" link, we fetch the book list will all the cover images and information using Ajax and jQuery.
First, we build up an XML file to store all the data we need:
<?xml version="1.0" encoding="utf-8"?> <catalog> <book id="1"> <title>Ajax. The definitive guide</title> <authors> <author>Anthony T. Holdener III</author> </authors> <isbn>0-596-52838-8</isbn> <url>http://www.oreilly.com/catalog/9780596528386</url> </book> <book id="2"> <title>Ajax hacks</title> <authors> <author>Bruce W. Perry</author> </authors> <isbn>88-481-1975-1</isbn> <url>http://www.oreilly.com/catalog/ajaxhks</url> </book> <book id="3"> <title>CSS cookbook</title> <authors> <author>Christopher Schmitt</author> </authors> <isbn>0-596-52741-1</isbn> <url>http://www.oreilly.com/catalog/cssckbk2</url> </book> <book id="4"> <title>CSS. The definitive guide</title> <authors> <author>Eric A. Meyer</author> </authors> <isbn>88-481-1721-X</isbn> <url>http://www.oreilly.com/catalog/css2</url> </book> <book id="5"> <title>Essential PHP security</title> <authors> <author>Chris Shiflett</author> </authors> <isbn>978-0-596-00656-3</isbn> <url>http://phpsecurity.org</url> </book> <book id="6"> <title>Google hacks</title> <authors> <author>Tara Calishain</author> <author>Rael Dornfest</author> </authors> <isbn>88-8378-086-8</isbn> <url>http://www.oreilly.com/catalog/googlehks</url> </book> <book id="7"> <title>Information Architecture for the World Wide Web</title> <authors> <author>Louis Rosenfeld</author> <author>Peter Morville</author> </authors> <isbn>88-8378-062-0</isbn> <url>http://www.semanticstudios.com</url> </book> <book id="8"> <title>JavaScript: the good parts</title> <authors> <author>Douglas Crockford</author> </authors> <isbn>978-0-596-51774-8</isbn> <url>http://www.oreilly.com/catalog/9780596517748</url> </book> <book id="9"> <title>JavaScript and DHTML cookbook</title> <authors> <author>Danny Goodman</author> </authors> <isbn>0-596-51408-5</isbn> <url>http://www.oreilly.com/catalog/9780596514082</url> </book> <book id="10"> <title>lex and yacc</title> <authors> <author>John R. Levine</author> <author>Tony Mason</author> <author>Doug Brown</author> </authors> <isbn>1-56592-000-7</isbn> <url></url> </book> <book id="11"> <title>PHP cookbook</title> <authors> <author>David Sklar</author> <author>Adam Trachtenberg</author> </authors> <isbn>978-0-596-10101-5</isbn> <url>http://www.oreilly.com/catalog/phpckbk2</url> </book> <book id="12"> <title>Web database applications with PHP and MySQL</title> <authors> <author>Hugh E. Williams</author> <author>David Lane</author> </authors> <isbn>0-596-00543-1</isbn> <url>http://www.oreilly.com/catalog/webdbapps2</url> </book> <book id="13"> <title>Programming Firefox</title> <authors> <author>Kenneth C. Feldt</author> </authors> <isbn>0-596-10243-7</isbn> <url>http://www.oreilly.com/catalog/9780596102432</url> </book> <book id="14"> <title>Programming PHP</title> <authors> <author>Rasmus Lerdorf</author> <author>Kevin Tatroe</author> <author>Peter MacIntyre</author> </authors> <isbn>978-0-596-00681-5</isbn> <url>http://www.oreilly.com/catalog/progphp2</url> </book> <book id="15"> <title>SQL in a nutshell</title> <authors> <author>Kevin E. Kline</author> <author>Daniel Kline</author> <author>Brand Hunt</author> </authors> <isbn>978-0-596-51884-4</isbn> <url>http://www.oreilly.com/catalog/9780596518844</url> </book> <book id="16"> <title>SVG essentials</title> <authors> <author>J. David Eisenberg</author> </authors> <isbn>978-0-596-00223-7</isbn> <url>http://www.oreilly.com/catalog/svgess</url> </book> <book id="17"> <title>XML pocket reference</title> <authors> <author>Simon St. Laurent</author> <author>Michael Fitzgerald</author> </authors> <isbn>978-0-596-10050-6</isbn> <url></url> </book> <book id="18"> <title>XSLT</title> <authors> <author>Doug Tidwell</author> </authors> <isbn>978-0-596-52721-1</isbn> <url>http://www.oreilly.com/catalog/9780596527211</url> </book> </catalog>
Notice how the ID of each book element corresponds to the name of each cover image. That's very important when retrieving our data. Then we create our Ajax request using jQuery:
$(document).ready(function() {
$('p.view a:first-child').click(function() {
$.get('http://dev.css-zibaldone.com/demos/ajax-css-jquery/js/catalog.xml', function(data) {
$('#book-list').empty();
$(data).find('book').each(function() {
var $book = $(this);
var $title = $book.find('title').text();
var $author = $book.find('author:first-child').text();
var $author2 = $book.find('author:first-child + author').text();
var $isbn = $book.find('isbn').text();
var $url = $book.find('url').text();
var html = '<li>';
html += '<div class="book-info">';
html += '<h4><a href="' + $url + '">'+ $title + '</a></h4>';
html += '<p><strong>Author(s): </strong>' + $author + ' ' + $author2 + '</p>';
html += '<p><strong>ISBN: </strong>' + $isbn + '</p>';
html += '</div>';
html += '<img src="../../img/cover/' + $book.attr('id') + '.gif" alt="Cover" />';
html += '</li>';
$('#book-list').append($(html));
});
});
return false;
});
});
Our CSS styles for the book list are pretty simple:
/* Book gallery */
p.view {
width: 100%;
background: transparent url("img/view.png") no-repeat 0 0;
text-indent: 1.6em;
}
ul#book-list {
margin: 1em 0;
padding: 0.3em 0 0 0;
border-top: 1px dashed #aaa;
list-style: none;
width: 100%;
}
ul#book-list li {
overflow: hidden;
height: 100%;
margin-bottom: 0.5em;
padding-bottom: 0.3em;
border-bottom: 1px dashed #aaa;
}
div.book-info {
float: right;
width: 60%;
margin: 0;
}
div.book-info h4,
div.book-info p {
font-size: 1em;
margin: 0;
}
div.book-info h4 {
border-bottom: 1px dashed;
}
div.book-info h4 a:link,
div.book-info h4 a:visited,
div.book-info h4 a:hover {
text-decoration: none;
}
div.book-info p {
padding: 0.3em 0;
}
div.book-info p strong {
background: #900;
color: #fff;
padding: 0 0.2em;
margin-right: 0.3em;
}
ul#book-list li img {
display: block;
float: left;
width: 39%;
margin: 0;
}
You can see the final result here.
Notice how we've used the jQuery $.get() method to fetch our XML file. Then we've retrieved all data by using the find() method. Very simple!