Friday, December 16, 2011

XML jQuery Paging / Slide / example

XML jQuery Paging / Slide show example.

Script - include jquery library
<script type="text/javascript" src="jquery.min.js"></script>

Add the following inside a script tag in head section
  
var myArray = [];
  var count2 = 1;
  var xmlRowCount = 0;
      $(document).ready(mainFunction);
  
  function mainFunction()
  {
   var xmlGlobal={}; // variable to shore xml data  
   
   callAjaxFunction(); 
  }
  function callAjaxFunction()
  {
   $.ajax(
   {
    type: "GET",
    url: "sites.xml",
    dataType: "xml",
    success: doXmlFunction
   });      
  }
  
  function doXmlFunction(XML)
  {
   
    xmlGlobal = $(XML);
    var content = $(XML).find('site');
    
    //show first content
    $(XML).find('site').eq(0).each(loopXmlFunction);
    
    //for each item attach the showXmlFunction handler
    $(XML).find('site').each(loopXmlFunction2);

  }
  
  // show content of item clicked
  function showXmlFunction(e)
  {
   var tempCount = parseInt( e.data.msg) -1;
   $(xmlGlobal).find('site').eq(tempCount).each(loopXmlFunction);
  }
  
  //Attaching the showXmlFunction handler
  function loopXmlFunction2()
  {
   $(''+count2 +'').bind('click', {msg: count2},showXmlFunction).appendTo($('#nav-wrap'))
   count2++;
  }

  //Function to show content
  function loopXmlFunction()
  {
   xmlRowCount = 0;
   
   var id = $(this).attr('id');
   var title = $(this).find('title').text();
   var url = $(this).find('url').text();
   
   myArray[parseInt(xmlRowCount)] = new Array(id, title, url);
   xmlRowCount++;
   
   //remove any revious elements
   $('.items').remove();
   
   //add new title element
   $('
').html(''+title+'').appendTo('#page-wrap')
   
   //add sub elements
   $(this).find('desc').each(function()
   {
    
    var brief = $(this).find('brief').text();
    var long = $(this).find('long').text();
    
    $('
').html(brief).appendTo('#link_'+id); $('
').html(long).appendTo('#link_'+id); }); }
Add the following html in body tag
 <div id="page-wrap">
      <h1>XML jQuery Paging - Show items one by one on click</h1>
     </div>
  <div style="margin:10px 0 0 20px;" id="nav-wrap"></div>



The Following is the sites.xml file structure

 <sites>
   <site id="0">
     <title>Think2Loud</title>
 <url>http://www.think2loud.com</url>
     <desc>
       <brief>this is the brief description 1.</brief>
       <long>...and this is the long description 1.  See how long it is :)</long>
     </desc>
   </site>
   <site id="1">
     <title>jaredharbour.com</title>
 <url>http://www.jaredharbour.com</url>
     <desc>
       <brief>this is the brief description 2.</brief>
       <long>...and this is the long description 2.  See how long it is :)</long>
     </desc>
   </site>
   <site id="2">
     <title>Css Tricks</title>
 <url>http://www.css-tricks.com</url>
     <desc>
       <brief>this is the brief description 3.</brief>
       <long>...and this is the long description 3.  See how long it is :)</long>
     </desc>
   </site>
 </sites>

You can customize your ui like the following.

3 comments:

  1. Once again great post. You seem to have a good understanding of these themes.When I entering your blog,I felt this . Come on and keep writting your blog will be more attractive. To Your

    Success!
    Classic Dresses
    Classic Bridesmaid Dresses
    trumpet wedding dresses
    New Style Flower Girl Dresses

    ReplyDelete
  2. Thank's for great post :) maybe need cheap hosting please buy with Oniaga

    ReplyDelete
  3. non ha senso senza i pulsanti avanti e indietro

    ReplyDelete