How to Change or Append to URL After Content is Loaded via load()

Question

I'm looking at a demo done by Codyhouse (article | demo) that uses loadNewContent() to bring in content from another HTML file. Everything functions perfectly, however, the URL stays the same, always as /index.html.

I've been tweaking the JS to try make it so that the page URL updates along with the content, but have been unsuccessful in doing so. I've tried using replace() but keep getting stuck in a loop... or removing some pieces of the code and it doesn't work at all.

Any ideas as to which route I should go to make this work? I want it to function as is, but if you click 'About' I want the page URL to be /about.html, etc.

function loadNewContent(newSection) {
   //create a new section element and insert it into the DOM
   var section = $('<section class="cd-section '+newSection+'"></section>').appendTo($('main'));
   //load the new content from the proper html file
   section.load(newSection+'.html .cd-section > *', function(event){
      //add the .cd-selected to the new section element -> it will cover the old one
      section.addClass('cd-selected').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
         //close navigation
         toggleNav(false);
      });
      section.prev('.cd-selected').removeClass('cd-selected');
   });

   $('main').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
      //once the navigation is closed, remove the old section from the DOM
      section.prev('.cd-section').remove();
   });

   if( $('.no-csstransitions').length > 0 ) {
      //detect if browser supports transitions
      toggleNav(false);
      section.prev('.cd-section').remove();
   }

I'm familiar with JS, but not a developer... so any help is GREATLY appreciated!!

To clarify, you want the page URL to be updated in the browser address bar? — Alex Mulchinock, May 03 '18 at 14:12
Yes, exactly. Right now, the page loads new content, but the url stays the same. I would like it to update to whatever page is loaded (about.html, project.html, etc.) — , May 03 '18 at 14:13

Alex Mulchinock · Accepted Answer · 2018-05-03T14:54:04.390

You can do this using Javascript's history.pushState() method. It's not compatible with older browsers (< IE9 and others), but there are work-arounds for this, should you need to support older browsers.

I'd suggest adding the URL manipulation just before the //close navigation comment, like so:

function loadNewContent(newSection) {
   //create a new section element and insert it into the DOM
   var section = $('<section class="cd-section '+newSection+'"></section>').appendTo($('main'));
   //load the new content from the proper html file
   section.load(newSection+'.html .cd-section > *', function(event){
      //add the .cd-selected to the new section element -> it will cover the old one
      section.addClass('cd-selected').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
         // Update browser URL
         history.pushState(null, newSection, newSection+'.html');

         //close navigation
         toggleNav(false);
      });
      section.prev('.cd-selected').removeClass('cd-selected');
   });

   $('main').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
      //once the navigation is closed, remove the old section from the DOM
      section.prev('.cd-section').remove();
   });

   if( $('.no-csstransitions').length > 0 ) {
      //detect if browser supports transitions
      toggleNav(false);
      section.prev('.cd-section').remove();
   }

Important note: Your users will likely copy/paste urls (sharing with friends .etc), remember them or even use the back/forward functionality in the browser. You should make provisions in your code to look at the current URL, and fetch the appropriate content. This only solves one half of the problem (the other half being outside the scope of your question).

Further reading: Change URL without refresh the page

With this option, how would I add an option for each page? For example, if I have five pages (index.html, page1.html, page2.html, page3.html, etc.), wouldn't this option just update the page URL to be whatever is specified in the pushState code you added above? That's the exact reason I'd like to have the page URL update to what content is loaded, so if someone links to it, it's not always going to be index.html. — , May 03 '18 at 14:47
Apologies - I was hoping you'd understand the code a little better. The filename is passed into the function inside the ```newSection``` argument. You should be able to access what you need from there, and replace the URL string as appropriate. I'll update my answer to help you. — Alex Mulchinock, May 03 '18 at 14:51
@TylerHenson This has been done. Hope this makes a little more sense now. :) — Alex Mulchinock, May 03 '18 at 14:54
Ahhh, I see!! That's exactly what I was hoping to make use of, but I couldn't figure out the syntax/options. This worked PERFECTLY!!! Thank you so much!! — , May 03 '18 at 15:45
@TylerHenson No problem. Take a look at the demo's Github repository https://github.com/CodyHouse/3d-bold-navigation/blob/master/js/main.js for further examples of how it all works. — Alex Mulchinock, May 03 '18 at 15:47

score 0 · Answer 2 · answered May 03 '18 at 14:14

The typical way to change page on a website is to make a request for a specific route and get the content back from the server, meaning that you request route "/index" and you get the homepage, then when you push the "About" button you request for another page coming from the route "/about" with the content of the page requested. You are loading content on the client-side using JavaScript instead of making a request to a server. If you want to also change the URL keeping your js function I suggest you to manipulate the history of the browser:

https://developer.mozilla.org/en-US/docs/Web/API/History_API

In this way you can both load content and change browser history changing the URL and adding also the possibility to "Go back" to the previous page. Take a look also at this answer:

Modify the URL without reloading the page

How to Change or Append to URL After Content is Loaded via load()

2 Answers2