It's part of [pjax](https://github.com/defunkt/jquery-pjax). pjax works by returning all content stuffed in a single node, which then updates the current page with those contents. It fire's Google Analytics updates, etc. It can also change the page title.

The matching nodes from the old page are replaced.

How do you handle JS tied to document.ready?

Works great, but yeah this is the only thing preventing me from pushing it live right now (I already moved any page-specific JS to inside the body tags instead of in the head).

I imagine you have to rebind all your $(function() {}) code to the page:update event (and maybe also leave it bound to document.ready for the initial page load??), but I'm not quite sure the best way to do that.

Edit: ok is rough but it seems to work

    $(function() {
      alert("document.ready");
    });
    $(document).bind('page:change', function() {
      alert("page:change");
    });

I tried it out and binding to the pjax:end works. So just wrap any code called by document.ready into a separate function. Then bind it to both document.ready and:

  $(window).bind('pjax:end', ->
    # document ready code
  )

Hmm, I wonder if there's any way to have an event on page:change that somehow _sends_ a document.ready trigger. So it will trigger all document.ready hooks, without any changes to the code hooking into document.ready (which of course could come from third-party dependencies you can't easily change to use page:change themselves, and which may not want to be changed to have turbolinks-related code in them).

Might be easier if your code exclusively uses jquery's ready rather than native DOM onload or whatever.

But yeah, either way, this is a bunch of added logic that can go wrong, I'm not super enthused about it myself.

Hmm that doesn't seem to work with turbolinks. page:change works, but it fires on every change, not just when the body contains the event. I tried making a pageLoad() function on pages that need extra functionality and then putting the following in the head:

      $(function() {
        pageLoad();
      });
      $(window).bind('page:change', function() {
        pageLoad();
      });

However, it calls the originally set pageLoad() on every subsequent update. Maybe if there was some way to clear the function before it replaces the content?

From a page loaded with pjax? You wouldn't. You'd have to watch a different object.

Thanks, but I wasn't thinking about the DOM nodes, but JS global variables. I guess they wouldn't get reset, would they?