Home/ Questions/Q 6629533
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T22:16:28+00:00

I need to be able to parse an XML file with JQuery, show 3

  • 0

I need to be able to parse an XML file with JQuery, show 3 posts at the time and have pagination that links to the rest of the posts.

Below in the code, I am parsing a local XML file that I have downloaded from slashdot. The code displays the right amount of posts and creates the links to paginate but when you click the pagination links, they do not work for some reason. I am still a JQuery n00b so I have problems figuring out what is wrong. Seems like JQuery does not have a really good debugging tool?

p.s. You can download http://slashdot.org/slashdot.xml to your local so you can test the code if you want.

here is the code

<html>                                                                  
 <head>                                                                  
 <script type="text/javascript" src="jquery-1.6.4.js"></script>          
 <script type="text/javascript">             

    $(document).ready(function()
            {
              $.ajax({
                type: "GET",
                url: "slashdot.xml",
                dataType: "xml",
                success: parseXml
              });
            });  
            function parseXml(xml)
            {
              //find every story 
              var count = 0;
              $(xml).find("story").each(function()
              {
                  count++;
                  var title = $(this).find('title').text()
                  var url = $(this).find('url').text()

                  var fullLink = '<li><a href="'+url+'">' + title + '</a></li>';
                  //document.write('<a href="'+url+'">' + title + '</a><br/>');
                  $("#content").append(fullLink);
              });
              var show_per_page = 3;  
              var number_of_items = count;
              var number_of_pages = Math.ceil(number_of_items/show_per_page); 
              $('#current_page').val(0);
                $('#show_per_page').val(show_per_page);
                var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a> ';
                var current_link = 0; 
                while(number_of_pages > current_link){
                    navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
                    current_link++;
                } 
                navigation_html += '<a class="next_link" href="javascript:next();"> Next</a>';  
                $('#page_navigation').html(navigation_html); 
                $('#page_navigation .page_link:first').addClass('active_page'); 
                $('#content').children().css('display', 'none');
                $('#content').children().slice(0, show_per_page).css('display', 'block'); 
                function previous(){  

                    new_page = parseInt($('#current_page').val()) - 1;
                    //if there is an item before the current active link run the function
                    if($('.active_page').prev('.page_link').length==true){
                        go_to_page(new_page);
                    }  

                }  
                function next(){
                    new_page = parseInt($('#current_page').val()) + 1;
                    //if there is an item after the current active link run the function
                    if($('.active_page').next('.page_link').length==true){
                        go_to_page(new_page);
                    }  

                }
                function go_to_page(page_num){
                    //get the number of items shown per page
                    var show_per_page = parseInt($('#show_per_page').val());  

                    //get the element number where to start the slice from
                    start_from = page_num * show_per_page;  

                    //get the element number where to end the slice
                    end_on = start_from + show_per_page;  

                    //hide all children elements of content div, get specific items and show them
                    $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');  

                    /*get the page link that has longdesc attribute of the current page and add active_page class to it
                    and remove that class from previously active page link*/
                    $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');  

                    //update the current page input field
                    $('#current_page').val(page_num);
                }  

              //$("#content").append('count:' + count);

            }



 </script>                                                               
 </head>                                                                 
 <body>                                                                  
   <!-- we will add our HTML content here -->  

   <input type="hidden" id="current_page"></input>
   <input type="hidden" id="show_per_page"></input>

   <div id="content">
   </div>

   <div id="page_navigation"></div>

 </body>                                                                 
 </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, your html is invalid. Input tags are self-closing and li items need to be inside of a list ul or ol not a div element.

    <input type="hidden" id="current_page" />
<input type="hidden" id="show_per_page" />
<ul id="content"></ul>

    Second, your click events aren’t getting handled because go_to_page, next and previous are not in the global scope. You should create those elements and attach click handlers.

    $("<a href='#'>Prev</a>").click(previous).appendTo("#page_navigation");
while (number_of_pages > current_link) {
    $("<a href='#' class='page_link'>").text(++current_link).click(go_to_page).appendTo("#page_navigation")
}
$("<a href='#'>Next</a>").click(next).appendTo("#page_navigation");

    Another tip, restructure the prev and next functions to just click on the previous or next page number. That way, this in go_to_page always points to the paging link.

    function previous(e) {
    e.preventDefault(); //Don't follow the link
    $(".active_page").prev(".page_link").click();
}

function next(e) {
    e.preventDefault();
    $(".active_page").next(".page_link").click();
}

function go_to_page(e) {
    e.preventDefault();

    //Get the zero-based index instead of using an attribute
    var page_num = $(this).index(".page_link");

    //get the number of items shown per page
    var show_per_page = parseInt($('#show_per_page').val());

    //get the element number where to start the slice from
    start_from = page_num * show_per_page;

    //get the element number where to end the slice
    end_on = start_from + show_per_page;

    //hide all children elements of content div, get specific items and show them
    $('#content').children().hide().slice(start_from, end_on).show();

    //Since this always points to the page link, use that instead of looking for it
    $(this).addClass("active_page").siblings(".active_page").removeClass("active_page");

    //update the current page input field.  Don't need this anymore since we can use the .active_page class to identify it.
    //$('#current_page').val(page_num);
}

    JSFiddle with the AJAX part removed.

    • 0