Essential snippets for pjax + nprogress (YouTube like navigation) to work along with Silex/Symfony2

base.html.twig

{# parent template for every standard (non-pjax) requests #}

(...)

<link href="{{ res }}/css/nprogress.css" rel="stylesheet" media="screen" />

<script src="{{ res }}/js/jquery-2.1.0.min.js"></script>
<script src="{{ res }}/js/jquery.pjax.js"></script>
<script src="{{ res }}/js/nprogress.js"></script>

(...)

<div class="container" id="pjax-container">
    {% block body %}{% endblock %}
</div>

<script type="text/javascript">
$(function(){

  $(document).pjax('a', '#pjax-container');

  $(document).on('pjax:send', function() {
     NProgress.start();
  })
  $(document).on('pjax:complete', function() {
     NProgress.done();
  })

});
</script>

(...)

page.html.twig

{# standard template for every page of the website, it checks for the X-PJAX header and extends the correct parent template #}

{% extends app.request.headers.has("X-PJAX") ? 'pjax.html.twig'
                                             : 'base.html.twig' %}

{% block title %}
  {{ title }}
{% endblock %}

{% block body %}
  
  <div class="page-header">
    <h2>{{ title }}</h2>
  </div>

  Test pjax + nprogress

  
{% endblock %}

pjax.html.twig

{# parent template for every pjax requests #}

{# title will be placed in right place by the browser #}
<title>{% block title %}{% endblock %}</title>

{% block body %}{% endblock %}

{% block javascripts %}{% endblock %}
{% block stylesheets %}{% endblock %}