Streaming live at 10am (PST)

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


#1

Hello,

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: https://preview.webflow.com/preview/brand-new-test-site?preview=75f6b5bde7d48728be96c74a5b2cd4b4

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

<script>
jQuery(document).ready(function(){
function processAjaxData(response, urlPath, filename){
    document.title = response;
    window.history.pushState(filename,response, urlPath);
}

jQuery( ".link1" ).on( "click", function(e) {
    e.preventDefault();
    processAjaxData('about', '/home/about', 'about');
}
</script>

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 (https://webflow.com/website/ajax-content-load) 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,


#2

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


#3

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: http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page

Thanks in advance.