Change of URL without reload using Ajax + content load from another page


I’m working on a site where multiple pages are nested within one page. The reason for it is that there will be an audio background and therefore the page cannot be refreshed.
The pages are in fact divs that are called upon via the hide/reveal function.

So far so good.

Now, there are navigation links on the homepage linking to various pages. Since the homepage cannot reload however, yet the user should be able to share the site’s various URLs, there has to be a change in the URL corresponding to each page.
I prefer not to use hashtags (aka sections on the page) but to add an ‘appendix’ (/page1, /page2) for each page.

I know that it can be done via custom code (and has been done for an award-winning Webflow site), via the history.pushstate function.

Here’s the read-only link to my test site: Webflow - Brand New Test Site

Here’s the code I’ve tried to implement based on the structure of my homepage for one of the links:

function processAjaxData(response, urlPath, filename){
    document.title = response;
    window.history.pushState(filename,response, urlPath);

jQuery( ".link1" ).on( "click", function(e) {
    processAjaxData('about', '/home/about', 'about');

Plus, I have added according id’s for my links: “link1”: etc.

What am I missing that it doesn’t work?

I know that Dave @cyberdave had huge success in calling in content form a different page using Ajax ( so maybe he could help out?

In fact, an ideal solution would be to load the content of an entire extra page without refreshing the homepage using Ajax like Dave did for partial sections, while changing the URLs at the same time. He provided us with a cloneable page which is great but unfortunately no custom code.

I know I’m not alone on this and a lot has been talked about this on Webflow forums (like tabs having their own URLs and loading content form another page) but neither code has worked for me, plus there’s no solution offered for actually changing URLs without reload in Webflow.

I would really appreciate any help on that.

Thank you in advance,

1 Like

You have invalid jQuery code. All brackets have to be matched and closed.

Thanks @samliew for the hint. Unfortunately I’m not fluent enough in jQuery to correct the code. Since you’re obviously more knowledgeable, would you mind correcting it?

Here’s the link I based my code on: javascript - How do I modify the URL without reloading the page? - Stack Overflow

Thanks in advance.

Hi @Mr.Wells ! I am trying to do the same with my page.
Did you find a way to do this?

I find myself in the same situation. I‘m building a site with quotes, and people must navigate different quotes while listening to soothing melodies loaded from the site. But each quote page needs to have a separate URL.

This is how it looks in design.

But I have no idea how to build this, as I‘m primarily a designer. :see_no_evil:

Did you guys find a solution yet? I created this thread (Seamless CMS page load) without realizing this question was already asked. Seems to be the same thing we’re trying to figure out.