Take the 2-minute tour ×

Most of the times, I put some javascript code in $(document).ready to do some initialization stuffs on the page, like event binding, etc.

But now I would like to use pjax https://github.com/defunkt/jquery-pjax for some of my pages.

With pjax, because there's only part of the page gets refreshed, $(document).ready will not get called again.

I could manually trigger the initializing script on event pjax:end, but I also want to know if there's a better solution for that.


share|improve this question

3 Answers 3

up vote 0 down vote accepted

I think your best bet is probably just to do what you said and hook your page specific init code up to the "pjax:end" event. That way it'll essentially be doing the same job that it did before and run against whatever html has been loaded in to the DOM.

share|improve this answer

You can easily link all your existing code to both the document.ready and pjax:success events, like so:


$(document).ready(function() {
    // page load stuff


$(document).on('ready pjax:success', function() {
    // will fire on initial page load, and subsequent PJAX page loads
share|improve this answer
Thanks for this! –  neersighted Oct 1 '12 at 14:44
Loool. love it :) –  Zeck May 22 at 5:25
What can I do if the initialization code is different for each page? –  shreyj Nov 10 at 19:17

I have came up with this neat solution. You first start by creating a namespace for your binders in the global scope:

// Binder for PJAX init functions

$.fn.bindPJAX = {}; // Create namespace

function bindPJAX(functionName) {
  // Check function existence, then call it
  return $().bindPJAX[functionName] && $().bindPJAX[functionName]();

Then bind a callback to PJAX clicks:

  if ($.support.pjax) {
    $('a[data-pjax]').on('click', function(event) {

      var container = '#main';
      var emptyRoute = 'feed'; // The function that will be called on domain's root

      // Store current href without domain
      var link = event.currentTarget.href.replace(/^.*\/\/[^\/]+\//, '');
      var target = link === "" ? emptyRoute : link;

      // Bind href-specific asynchronous initialization
      $(document).on('ready pjax:success', container, function() {
        bindPJAX(target); // Call initializers
        $(document).off('ready pjax:success', container); // Unbind initialization

      // PJAX-load the new content
      $.pjax.click(event, {container: $(container)});


When this is set up, you can proceed to extend the $.fn.bindPJAX object to add functions that will match your route name. For example, this, in the global scope, will be called when accessing http://www.yourdomain.com/admin via PJAX:

$.extend($.fn.bindPJAX, {
  admin: function(){
    // Initialization script for /admin route

You should also consider a viable DRY fallback when PJAX fails or isn't supported, like launching the correct init function on first pageload by checking window.location in javascript, or maybe hardcoding it in your application's views.

share|improve this answer
looks pretty good, I am gonna try it. –  larryzhao Feb 18 '13 at 9:26

Your Answer


