title: Laravel pjax - set up
body: <p>I am using pjax with laravel for faster page loads for the first time, so I don't have much knowledge about it. I am using <a href="https://github.com/spatie/laravel-pjax">this</a> package. I have set it up and it seems to be working, only for some pages where I have some some javascript for the content, I have some issues. </p>
  
  <p>This is my main.js file:</p>
  
  <pre><code>$(document).ready(function() {
  
      if ($.support.pjax) {
          $.pjax.defaults.timeout = 5000;
      }
      $(document).pjax('.link', "#pjax");
  
      //add class active to tab based on url
      var loc = window.location.pathname;
      switch (window.location.pathname) {
        case '/admin/statistics':
          $('#statistics').addClass('is-active bulletpoint');
          break;
        case '/admin/articles':
          $('#articles').addClass('is-active bulletpoint');
          $('.tabs').append('&lt;li class="tabs-title search"&gt;&lt;i class="ion-ios-search"&gt;&lt;/i&gt;&lt;input id="search-table" type="text" class="search-input" placeholder="Søk"&gt;&lt;/li&gt;');
          break;
        case '/admin/users':
          $('#users').addClass('is-active bulletpoint');
          $('.tabs').append('&lt;li class="tabs-title search"&gt;&lt;i class="ion-ios-search"&gt;&lt;/i&gt;&lt;input type="text" class="search-input" id="search-table" placeholder="Søk"&gt;&lt;/li&gt;');
          break;
        case '/admin/articles/create':
          $('#create').addClass('is-active bulletpoint');
          break;
        }
  
        var table = $('#table').DataTable({
          "paging": false,
          "ordering": false,
          "info": false,
          "dom": 'lrtip',
          "language": {
            "zeroRecords": "Ingen treff funnet"
          }
        });
  
        $('#search-table').keyup(function(){
          table.search($(this).val()).draw();
        });
  
      //add input field for external media, and remove if empty
      $(document.body).on("input", ".external-media-input:last", function () {
        var inputID = (parseInt($(this).attr('id')) + 1);
        $(".input_fields_wrap").append('&lt;div&gt;&lt;input class="external-media-input" id="' + inputID + '" name="external_media[]" type="text"/&gt;&lt;/div&gt;');
      }).on('blur', ".external-media-input:not(:last)", function () {
          if(!$(this).val()) $(this).remove();
      });
  
      //autocomplete for challenge question
      $("#challenge_question").autocomplete({
          source: "http://myApp.app/admin/challenges/autocomplete",
          minLength: 2,
          select: function( event, ui ) {
              $('#challenge_question').val(ui.item.id);
          }
      });
  
      //slider
      var orbit = new Foundation.Orbit($('#slider'));
  
      //donut charts
      for(var key in myApp.categoryViewsPercentage) {
        $('[id="' + key + '"]').highcharts({
          chart: {
              plotBackgroundColor: null,
              plotBorderWidth: 0,
              plotShadow: false,
              backgroundColor: '#2A2E34'
          },
          credits: {
            enabled: false
          },
          exporting: {
                enabled: false
            },
          title: {
              text: '&lt;style="font-size:14px; color:#FFFFFF"&gt;'+ myApp.categoryViewsPercentage[key] + '%&lt;/style&gt;' +'&lt;br&gt;&lt;style="font-size:8px; color:#FFFFFF""&gt;'+ key +'&lt;/style&gt;',
              align: 'center',
              verticalAlign: 'middle',
              y: 0
          },
          plotOptions: {
              pie: {
                  borderWidth: 0,
                  dataLabels: {
                      enabled: false
                  },
                  size: 95,
                  startAngle: 0,
                  endAngle: 360,
              }
          },
          series: [{
              type: 'pie',
              innerSize: '70%',
              data: [
                  [key , myApp.categoryViewsPercentage[key]],
                  {
                      y: 100 - myApp.categoryViewsPercentage[key],
                      dataLabels: {
                          enabled: false
                      }
                  },
              ]
          }]
       });
     }
  });
  </code></pre>
  
  <p>I have links for the content that are above <code>"pjax" container</code>, so they are not part of pjax reloading, set up like this:</p>
  
  <pre><code>&lt;ul class="tabs" data-tabs&gt;
    &lt;li class="tabs-title" id="create"&gt;&lt;a href="{{ url('/admin/articles/create') }}" class="link"&gt;Nytt inlegg&lt;/a&gt;&lt;/li&gt;
    &lt;li class="tabs-title" id="articles"&gt;&lt;a href="{{ url('/admin/articles') }}" class="link"&gt;Mine innlegg&lt;/a&gt;&lt;/li&gt;
    &lt;li class="tabs-title" id="statistics"&gt;&lt;a href="{{ url('/admin/statistics') }}" class="link"&gt;Statistikk&lt;/a&gt;&lt;/li&gt;
    &lt;li class="tabs-title" id="users"&gt;&lt;a href="{{ url('/admin/users') }}" class="link"&gt;Brukere&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Master blade:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    @section('head')
      @include('layouts.partials.head')
    @show
  &lt;/head&gt;
  &lt;body id="app-layout"&gt;
      @section('topBar')
        @include('layouts.partials.top-bar')
      @show
      &lt;div class="expanded row"&gt;
          &lt;div class="large-12 columns"&gt;
          &lt;div class="large-3 columns"&gt;
            @mirror()
          &lt;/div&gt;
          &lt;div class="large-9 columns"&gt;
            &lt;div&gt;
              @if (count($errors) &gt; 0)
                &lt;div class="alert alert-danger"&gt;
                    &lt;ul&gt;
                        @foreach ($errors-&gt;all() as $error)
                            &lt;li&gt;{{ $error }}&lt;/li&gt;
                        @endforeach
                    &lt;/ul&gt;
                &lt;/div&gt;
              @endif
            &lt;div class="row expanded columns header"&gt;
                @section('headerLinks')
                  @include('layouts.partials.headerLinks')
                @show
            &lt;/div&gt;
            &lt;div class="content" id="pjax"&gt;
              @yield('content')
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      @include('layouts.partials.foot')
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am calling scripts like this:</p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="{{ asset('js/zurb/zurb.js') }}"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"&gt;&lt;/script&gt;
    &lt;script src="//cdn.tinymce.com/4/tinymce.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="{{ asset('js/jquery-filer/jquery-filer.js') }}"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="{{ asset('js/editor/editor.js') }}"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="{{ asset('js/datepicker/datepicker.js') }}"&gt;&lt;/script&gt;
    &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.js"&gt;&lt;/script&gt;
    &lt;script src="{{ asset('js/charts.js') }}"&gt;&lt;/script&gt;
    &lt;script src="{{ asset('js/main.js') }}"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>One of my issues is that it is not giving the class <code>is-active</code> and <code>bulletpoint</code> to links on page change, and appending input field based on page, because pages are not reloaded so it is not getting new values for <code>window.location.pathname</code>. What would be the best way to set up something like this, so that moving from one to another tab and changing classes behaves smooth.</p>
  
  <p>This part is the setup I have now, in my main.js file:</p>
  
  <pre><code>//add class active to tab based on url
      var loc = window.location.pathname;
      switch (window.location.pathname) {
        case '/admin/statistics':
          $('#statistics').addClass('is-active bulletpoint');
          break;
        case '/admin/articles':
          $('#articles').addClass('is-active bulletpoint');
          $('.tabs').append('&lt;li class="tabs-title search"&gt;&lt;i class="ion-ios-search"&gt;&lt;/i&gt;&lt;input id="search-table" type="text" class="search-input" placeholder="Søk"&gt;&lt;/li&gt;');
          break;
        case '/admin/users':
          $('#users').addClass('is-active bulletpoint');
          $('.tabs').append('&lt;li class="tabs-title search"&gt;&lt;i class="ion-ios-search"&gt;&lt;/i&gt;&lt;input type="text" class="search-input" id="search-table" placeholder="Søk"&gt;&lt;/li&gt;');
          break;
        case '/admin/articles/create':
          $('#create').addClass('is-active bulletpoint');
          break;
        }
  </code></pre>
  
  <p>Also on my <code>articles/create</code> page I am using <a href="http://filer.grandesign.md/">jFiler</a> multiple upload, that is not loading with pjax. And on my <code>admin/statistic</code>, I am loading 3 types of charts with data from the server, and it renders two of them, but not the last one.</p>