Handle 'success' callback after pjaxing new content

[jorditost]

Hi!

I'm trying to implement PJAX / PJAXY into a Wordpress Theme.

The thing ist that i want to animate the transitions between the last page showed and the new one (Parallax-style effect) and I need to handle the 'success' callback so as the old content isn't directly replaced with the new:

For example, if a PJAX call is equivalent to:

$.ajax({
  url: '/authors',
  dataType: 'html',
  beforeSend: function(xhr){
    xhr.setRequestHeader('X-PJAX', 'true')
  },
  success: function(data){
    $('#main').html(data)
    history.pushState(null, $(data).filter('title').text(), '/authors')
  })
})

I need to do something like (supposing now I'm fading the old content and the new one to simplify things)

$.ajax({
  url: '/authors',
  dataType: 'html',
  beforeSend: function(xhr){
    xhr.setRequestHeader('X-PJAX', 'true')
  },
  success: function(data){
    $('#main').append(data);

    // Fade out old content (suppose stored in a var 'oldContent')
    oldContent.fadeOut(200, function() {
       oldContent.remove();
    });

    // Fade in new content
    $(data).fadeIn();

    history.pushState(null, $(data).filter('title').text(), '/authors')
  })
})

Thanks for your time and help!

[chrisguitarguy]

This seems more like a question for the main PJAX repo. :)

That said, there are some hooks you can use:

pjax:success is fired when the request succeeds, so you could do something like this:

jQuery('#your-container').on('pjax:success', function() {
    // do fade in/out
});

[jorditost]

Thanks for the reply! I'll ask them too ;)

[jorditost]

In order to use it with PJAXY, should I modify some core code?

[chrisguitarguy]

No. I would just dequeue the main pjaxy JS and enqueing your own to handle all this stuff (including binding PJAX to links, etc):

<?php
add_action('wp_enqueue_scripts', 'fix_pjaxy_scripts', 20);
function fix_pjaxy_scripts()
{
    wp_dequeue_script('pjaxy-core');
    // enqueue your own script here
}

Take a look at this file to see what the library does: https://github.com/chrisguitarguy/pjaxy/blob/master/js/pjaxy.js

[jorditost]

Hi Chris, it worked for me, thanks! ;)