Load XML Using J query


Load XML Using  J query



HTML

This is a very simple code foe every one ,first we can create Html file as . we needed
Then give any class name or id name .


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Load XML With jQuery</title>
    <script src="jquery-1.2.6.js" type="text/javascript"></script>
             <script src="aud_pre.js" type="text/javascript"></script>
    <link href="styleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>

<input id="nxt" type="button" value="next"/>
<input id="nxt1" type="button" value="prev"/>
</body>
</html>


CSS
Write down css for every class and id as our design and for our j query

body
{
    color: #3e3935;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: 90%;
    line-height: 1.4em;
    width: 85%;
    margin: 0 auto;
    padding-top: 15px;
    text-align: center;
}
p
{
    margin: 12px 0;
     line-height: 1.4em;
}
h1, dl
{
    padding: 0;
    text-align: left;
    line-height: 1em;
}
.title
{
    font-weight: bold;
    font-size: 1.25em;
    color: #4a887d;
}

.bookImage
{
    clear: left;
    width: 150px;
}
h1
{
    font-size: 2em;
    color: #4a887d;
    margin-bottom: 1em;
}

dl, dd, dt, img, p
{
    margin: 0;
    padding: 0;
}

dt
{
    clear: left;
    width: 150px;
    float: left;
    height: 1%;
    margin-bottom: 20px;
}
dd
{
    margin-left: 170px;
    margin-bottom: 20px;
    height: 1%;
}
dd:after
{
    content: ".";
    visibility: hidden;
    clear: both;
    display: block;
    height: 0;
}
.loadingPic
{
    margin: auto;
    background: url(loadingIcon.gif) no-repeat 0 0;
    padding-left: 25px;
}

.hide{display:none;}



Jquery
This very simple query  easily every one understand  look this code  


var lenk=0;
$(document).ready(function()
                                                                           {
                                    var nxtvalue=1;            
                                    xmlload(1)       
$('body').append('<h1> Recommended Web Development Books </h1>');
 $('body').append('<dl />');
                        $('#nxt').click(function(){
                                                            nxtvalue++                  
                                                 if(nxtvalue <lenk ){
                                                             xmlload(nxtvalue)        
                                                 }
                                                });
                       
                        $('#nxt1').click(function(){
                                                 nxtvalue--       
                                                 if(nxtvalue >0 ){
                                                 xmlload(nxtvalue)        
                                                 }
                                                                                                 
                                                });
});
function xmlload(no)
                        {
                                    var s=1
                                    $.get('myData.xml', function(d){
                        len = $(d).find('book').length;
                        $(d).find('book').each(function(){
                                                            lenk++;                                                           
                                                if (s==no)
             {                                                                    
                                     var len = $(d).find('book').length;
                                    var currentDiv = 0;
                                                var $book = $(this);
                                                var title = $book.attr("title");
                                                var description = $book.find('description').text();
                                                var imageurl = $book.attr('imageurl');
                                    var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>';
                                                html += '<dd> <span class="loadingPic" alt="Loading" />';
                                                html += '<p class="title">' + title + '</p>';
                                                html += '<p> ' + description + '</p>' ;
                                                html += '</dd>';
                        $('dl').html($(html));
                                                $('.loadingPic').fadeOut(1400);                                    
                                                             }
        s++;
                                                });                                  
                                     });
            }

XML


To create a valid XML Document. This document can then be passed to jQuery to create a typical jQuery object that can be traversed and manipulated.

This  is our simple  XML document file :


<?xml version="1.0" encoding="utf-8" ?>
<books>
    <book title="CSS Mastery" imageurl="images/css.jpg" index=0>
        <description>
            While CSS is a relatively simple technology to learn, it is a difficult one to master. When you first start developing sites using CSS, you will come across all kinds of infuriating browser bugs and inconsistencies.
        </description>
    </book>

    <book title="Professional ASP.NET" imageurl="images/asp.jpg" index=1>
        <description>
            Building on the revolutionary ASP.NET 2.0 release, ASP.NET 3.5 adds several key new developer features including AJAX, LINQ, and a new CSS designer in Visual Web Developer 2008.
        </description>
    </book>

    <book title="Learning jQuery" imageurl="images/lj.jpg">
        <description>
            jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. In this book, creators of the popular jQuery learning resource,
        </description>
    </book>
    <book title="Learning jQuery" imageurl="images/asp.jpg" class="hide">
        <description Class="hide">
            jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. In this book, creators of the popular jQuery learning resource,
        </description>
    </book>
</books>