bvstone

Using Back and Forward Buttons on a Single Page Application (SPA) Web Site

Posted:

Using Back and Forward Buttons on a Single Page Application (SPA) Web Site

Recently BVSTools went live with their mobile/responsive web site.  We decided at this time to set it up as a Single Page Application (SPA) style web site.

Because of this design, the back and forward buttons don't work traditionally like they would.  This is because each time a "link" is clicked instead of changing the location of the web browser to another web page, we simply replace the content on the main part of the page with the new information.

One day we got a call from a customer who said they loved the new site, but didn't like that the back button didn't work within the site.  I explained that yes, that's an issue with SPA web sites and that we were looking into a solution.

What we came up with was using the new HTML5 pushstate and popstate APIs that are available to manipulate history.  

Because we already had a JavaScript function that would "load" the contents of a link into the page, it was actually quite simple to do.  Our original function was as follows:

function loadBodyContent(path, callback) {

	$.get( path, function( data ) {
		$("#bodyContent").html( data );
		$("#bodyContent").append("<div id='footerContent'></div>");
		$("#footerContent").load("/ssi/footer.html");
		
		if (callback) callback();
	});
	
}

When we look at the loadBodyContent() function we see that we can pass in a path to load (and an optional callback function, which we're not worried about here).

The content from the path is loaded into the bodyContent div of the web  page, and then we tack on the footer portion of the page as well.

Now that we wish to manipulate the history to allow the Back and Forward buttons to work, we updated our function to this:

function loadBodyContent(path, addToHistory, callback) {
	
	$.get( path, function( data ) {
		$("#bodyContent").html( data );
		$("#bodyContent").append("<div id='footerContent'></div>");
		$("#footerContent").load("/ssi/footer.html");
		
		if (addToHistory != false) {
			addHistory(path);
		}
		
		if (callback) callback();
	});
	
}

We see that we have a new (and optional) parameter named addToHistory.  If this value is not false, we call the addHistory() function which looks like this:

function addHistory(path) {
	history.pushState(path, null, null);
}

What this is doing is pushing some information to the history stack.  Most sites will use the 3rd parameter (which is a URI parameter) but we found this also changes the URL in the web page and attempts to load... in our case we don't want that.  So, we used only the first parameter which can be retrieved when the back button is pressed.

Which leads us to the next step... how do we capture the Back or Forward buttons on a browser?  With a window event listener.  We added the following code to our main JavaScript file:

	window.addEventListener('popstate', function(e) {
		var location = e.state;
	
		if (location != null) {
			loadBodyContent(location,false);
			$('.addedMenuNavBarItem').remove();

		} else {
			window.history.back();
		}
	});

Now, when the Back or Forward buttons are pressed, we're able to get the last history item's value (the location).  We check if it's not null, and if it's not, we use it to call the loadBodyContent() function again, this time passing the boolean value of false so this location is not added to the history.

This works pretty slick on the browsers I've tested.  If you want to try things out feel free to visit our responsive site at http://m.bvstools.com.


Last edited 10/06/2015 at 18:59:02



Latest Posts:

Calculating the Size of a File Before Base64 Encoding Calculating the Size of a File Before Base64 Encoding
Posted by August 13, 2022
Programming >> RPG Programming
GreenTools for Microsoft Apps (G4MS) v9.12 Now Includes Function to Send Emails using MIME File GreenTools for Microsoft Apps (G4MS) v9.12 Now Includes Function to Send Emails using MIME File
Posted by August 11, 2022
BVSTools >> BVSTools Announcements >> GreenTools for Microsoft Apps (G4MS) Specific Announcements
GreenTools for Google Apps (G4G) v15.20 Now Supports Shortcuts GreenTools for Google Apps (G4G) v15.20 Now Supports Shortcuts
Posted by August 6, 2022
BVSTools >> BVSTools Announcements >> GreenTools for G Suite (Google Apps) (G4G) Specific Announcements
GreenTools for Microsoft Apps (G4MS) Groups Admin Authority Instructions GreenTools for Microsoft Apps (G4MS) Groups Admin Authority Instructions
Posted by July 26, 2022
BVSTools >> BVSTools Software Discussion >> GreenTools for Microsoft Apps (G4MS) Specific Discussion
GreenTools for Microsoft Apps (G4MS) v9.10 Now Includes OneDrive Functions that Work With Groups/Shared Drives GreenTools for Microsoft Apps (G4MS) v9.10 Now Includes OneDrive Functions that Work With Groups/Shared Drives
Posted by July 19, 2022
BVSTools >> BVSTools Announcements >> GreenTools for Microsoft Apps (G4MS) Specific Announcements
GreenTools for Google Apps (G4G) v15.10 Now Includes Drive Functions that Work With Shared Drives GreenTools for Google Apps (G4G) v15.10 Now Includes Drive Functions that Work With Shared Drives
Posted by July 15, 2022
BVSTools >> BVSTools Announcements >> GreenTools for G Suite (Google Apps) (G4G) Specific Announcements
GreenTools for Microsoft Apps (G4MS) v9.00 Now Offers Functions to Bypass Registration Command and BVSTools Landing Page GreenTools for Microsoft Apps (G4MS) v9.00 Now Offers Functions to Bypass Registration Command and BVSTools Landing Page
Posted by July 4, 2022
BVSTools >> BVSTools Announcements >> GreenTools for Microsoft Apps (G4MS) Specific Announcements
What Objects Should I Omit from Replication to Ensure My License Keys Work on my HA/DR System? What Objects Should I Omit from Replication to Ensure My License Keys Work on my HA/DR System?
Posted by June 27, 2022
BVSTools >> BVSTools Software Discussion
GreenTools for Google Apps (G4G) v15.00 Now Offers Functions to Bypass Registration Command and BVSTools Landing Page GreenTools for Google Apps (G4G) v15.00 Now Offers Functions to Bypass Registration Command and BVSTools Landing Page
Posted by May 3, 2022
BVSTools >> BVSTools Announcements >> GreenTools for G Suite (Google Apps) (G4G) Specific Announcements
How Do I Switch From MAILTOOL Plus to GreenTools for Google or Microsoft Office 365? How Do I Switch From MAILTOOL Plus to GreenTools for Google or Microsoft Office 365?
Posted by April 18, 2022
BVSTools >> BVSTools Software Discussion >> Email Tools (MAILTOOL) Specific Discussion
PTFs Issued for SSL/TLS Issues PTFs Issued for SSL/TLS Issues
Posted by March 12, 2022
IBM Power Systems >> PTF Watch
Google Dropping Support for Google Dropping Support for "Less Secure Apps" May 30th, 2022. What Does This Mean for Your IBM i Email?
Posted by March 4, 2022
BVSTools >> BVSTools Software Discussion >> Email Tools (MAILTOOL) Specific Discussion
Have You Installed a New Version of MAILTOOL and Now Things Are Acting Different?  Check the Command Defaults! Have You Installed a New Version of MAILTOOL and Now Things Are Acting Different? Check the Command Defaults!
Posted by February 28, 2022
BVSTools >> BVSTools Software Discussion >> Email Tools (MAILTOOL) Specific Discussion
Using MAILTOOL Plus on V7R1, or Any OS Using TLS 1.1 or Older Using MAILTOOL Plus on V7R1, or Any OS Using TLS 1.1 or Older
Posted by January 27, 2022
BVSTools >> BVSTools Software Discussion >> Email Tools (MAILTOOL) Specific Discussion
BVSTools ILE Functions Being Updated to Remove Hashtag (#) from Function Names BVSTools ILE Functions Being Updated to Remove Hashtag (#) from Function Names
Posted by December 30, 2021
BVSTools >> BVSTools Announcements

Reply




Copyright 1983-2020 BVSTools
GreenBoard(v3) Powered by the eRPG SDK, MAILTOOL Plus!, GreenTools for Google Apps, jQuery, jQuery UI, BlockUI, CKEditor and running on the IBM i (AKA AS/400, iSeries, System i).