How do you redirect a URL on an AJAX Template for an existing page without disabling AJAX?

Squarespace AJAX page loading kills scripts on page. They will not load without a page refresh.

Code written to every page initialized with the redirect value will just cause a redirect loop...

How do I write a script that doesn't redirect the page initially that is in the header and LISTENS for an AJAX page refresh... and THEN gets reinitialized with a new value to redirect the page?

(I've actually asked this question already but my posts aren't getting answered at all, so I'm starting to wonder what the coding and customization board is for if one can't ask a coding and customization question...)

On 12/19/2020 at 2:36 AM, TempusInfernus said:

Squarespace AJAX page loading kills scripts on page. They will not load without a page refresh.

Code written to every page initialized with the redirect value will just cause a redirect loop...

How do I write a script that doesn't redirect the page initially that is in the header and LISTENS for an AJAX page refresh... and THEN gets reinitialized with a new value to redirect the page?

(I've actually asked this question already but my posts aren't getting answered at all, so I'm starting to wonder what the coding and customization board is for if one can't ask a coding and customization question...)

On AJAX page loading, Squarespace fire a custom event, you can place your code there to re-initiate the javascript element

window.addEventListener('mercury:load', customCode);

So, best practice is to init the element on document load event and in the ajax load event to make sure it will fire after ajax fire

document.addEventListener('DOMContentLoaded', customCode);
window.addEventListener('mercury:load', customCode);  	

function customCode() {
  /* Init the js code here */
}

I tried that (the exact code you posted here) but nothing seemed to happen... It didn't work at all.
( I put it into the header injection for the whole site )

The part I don't know how to write is the "customCode" function which you left unwritten here.

The question I am asking is how to write a function that calls a different variable every single time it is called over and over from a different page (as part of a code block)  where I want the function to do something different each time...

e.g. I want the page to redirect differently each time, and not at all the first time it's called which would be on the homepage.

Basically I don't know what that "customCode" function should look like.

Also do I put the ENTIRE thing into the code blocks ALSO? - including the

document.addEventListener('DOMContentLoaded', customCode);
window.addEventListener('mercury:load', customCode);      

parts... or just the function itself?  (in script tags)

I tried writing a function to do this, setting a variable of "url" and setting it as undefined for the first init, and then setting it in the code blocks but that didn't work at all. Nothing happened, and the page acted as if it didn't bother to load it at all.

I finally gave up and disabled AJAX. The site is www.goldenhourgraphics.com

Everything under the "View by Client Type" is all done with redirects as I couldn't build a 3rd level of navigation because Squarespace (kind of embarassingly) doesn't offer this very common 3rd level of flyout navigation. So I had to make landing pages as an intermediary step and use redirects.


 

      <script type = "text/javascript">
        var url = "https://www.goldenhourgraphics.com/a-page-on-the-site";
               function pageRedirect() {
               window.location.href = url;
            }            
            document.write("Navigating to the correct page");
            setTimeout('pageRedirect()', 0);
      </script>

This is what is in the code blocks on each page.


According to what you posted above... I would interpret what you said to mean that what I should inject into the overall headers across the site would be this:
 

<script type = "text/javascript">
document.addEventListener('DOMContentLoaded', pageRedirect);
window.addEventListener('mercury:load', pageRedirect);  	

function pageRedirect() {
  /* Init the js code here */

        	 var url = undefined;
               function pageRedirect() {
               window.location.href = url;
               }            
            document.write("Navigating to the correct page");
            setTimeout('pageRedirect()', 0);
}
      </script>

But it doesn't work at all and I have no clue what I am doing wrong or how to properly initialize the variable there. javascript n00b here.
 

Since you not provide your site url, I can not check further

17 hours ago, bangank36 said:

Since you not provide your site url, I can not check further

Huh? I specifically provided my site URL multiple times in this thread, in both posts and in the code I provided that is live on my site... AND in the hypothetical code I wrote based on what you mentioned here...

To reiterate -  it's goldenhourgraphics.com

Since I specifically said

Quote

I finally gave up and disabled AJAX. The site is www.goldenhourgraphics.com

less than 24 hours ago and only one comment before you replied that I didn't provide my site url... I'm not understanding why you would say that I didn't provide my site URL - it's right there.

4 hours ago, TempusInfernus said:

Huh? I specifically provided my site URL multiple times in this thread, in both posts and in the code I provided that is live on my site... AND in the hypothetical code I wrote based on what you mentioned here...

To reiterate -  it's goldenhourgraphics.com

Since I specifically said

less than 24 hours ago and only one comment before you replied that I didn't provide my site url... I'm not understanding why you would say that I didn't provide my site URL - it's right there.

I simply missed it

OK, apologies, that had me confused.

Though, I'm not sure how helpful the URL to my site will be, as the the code I wrote here based on what you said in your first comment isn't live on the site because when I tried it, it didn't seem to work, but I did put what I had tried into a code quote comment  here changing the name of the function from "customCode" to "pageRedirect"

It's pretty simple - it's just a bunch of different page redirects. window.location.href being passed the variable of "url" for multiple placeholder pages

It's probably not the best way to do it, but it's the only way I know how I could "get there" to have that kind of menu navigation...