Create next/previous HTML page navigation with jquery

Question

0.00/5 (No votes)

See more:

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 12-Jul-16 10:39am

Member 12631714

Updated 12-Jul-16 19:51pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Karthik_Mahalingam · Answer 1 · 2016-07-12T19:51:00

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;
       }