Click here to Skip to main content
15,883,705 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a series of pages named "page-1" "page-2" "page-3"... "page-99" etc. I am trying to create a navigation so that whenever I click the "next" button it goes to the next page, and if I click "previous" it will go to the previous page depending on what the current page number is.

I have the HTML:
HTML
<a href="#" id="next">next</a> <!--it will go to page-3-->
<a href="#" id="prev">previous</a> <!--it will go to page-1-->


and the jQuery code (from Stackoverflow.com):
JavaScript
// Check that a resource exists at url; if so, execute callback
function checkResource(url, callback){
    var check = new XMLHttpRequest();
    check.addEventListener("load", function(e){
        if (check.status===200) callback();
    });
    check.open("HEAD",url);
    check.send();
}

// Get next or previous path
function makePath(sign){
    // location.pathname gets/sets the browser's current page
    return location.pathname.replace(
        // Regular expression to extract page number
        /(\/page\-)(\d+)/,
        function(match, base, num) {
            // Function to increment/decrement the page number
            return base + (parseInt(num)+sign);
        }
    );
}
function navigate(path){ location.pathname = path; }

var nextPath = makePath(1), prevPath = makePath(-1);

checkResource(nextPath, function(){
    // If resource exists at nextPath, add the click listener
    document.getElementById('next')
        .addEventListener('click', navigate.bind(null, nextPath));
});
checkResource(prevPath, function(){
    // If resource exists at prevPath, add the click listener
    document.getElementById('prev')
        .addEventListener('click', navigate.bind(null, prevPath));
});


For some reason the code does not work in Chrome and it partially work in Mozilla. I am very new to jQuery and I am trying to figure out why it does not work when I implement it. Any ideas ?

Thank you

What I have tried:

I have tried to fix it but I am very new to jQuery and it's hard for me to understand the problem.
Posted
Updated 12-Jul-16 19:51pm

1 solution

try this

JavaScript
var pageNamePattern = 'page'; // define the pattern of the html page name (http://www....../HtmlPage1.html)
       var firstPage = 1, lastPage = 10; // initialise the starting and ending page

       $(function () {
           var next = GetNextPageNumber();
           var nexturl = pageNamePattern + next + '.html';
           var prev = GetPrevPageNumber();
           var prevurl = pageNamePattern + prev + '.html';
           //$('#next').click(function () { window.location =nexturl });
           //$('#prev').click(function () { window.location = prevurl });

           $('#next').attr('href', nexturl);
           $('#prev').attr('href', prevurl);

       });

       function GetCurrentPageNumber() {
           debugger
           var path = window.location.pathname;
           var page = path.split("/").pop();
           page = page.replace(pageNamePattern, '').replace('.html', '').replace('#', '');
           return parseInt(page);
       }
       function GetNextPageNumber() {
           var current = GetCurrentPageNumber();
           current++;
           if (current > lastPage) // if last page, then dont increment the counter, either stay in same page or navigate to very fist page.
               current = lastPage;
           return current;
       }
       function GetPrevPageNumber() {
           var current = GetCurrentPageNumber();
           current--;
           if (current < firstPage) // if last page, then dont increment the counter, either stay in same page or navigate to very fist page.
               current = firstPage;
           return current;
       }
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900