<p>The function you mention isn't the problem. It isn't being called because, as you say, the exclusion clause is working perfectly. </p>

<p>But you also have a hook on the <code>window.popstate</code> which is triggered when you change the URL (by adding #contact to it for example).</p>

<p>This hook, as below, subsequently fires the <code>loadPage</code> function you have coded:</p>

<pre><code>$(window).on("popstate", function(e) {
    // -------------------------------------
    //   If there was an AJAX page transition already,
    //   then AJAX page load the requested page from the back or forwards button click.
    //   Variable initially set after the $main variable.
    // -------------------------------------
    if (changedPage) loadPage(location.href);
  });
</code></pre>

<p>See more on the popstate event:</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate</a></p>

<hr>

<p>As others have mentioned though, this is Javascript specific rather than Craft, so should probably be moved or archived?</p>

CC BY-SA 3.0
2016-10-19T02:30:46.383Z
Thanks for bringing that to my attention. Pounding my head on the wall over this and it turned out to be that simple. Now I'm checking to see if window.location.hash before loadPage() and the problem is solved.
Benek Lisefski
CC BY-SA 3.0
2016-10-18T11:54:55.170Z
2016-10-18T11:54:55.170Z
Stephen Hamilton
<p>I've got a website in development with new pages loaded via AJAX instead of traditional page loads. Most links on the site will use AJAX to load a new page, however there are some links I need to exclude from this behaviour. For example, local hash links that simply scroll you down to an anchor on the same page. Or, links to PDF files that are hosted locally but should obviously not be loaded via AJAX. I have enough control over the HTML that I can simply add a class to these links that I want to exclude, such as .local-anchor, or .pdf. The code I have effectively excludes these links if you directly load the page the first time, however any time the page is loaded via AJAX my exclusion no longer works. The .local-anchor links and any others that should be excluded are still somehow executing the AJAX functions. Example of the relevant JS code:</p>

<pre><code>$(document).on("click", "a:not('.local-anchor, .pdf')", function(e) {
    var href = $(this).attr("href");

    // check that it points to this domain
    if ( href.indexOf(document.domain) &gt; -1 || href.indexOf(':') === -1 ) {
      history.pushState({}, '', href);
      loadPage(href);
      e.stopPropagation(); 
      e.preventDefault();
    } 
  });
</code></pre>

<p><strong>You can see this live page (in development) here:</strong> <a href="http://dma.nz/practice/" rel="nofollow">http://dma.nz/practice/</a></p>

<p>The links:</p>

<ul>
<li>Our approach to design  </li>
<li>The architectural process  </li>
<li>Awards + Publications  </li>
<li>Contact</li>
</ul>

<p>Scroll you to anchors further down the same page and should be excluded. Yet if this page is loaded via AJAX (test by navigating to one of the other main nav links on top right and then return to Practice) then these links are triggering AJAX to reload this same page which screws things up.</p>

<p><strong>How do I need to amend this JS to make sure they are ALWAYS excluded?</strong></p>

<p>----------- UPDATE ----------- </p>

<p>As per August's suggestion I tried removing the single quotes around the :not, as well as adding an extra if statement to double check. Neither of these solutions work. My current JS is looking like this:</p>

<pre><code>$(document).on("click", "a:not(.local-anchor, .pdf)", function(e) {
    var href = $(this).attr("href");

    if ( !$(e.target).is('.local-anchor, .pdf') ) { 
      // check that it points to this domain
      if ( href.indexOf(document.domain) &gt; -1 || href.indexOf(':') === -1 ) {
        history.pushState({}, '', href);
        loadPage(href);
        e.stopPropagation(); 
        e.preventDefault();
      } 
    }
  });  
</code></pre>

<p>The :not exclusion is working. If the page is first loaded directly (not via AJAX) then those local anchor links do as they should. <strong>However if the page is loaded via AJAX then the exclusion stops working.</strong> Whether it's in the form of :not on the selector and/or an if statement to catch those classes.</p>

<p>I'm baffled here. Can't understand why that exclusion would work in one case but not the other. Any other ideas?</p>

CC BY-SA 3.0
2016-10-14T22:21:53.480Z
Try removing the single quotes inside the `:not(…)` selector. If that doesn't work, you can supplement the handler with an if-statement— `if ( !$(e.target).is('.local-anchor, .pdf') { … }`, or possibly: `if ( e.target.href.indexOf('#') == -1) { … }`
August Miller
CC BY-SA 3.0
2016-10-14T22:23:18.913Z
There's also [PJAX](http://pjax.herokuapp.com), if you want a battle-tested framework for "Pushstate and Ajax"
August Miller
CC BY-SA 3.0
2016-10-14T22:39:20.370Z
@AugustMiller I tried both your suggestions with no luck. See updated question above. Any other ideas?
Benek Lisefski
CC BY-SA 3.0
2016-10-15T04:31:02.017Z
Nothing in this question seems specifically Craft-related. Perhaps this would be a better fit for Stack Overflow?
Lindsey D
CC BY-SA 3.0
2016-10-15T06:13:25.743Z
@LindseyD you're right and I tried it there too but didn't get much response so I was hoping some Craft people would be more helpful.
Benek Lisefski
<ajax><javascript>
Craft and AJAX page transitions - how to exclude local hash links from executing AJAX?
# Craft and AJAX page transitions - how to exclude local hash links from executing AJAX?

(Asked by: username_0 on 2016-10-14)

I've got a website in development with new pages loaded via AJAX instead of traditional page loads. Most links on the site will use AJAX to load a new page, however there are some links I need to exclude from this behaviour. For example, local hash links that simply scroll you down to an anchor on the same page. Or, links to PDF files that are hosted locally but should obviously not be loaded via AJAX. I have enough control over the HTML that I can simply add a class to these links that I want to exclude, such as .local-anchor, or .pdf. The code I have effectively excludes these links if you directly load the page the first time, however any time the page is loaded via AJAX my exclusion no longer works. The .local-anchor links and any others that should be excluded are still somehow executing the AJAX functions. Example of the relevant JS code:
$(document).on("click", "a:not('.local-anchor, .pdf')", function(e) {
    var href = $(this).attr("href");

    // check that it points to this domain
    if ( href.indexOf(document.domain) > -1 || href.indexOf(':') === -1 ) {
      history.pushState({}, '', href);
      loadPage(href);
      e.stopPropagation(); 
      e.preventDefault();
    } 
  });

You can see this live page (in development) here: http://dma.nz/practice/
The links:

Our approach to design  
The architectural process  
Awards + Publications  
Contact

Scroll you to anchors further down the same page and should be excluded. Yet if this page is loaded via AJAX (test by navigating to one of the other main nav links on top right and then return to Practice) then these links are triggering AJAX to reload this same page which screws things up.
How do I need to amend this JS to make sure they are ALWAYS excluded?
----------- UPDATE ----------- 
As per August's suggestion I tried removing the single quotes around the :not, as well as adding an extra if statement to double check. Neither of these solutions work. My current JS is looking like this:
$(document).on("click", "a:not(.local-anchor, .pdf)", function(e) {
    var href = $(this).attr("href");

    if ( !$(e.target).is('.local-anchor, .pdf') ) { 
      // check that it points to this domain
      if ( href.indexOf(document.domain) > -1 || href.indexOf(':') === -1 ) {
        history.pushState({}, '', href);
        loadPage(href);
        e.stopPropagation(); 
        e.preventDefault();
      } 
    }
  });  

The :not exclusion is working. If the page is first loaded directly (not via AJAX) then those local anchor links do as they should. However if the page is loaded via AJAX then the exclusion stops working. Whether it's in the form of :not on the selector and/or an if statement to catch those classes.
I'm baffled here. Can't understand why that exclusion would work in one case but not the other. Any other ideas?

**Tags:** ajax, javascript
> **Comments:**
> **username_1**: Try removing the single quotes inside the `:not(…)` selector. If that doesn't work, you can supplement the handler with an if-statement— `if ( !$(e.target).is('.local-anchor, .pdf') { … }`, or possibly: `if ( e.target.href.indexOf('#') == -1) { … }`  
> **username_1**: There's also [PJAX](http://pjax.herokuapp.com), if you want a battle-tested framework for "Pushstate and Ajax"  
> **username_0**: @AugustMiller I tried both your suggestions with no luck. See updated question above. Any other ideas?  
> **username_2**: Nothing in this question seems specifically Craft-related. Perhaps this would be a better fit for Stack Overflow?  
> **username_0**: @LindseyD you're right and I tried it there too but didn't get much response so I was hoping some Craft people would be more helpful.  

---

## 1 answers

### Answer by username_3 on 2016-10-18. Score: 1 | Accepted answer

The function you mention isn't the problem. It isn't being called because, as you say, the exclusion clause is working perfectly. 
But you also have a hook on the window.popstate which is triggered when you change the URL (by adding #contact to it for example).
This hook, as below, subsequently fires the loadPage function you have coded:
$(window).on("popstate", function(e) {
    // -------------------------------------
    //   If there was an AJAX page transition already,
    //   then AJAX page load the requested page from the back or forwards button click.
    //   Variable initially set after the $main variable.
    // -------------------------------------
    if (changedPage) loadPage(location.href);
  });

See more on the popstate event:
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

As others have mentioned though, this is Javascript specific rather than Craft, so should probably be moved or archived?

> **Comments:**
> **username_0**: Thanks for bringing that to my attention. Pounding my head on the wall over this and it turned out to be that simple. Now I'm checking to see if window.location.hash before loadPage() and the problem is solved.  

---

