Callbacks don't persist after navigating away from a page

[defunkt]

As I wrote in #25:

There's a problem with callbacks in pjax, however: they don't get run when returning to a pjax'd page after navigating away.

For example:

$('a').pjax('#main', { success: function(){
  console.log('pjax!')
}})

This code will log "pjax!" until you navigate away from the page. Once you return (via the back button) from navigating away, nothing will be printed. We can't persist callbacks with the History API.

This is a problem for the existing success, error, and complete user defined callbacks.

Instead, people should use the start.pjax and end.pjax events. We should probably not let anyone use anything else and add more pjax-specific events to make up for it.

Unfortunately, it's not that simple. Take the above example. If multiple pjax handlers are using #main, how can you tell if the end.pjax event fired is the one you anticipated?

[spantaleev]

Yeah.. when using the back/forward buttons a new pjax request is created from the popstate event handler which will ignore all custom callbacks.

If all history items were updates to the same page, we could probably do something smart which saves these callbacks and reuses them in popstate when necessary. But the first real page change will clear our javascript persistence and then it won't work.

And with the beforeSuccess callback from #25, it gets messier, because the cleanup you expect to happen between page changes doesn't work anymore and things start to get ugly.
Maybe the beforeSuccess stuff could be moved to some custom event as you suggested, and we drop the "return false to prevent changes" feature. Maybe we could pass a new identifier option when making pjax requests, that your custom handler can use to detect whether it should handle this event..

[defunkt]

At this point I think we should disable support for the success, error, and complete callbacks.

[spantaleev]

Agreed.
We can also pass the options object to the regular start.pjax and end.pjax event handlers, like this:

$container.trigger('start.pjax', [options])
$container.trigger('end.pjax', [options])

If the caller adds identifier strings to the options object (which we'll also track in state), the top-level event handler can decide whether it should handle the event:

jQuery.pjax({
    "container": "#some-container",
    "identifier": "blah",
    "url": "/some-url"
});

$(window).bind('start.pjax', function (ev, options) {
    if (options.identifier === 'blah') {
        //Handle..
    } else if (options.identifier === 'something-else') {
        //Handle..
    }
});

What do you think?

[staabm]

Maybe you can persist using localStorage Api
http://diveintohtml5.org/storage.html

[josh]

I'd like to see this fixed by adding more custom events.

Callbacks should be treated as legacy, but we could automatically transform:

$('a').pjax('#main', { success: function(){
  console.log('pjax!')
}})

into

$(document).on('pjax:success', 'a', function() {
  console.log('pjax!')
})

[defunkt]

@josh I like that.

[josh]

#96