JQuery address: confirm that the user clicks the forward button and not the back button

Question

EDIT 3 : This jsFiddle works with the plugin, I have almost none.

EDIT 2 : I did fiddle . I cannot get the plugin to work there, but it may be easier to parse.

---

On the webpage I am creating, articles (posts) and new pages are loaded via Ajax. At the same time, when new Ajax content is loaded, the address bar changes (using the jQuery Address plugin ).

So, normal navigation will look like this:

/ / page2 / Page3 / Article 7 / Page3 / Page4

Please note that the browser button was not pressed in this navigation, and when you exit article 7 , the website returns to its previous URL, which in this case is page3 .

The plugin does not detect when the user pressed the button back or forward. I managed to find a way to find out when the user clicks the Back or Forward button:

Each time I add new content and change the address, I save the new address in an array. If the user presses the back and forward buttons, I analyze it like this:

if (new_url == penultimate_value_in_array) => the back button is pressed the last value from the array)
else => button pressed forward (add a new value to the array)

This works correctly for this kind of navigation:

/ / page2 / Page3 / Page4

In my case, it works great for the back button. However, if the user clicks the Forward button from / article 7 to / page 3, the function will read it Back. Here is an example to understand what I mean:

---

the user is in / page 4 and presses Back → new_page = / page3, which is equal to perultimate_page_in_array (/ page3) => BACK

/ / page2 / Page3 / Article 7 / Page3 / Page4

the user is in / page 3 and clicks Back → new_page = / article7, equal to perultimate_page_in_array (/ article7) => BACK

/ / page2 / Page3 / & nbsp Article 7; / Page3

the user is in / article 7 and presses Back → new_page = / page3, which is equal to perultimate_page_in_array (/ page3) => BACK

/ / page2 / Page3 / Article 7

the user is in / page 3 and clicks Back → new_page = / page2, equal to perultimate_page_in_array (/ page2) => BACK

/ / page2 / Page3

the user is in / page 2 and presses Forward → new_page = / page3, which is NOT equal to perultimate_page_in_array (/) => FORWARD

// p. 2

the user is in / page 3 and presses Forward → new_page = / article7, which is NOT equal to perultimate_page_in_array (/ page2) => FORWARD

/ / page2 / Page3

the user is in / article 7 and presses Forward → new_page = / page3, which is equal to perultimate_page_in_array (/ page3) => BACK ( , and here the value should be FORWARD )

/ / page2 / Page3 / Article 7

How can I introduce another statement that will determine that False Back should be redirected?

---

---

EDIT:

This is the code I'm using, I'm not sure if it will help solve the problem, but here it is:

var site_url = 'www.mysite.com', last_visited_url = '', just_visited_url = $.address.baseURL().replace(site_url,''), visited_pages_array = [just_visited_url], page_number = ''; 

when visiting a new page: ajax, then:

 last_visited_url = just_visited_url; page_number = $('a.next_page_link').attr('href').replace(site_url,''); // /page3 for example $.address.state(site_url).value(page_number); just_visited_url = page_number; visited_pages_array.push(just_visited_url); 

when loading an article: ajax, then:

 article_url = $('a.article_title').attr('href').replace(site_url,''); // /article7 for example last_visited_url = just_visited_url; $.address.state(site_url).value(article_url); just_visited_url = article_url; visited_pages_array.push(just_visited_url); 

if there is an article:

 last_visited_url = just_visited_url; $.address.state(site_url).value(page_number); // This page number is the last page_number value just_visited_url = page_number; visited_pages_array.push(just_visited_url); 

And this code is executed when the user clicks on some of the browser drills:

 $.address.externalChange(function() { var newPage = $.address.baseURL().replace(site_url,''); if (visited_pages_array[visited_pages_array.length-2] == newPage) { visited_pages_array.splice(visited_pages_array.length-1 , 1); console.log('BACK pressed'); } else if (visited_pages_array.length > 1) { visited_pages_array.push(newPage); console.log('FORWARD pressed'); } else { console.log('REFRESH pressed'); } }); 

Answer 1

The quickest and easiest solution I can think of is the following:

Your problem is that when your “next” and “previous” pages match, clicking Forward is defined by your code as Back , because the following condition is: true :

 visited_pages_array[visited_pages_array.length-2] == newPage 

I would recommend you 2 things in your case:

• DO NOT remove the address you just left with visited_pages_array , as in:

  visited_pages_array.splice(visited_pages_array.length-1 , 1);

  thus visited_pages_array will contain a list of all pages visited.

• Create a new global variable called current_page_index that will contain the index of your current page in visited_pages_array , which can now contain visited_pages_array.length-1 if you are on the last page visited or lower if you used the Back button.

Now all you have to do is change your state:

 if (visited_pages_array[visited_pages_array.length-2] == newPage) 

in

 if (visited_pages_array[current_page_index-1] == newPage) 

Notes:

• When you detect a click Back - do this: current_page_index--; and when you find Forward do: current_page_index++;
• When a user clicks on your navigation to move another page, MAKE SURE : visited_pages_array.splice(current_page_index+1 ,visited_pages_array.length-current_page_index-1); (deleting all saved Forward s) until the new address is pressed until the end of visited_pages_array . And, of course, setting current_page_index++;

I hope this is clear enough, I could not get your jsFiddle to work as explainable as I can. GL :)

EDIT: another idea taken from jQuery Address docs: (not sure about that though)

$. address.externalChange (fn): binds a function that will be executed when the address changes from the browser, usually when entering a page or using the back and forward buttons. The function receives one parameter of the event object , which contains the following properties: value, path, pathNames, parametersNames, parameters and queryString.

which means that your function can receive an event object - try alert() all the properties, maybe the answer will be there

 $.address.externalChange(function(ev){ // loop and alert ev properties for (var p in ev) { alert(p + ': ' + ev[p]); } }) 

Answer 2

I'm not really sure about your logic here, but what you describe sounds like the perfect candidate for html5 pushState (browser history manipulation). Here are some good resumes:

• Link 1
• Link 2

Also, here are some good demos from other stackoverflow users:

HTML5 API Demo