CODEWITHSUNDEEP
javascripthtmlurl
user5551675
user5551675

Reputation:

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

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!!

Upvotes: 1

Views: 989

Answers (2)

Alex Mulchinock
Alex Mulchinock

Reputation: 2269

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

Upvotes: 1

AleDG
AleDG

Reputation: 84

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

Upvotes: 0

Related Questions