How to pass page numbers to a back button using jquery

Posted on 2011-04-28
Last Modified: 2012-05-11
Hello Experts,
I have pagination enabled in my site using jquery. here is the pager code i am using to display my page numbers, next and previous buttons etc. Everything works except that when I click on a product to view the product details and hit a back button i have in that page to come back where one came from, it always takes back me to the first page.

what i mean is if i view a product from page 2 instead of taking back to page 2 it always takes back to page 1.

I am wondering if someone can help me in passing the current page number to my back button, so it remembers the page where it came.

here you take a look my test store

click on any image and hit the back button, it always goes back to page 1.

Thanks and appreciate it
---------------- pager code--------------
	//how much items per page to show
	var show_per_page = 6; 
	var show_all = 99999;
	//getting the amount of elements inside subcats div
	var number_of_items = $('#subcats').children().size();
	//calculate the number of pages we are going to have
	var number_of_pages = Math.ceil(number_of_items/show_per_page);
	//set the value of our hidden input fields
	//now when we got all we need for the navigation let's make it '
	what are we going to have in the navigation?
		- link to previous page
		- links to specific pages
		- link to next page
		-link to view all
	//add active_page class to the first page link
	$('#pager .page_link:first').addClass('active_page');
	//hide all the elements inside subcats div
	$('#subcats').children().css('display', 'none');
	//and show the first n (show_per_page) elements
	$('#subcats').children().slice(0, show_per_page).css('display', 'block');
	$('#subcats').children().slice(99999, show_all).css('display', 'block');

function load_navigation(page_num){
var number_of_items = $('#subcats').children().size();
var show_per_page = $('#show_per_page').val();
//calculate the number of pages we are going to have
var number_of_pages = Math.ceil(number_of_items/show_per_page);
var navigation_html = page_num?'<a class="previous_link" href="javascript:previous();">Prev</a>':'';
var max_pages_to_show = 30;
if(number_of_pages > max_pages_to_show){
var middle_items = 5;
var current_page = $('#current_page').val();
var start_range = parseInt(current_page) - Math.floor(middle_items);
var end_range = parseInt(current_page) + Math.floor(middle_items);
if(start_range < 0){
end_range += Math.abs(start_range);
if(end_range > number_of_pages){
start_range -= end_range - number_of_pages;
end_range = number_of_pages
var i = 0;
while(i <= number_of_pages){
if(start_range>2 && i == start_range){
navigation_html += '...';

if(i == 1 || i == number_of_pages || (i >= start_range && i <= end_range)){
navigation_html += '<a class="page_link" href="javascript:go_to_page(' + i +')" longdesc="' + i +'">'+ (i + 1) +'</a>';
}	if(end_range < number_of_pages-1 && i == end_range){
navigation_html += '...';
}else if (!$.view_all){
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>';
navigation_html += page_num==number_of_pages-1?'':'<a class="next_link" href="javascript:next();">Next</a>';
navigation_html += 	$.view_all?'<a class="show_all_link" href="javascript:$.view_all=false;go_to_page(0);">View By Page</a>':'<a class="show_all_link" href="javascript:viewall();">View All</a>';
$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');

function previous(){
	new_page = parseInt($('#current_page').val()) - 1;
	//if there is an item before the current active link run the function

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

function viewall(){
     $.view_all = true;
    var oldval = $('#show_per_page').val();
    new_page = 0;

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 subcats div, get specific items and show them
	$('#subcats').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*/
	//update the current page input field

Open in new window

Question by:niceoneishere
    LVL 16

    Accepted Solution

    My first thought would be to get rid of the "post back" if possible.  When I click on the image of the product I expect NOT to be taken away from the current page.  Any chance you can use a modal dialog and the $.get() method.  That way, your page state is maintained.

    If not, then you will need to either pass on querystring or through cookies the value of the page being viewed and make the adjustment to your pager after the page loads.
    LVL 1

    Author Comment

    Thanks for replying, I am already passing these values to the back button like below
    <div class="back" id="divback">
    <form action=";" method="post">
    <input type="hidden" value="CTGY" name="Screen">
    <input type="hidden" value="ws" name="Store_Code">
    <input type="hidden" value="spring-dresses" name="Category_Code">
    <input border="0" type="image" onmouseout="this.src='graphics/buttons/button_back.gif'" onmouseover="this.src='graphics/buttons/button_back_a.gif'" src="graphics/buttons/button_back.gif" alt="Back">

    Open in new window

    I am just not sure how to pass the page number, thats where I am stuck sir.
    LVL 16

    Expert Comment

    Looks like your images are just anchor tags.  You will need to wire up a click event for each of the image anchors that sets a value of the currently selected page.

    <input type="hidden" name="pagenumber" />
        $("div.proddisp a").click(function(e){
              //stop the normal behavior
              //get the url of the clicked link
              var url = $(this).attr("href");
             //add the currently selected paged value (not sure how you will get this, but let's start with this approach
             var currentPage = //current paged value
             window.location = url + "?page=" +currentPage

    Open in new window

    You will then need to catch this querystring element and stick it in the back button's form.  Finally, when your catalog page loads, you need to catch the paged value and set your pager accordingly.
    LVL 1

    Assisted Solution

    didnt work. but i will award u the points
    LVL 1

    Author Closing Comment

    was not complete

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now