How to pass page numbers to a back button using jquery

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

http://new.woodensoldier.com/category/spring-dresses.html

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

Thanks and appreciate it
---------------- pager code--------------
$(document).ready(function(){
	
	//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
	$('#current_page').val(0);
	$('#show_per_page').val(show_per_page);
	$('#show_all').val(show_all);
	
	//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
	*/
	load_navigation();
	
	//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);
start_range=0;
}
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 += '...';
}
i++;
}
}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>';
current_link++;
}
}
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>';
$('#pager').html(navigation_html);
$('.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
	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 viewall(){
     $.view_all = true;
    var oldval = $('#show_per_page').val();
    $('#show_per_page').val($('#show_all').val());
    new_page = 0;
    go_to_page(new_page);
    $('#show_per_page').val(oldval);
}

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
	$('#current_page').val(page_num);
	
	load_navigation(page_num);
}

Open in new window

LVL 2
niceoneishereAsked:
Who is Participating?
 
Steve KrileCommented:
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.
0
 
niceoneishereAuthor Commented:
Thanks for replying, I am already passing these values to the back button like below
<div class="back" id="divback">
<form action="http://mysite.com/merchant.mvc?Session_ID=71fbde2aaa25ce2c3f1d3ec96e0b518d&amp;" 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">
</form>
</div>

Open in new window


I am just not sure how to pass the page number, thats where I am stuck sir.
Thanks
0
 
Steve KrileCommented:
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" />
$(document).ready(function(){
    $("div.proddisp a").click(function(e){
          //stop the normal behavior
          e.preventDefault();

          //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.
0
 
niceoneishereAuthor Commented:
didnt work. but i will award u the points
0
 
niceoneishereAuthor Commented:
was not complete
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.