<p>I'm not sure this is a really a Craft-specific question, but here's a basic strategy:</p>

<ol>
<li><p>Build your nav and pages to work without any Ajax calls. Make sure your nav is output consistently (e.g. in <code>&lt;nav class="primary-nav"</code>) as well as the content of the page (e.g. in <code>&lt;div class="main"&gt;</code>). </p></li>
<li><p>Now implement your JavaScript. You want to (a) intercept navigation link clicks to stop a full page reload, (b) Ajax in the new content, (c) move the <code>active</code> class to the clicked navigation link, and (d) change the URL to the new page address. Make sure to use <a href="https://github.com/browserstate/history.js/" rel="nofollow">History.js</a> to smooth out any difference in browser implementation of HTML5's history API (including pushState).</p></li>
</ol>

<p>Here's a <a href="http://jmuspratt.github.io/hijax-demo/" rel="nofollow">demo</a> (and <a href="https://github.com/jmuspratt/hijax-demo" rel="nofollow">code</a>) I cooked up with static HTML. It's based on Andrew Fricke's post titled <a href="http://uhnomoli.com/2014/01/10/Rolling-your-own-PJAX-implementation-with-History.js/" rel="nofollow">Rolling your own PJAX Implementation with History.js</a></p>

CC BY-SA 3.0
2014-11-18T23:03:36.470Z
Thanks James, History.js is great but I never got it working properly. This definitely helps a lot!
carlcs
CC BY-SA 3.0
2014-11-18T22:36:52.943Z
2014-11-18T23:06:39.563Z
2014-11-18T23:06:39.563Z
James Muspratt
<p>In addition to James Muspratt's excellent answer, I thought I might share some other tips that I have learned. In your page templates you can use conditionals to modify the behavior based on whether its an ajax request or not. In this way you can design your templates to work both as Ajax requests and as direct requests, which is great for SEO and other uses.</p>

<p>One problem for example with ajax loaded templates is that live preview may not work in the CP if the template is not also designed to load in the header, css, js, nav, etc. One way around this is to extend a different template based on the type of request:</p>

<pre><code>{% extends craft.request.isAjax and not craft.request.isLivePreview ? "_ajax" : "_layout" %}
</code></pre>

<p>As you can see, if it's ajax I'm extending a template that has nothing but a content block defined; and it's not ajax then I'll extend the full template with head, js, css, nav, etc. The catch is that Live Preview also uses ajax, so we want the full template anyway.</p>

<p>You can also use the same method to return slightly modified content. In this case, I'm just loading the raw _product template for ajax requests and wrapping it as needed for non-ajax:</p>

<pre><code>{% block content %}

{% if craft.request.isAjax and not craft.request.isLivePreview %}

    {# return the raw _product template #}
    {% include 'products/_product.html' %}

{% else %}

    {# return the modified _product template wrapped properly for the full page layout #}
    &lt;section id="products" class="products js-products"&gt;
        &lt;div class="content"&gt;

            {% include 'products/_product.html' %}

        &lt;/div&gt;
    &lt;/section&gt;

{% endif %}

{% endblock %}
</code></pre>

<p>Hope this helps a bit, and doesn't make things more confusing.</p>

CC BY-SA 3.0
2014-11-19T15:54:08.250Z
Nice, I keep forgetting Craft can do that. And it means your JS doesn't have to do the work of parsing the HTML and extracting just the content block.
James Muspratt
CC BY-SA 3.0
2014-11-18T23:52:45.927Z
2014-11-18T23:52:45.927Z
Douglas McDonald
<p>I haven't used AJAX a lot, but what I want to do is the following:</p>

<p>I have a top navigation that outputs entries from a structure which link to various singles that display my data.
I want my navigation to stay and not reload when going to another page. How would I implement AJAX combined with Craft for that?</p>

<navigation><ajax>
Navigation with AJAX
# Navigation with AJAX

(Asked by: username_0 on 2014-11-18)

I haven't used AJAX a lot, but what I want to do is the following:

I have a top navigation that outputs entries from a structure which link to various singles that display my data.
I want my navigation to stay and not reload when going to another page. How would I implement AJAX combined with Craft for that?

**Tags:** navigation, ajax


---

## 2 answers

### Answer by username_1 on 2014-11-18. Score: 3 | Accepted answer

I'm not sure this is a really a Craft-specific question, but here's a basic strategy:

1. Build your nav and pages to work without any Ajax calls. Make sure your nav is output consistently (e.g. in `) as well as the content of the page (e.g. in ).`
2. Now implement your JavaScript. You want to (a) intercept navigation link clicks to stop a full page reload, (b) Ajax in the new content, (c) move the `active` class to the clicked navigation link, and (d) change the URL to the new page address. Make sure to use [History.js](https://github.com/browserstate/history.js/) to smooth out any difference in browser implementation of HTML5's history API (including pushState).

Here's a [demo](http://jmuspratt.github.io/hijax-demo/) (and [code](https://github.com/jmuspratt/hijax-demo)) I cooked up with static HTML. It's based on Andrew Fricke's post titled [Rolling your own PJAX Implementation with History.js](http://uhnomoli.com/2014/01/10/Rolling-your-own-PJAX-implementation-with-History.js/)

> **Comments:**
> **username_2**: Thanks James, History.js is great but I never got it working properly. This definitely helps a lot!  

---

### Answer by username_3 on 2014-11-18. Score: 3

In addition to username_1's excellent answer, I thought I might share some other tips that I have learned. In your page templates you can use conditionals to modify the behavior based on whether its an ajax request or not. In this way you can design your templates to work both as Ajax requests and as direct requests, which is great for SEO and other uses.
One problem for example with ajax loaded templates is that live preview may not work in the CP if the template is not also designed to load in the header, css, js, nav, etc. One way around this is to extend a different template based on the type of request:
{% extends craft.request.isAjax and not craft.request.isLivePreview ? "_ajax" : "_layout" %}

As you can see, if it's ajax I'm extending a template that has nothing but a content block defined; and it's not ajax then I'll extend the full template with head, js, css, nav, etc. The catch is that Live Preview also uses ajax, so we want the full template anyway.
You can also use the same method to return slightly modified content. In this case, I'm just loading the raw _product template for ajax requests and wrapping it as needed for non-ajax:
{% block content %}

{% if craft.request.isAjax and not craft.request.isLivePreview %}

    {# return the raw _product template #}
    {% include 'products/_product.html' %}

{% else %}

    {# return the modified _product template wrapped properly for the full page layout #}
    
        

            {% include 'products/_product.html' %}

        
    

{% endif %}

{% endblock %}

Hope this helps a bit, and doesn't make things more confusing.

> **Comments:**
> **username_1**: Nice, I keep forgetting Craft can do that. And it means your JS doesn't have to do the work of parsing the HTML and extracting just the content block.  

---

