PJAX

I am trying to get pjax working. I also installed the laravel package https://github.com/JacobBennett/pjax

HTML:

 <div id="page-wrapper">
         @yield('content')
  </div>

Menu:

  <a data-pjax="#page-wrapper" href="{{ URL::route('test.index') }}">TEST 1</a>
  <a data-pjax="#page-wrapper" href="{{ URL::route('test2.index') }}">TEST 2</a>

 <script type="text/javascript">
        $(function() {
            $(document).pjax('a');
        });
        pjax.connect({
            'container': 'page-wrapper',
            'success': function(event){
                var url = (typeof event.data !== 'undefined') ? event.data.url : '';
                console.log("Successfully loaded "+ url);
            },
            'error': function(event){
                var url = (typeof event.data !== 'undefined') ? event.data.url : '';
                console.log("Could not load "+ url);
            },
            'ready': function(){
                console.log("PJAX loaded!");
            }
        });

    </script>

But i get the error in my console that pjax is not defined. The content seems to be loaded but i dont know why i cant "connect" to pjax.

Snapey

11 years ago

Level 122

have you included jquery.pjax.js in your layout?

christopher

11 years ago

Level 30

Of course :)

{!! HTML::script('https://code.jquery.com/jquery-1.11.2.min.js') !!}
{!! HTML::script('assets/js/jquery.pjax.js') !!}

As i said it seems to load ( the url changes before the content loads without reload ). Then the side reloads together with the new content. But the connect does not work.

vadimsg

11 years ago

Level 1

// Maybe
pjax.connect
// Change to
$.pjax.connect

Where did you find code example with pjax.connect? I cant find it in the documentation.

christopher

11 years ago

Level 30

@vadimsg i also did $.pjax before but this does also not work.

I found the solution here http://stackoverflow.com/questions/18712406/show-loading-text-on-pjax-request Its about a loading text between the loading.

I also tried

$(document).on('pjax:send', function() {
  $('#loading').show()
})
$(document).on('pjax:complete', function() {
  $('#loading').hide()
})

from the docu ... but this also does not work. I get no errors in the console but the div is still showing after loading .. I read this from the docu:

"pjax:send & pjax:complete are a good pair of events to use if you are implementing a loading indicator. They'll only be triggered if an actual XHR request is made, not if the content is loaded from cache:"

But therefore im using the github package. How can i test if there is a XHR request ?

Please or to participate in this conversation.