// jquery.pjax.js // copyright chris wanstrath // https://github.com/defunkt/jquery-pjax (function($){ // When called on a link, fetches the href with ajax into the // container specified as the first parameter or with the data-pjax // attribute on the link itself. // // Tries to make sure the back button and ctrl+click work the way // you'd expect. // // Accepts a jQuery ajax options object that may include these // pjax specific options: // // container - Where to stick the response body. Usually a String selector. // $(container).html(xhr.responseBody) // push - Whether to pushState the URL. Defaults to true (of course). // replace - Want to use replaceState instead? That's cool. // // For convenience the first parameter can be either the container or // the options object. // // Returns the jQuery object function fnPjax(container, options) { return this.live('click.pjax', function(event){ handleClick(event, container, options) }) } // Public: pjax on click handler // // Exported as $.pjax.click. // // event - "click" jQuery.Event // options - pjax options // // Examples // // $('a').live('click', $.pjax.click) // // is the same as // $('a').pjax() // // $(document).on('click', 'a', function(event) { // var container = $(this).closest('[data-pjax-container]') // return $.pjax.click(event, container) // }) // // Returns false if pjax runs, otherwise nothing. function handleClick(event, container, options) { options = optionsFor(container, options) var link = event.currentTarget if (link.tagName.toUpperCase() !== 'A') throw "$.fn.pjax or $.pjax.click requires an anchor element" // Middle click, cmd click, and ctrl click should open // links in a new tab as normal. if ( event.which > 1 || event.metaKey || event.ctrlKey ) return // Ignore cross origin links if ( location.protocol !== link.protocol || location.host !== link.host ) return // Ignore anchors on the same page if (link.hash && link.href.replace(link.hash, '') === location.href.replace(location.hash, '')) return // Ignore empty anchor "foo.html#" if (link.href === location.href + '#') return var defaults = { url: link.href, container: $(link).attr('data-pjax'), target: link, clickedElement: $(link), // DEPRECATED: use target fragment: null } pjax($.extend({}, defaults, options)) event.preventDefault() } // Loads a URL with ajax, puts the response body inside a container, // then pushState()'s the loaded URL. // // Works just like $.ajax in that it accepts a jQuery ajax // settings object (with keys like url, type, data, etc). // // Accepts these extra keys: // // container - Where to stick the response body. // $(container).html(xhr.responseBody) // push - Whether to pushState the URL. Defaults to true (of course). // replace - Want to use replaceState instead? That's cool. // // Use it just like $.ajax: // // var xhr = $.pjax({ url: this.href, container: '#main' }) // console.log( xhr.readyState ) // // Returns whatever $.ajax returns. function pjax(options) { options = $.extend(true, {}, $.ajaxSettings, pjax.defaults, options) if ($.isFunction(options.url)) { options.url = options.url() } var target = options.target // DEPRECATED: use options.target if (!target && options.clickedElement) target = options.clickedElement[0] var hash = parseURL(options.url).hash // DEPRECATED: Save references to original event callbacks. However, // listening for custom pjax:* events is prefered. var oldBeforeSend = options.beforeSend, oldComplete = options.complete, oldSuccess = options.success, oldError = options.error var context = options.context = findContainerFor(options.container) // We want the browser to maintain two separate internal caches: one // for pjax'd partial page loads and one for normal page loads. // Without adding this secret parameter, some browsers will often // confuse the two. if (!options.data) options.data = {} options.data._pjax = context.selector function fire(type, args) { var event = $.Event(type, { relatedTarget: target }) context.trigger(event, args) return !event.isDefaultPrevented() } var timeoutTimer options.beforeSend = function(xhr, settings) { // No timeout for non-GET requests // Its not safe to request the resource again with a fallback method. if (settings.type !== 'GET') { settings.timeout = 0 } if (settings.timeout > 0) { timeoutTimer = setTimeout(function() { if (fire('pjax:timeout', [xhr, options])) xhr.abort('timeout') }, settings.timeout) // Clear timeout setting so jquerys internal timeout isn't invoked settings.timeout = 0 } xhr.setRequestHeader('X-PJAX', 'true') xhr.setRequestHeader('X-PJAX-Container', context.selector) var result // DEPRECATED: Invoke original `beforeSend` handler if (oldBeforeSend) { result = oldBeforeSend.apply(this, arguments) if (result === false) return false } if (!fire('pjax:beforeSend', [xhr, settings])) return false options.requestUrl = parseURL(settings.url).href } options.complete = function(xhr, textStatus) { if (timeoutTimer) clearTimeout(timeoutTimer) // DEPRECATED: Invoke original `complete` handler if (oldComplete) oldComplete.apply(this, arguments) fire('pjax:complete', [xhr, textStatus, options]) fire('pjax:end', [xhr, options]) // end.pjax is deprecated fire('end.pjax', [xhr, options]) } options.error = function(xhr, textStatus, errorThrown) { var container = extractContainer("", xhr, options) // DEPRECATED: Invoke original `error` handler if (oldError) oldError.apply(this, arguments) var allowed = fire('pjax:error', [xhr, textStatus, errorThrown, options]) if (textStatus !== 'abort' && allowed) window.location = container.url } options.success = function(data, status, xhr) { var container = extractContainer(data, xhr, options) if (!container.contents) { window.location = container.url return } pjax.state = { id: options.id || uniqueId(), url: container.url, title: container.title, container: context.selector, fragment: options.fragment, timeout: options.timeout } if (options.push || options.replace) { window.history.replaceState(pjax.state, container.title, container.url) } if (container.title) document.title = container.title context.html(container.contents) // Scroll to top by default if (typeof options.scrollTo === 'number') $(window).scrollTop(options.scrollTo) // Google Analytics support if ( (options.replace || options.push) && window._gaq ) _gaq.push(['_trackPageview']) // If the URL has a hash in it, make sure the browser // knows to navigate to the hash. if ( hash !== '' ) { // Avoid using simple hash set here. Will add another history // entry. Replace the url with replaceState and scroll to target // by hand. // // window.location.hash = hash var url = parseURL(container.url) url.hash = hash pjax.state.url = url.href window.history.replaceState(pjax.state, container.title, url.href) var target = $(url.hash) if (target.length) $(window).scrollTop(target.offset().top) } // DEPRECATED: Invoke original `success` handler if (oldSuccess) oldSuccess.apply(this, arguments) fire('pjax:success', [data, status, xhr, options]) } // Initialize pjax.state for the initial page load. Assume we're // using the container and options of the link we're loading for the // back button to the initial page. This ensures good back button // behavior. if (!pjax.state) { pjax.state = { id: uniqueId(), url: window.location.href, title: document.title, container: context.selector, fragment: options.fragment, timeout: options.timeout } window.history.replaceState(pjax.state, document.title) } // Cancel the current request if we're already pjaxing var xhr = pjax.xhr if ( xhr && xhr.readyState < 4) { xhr.onreadystatechange = $.noop xhr.abort() } pjax.options = options var xhr = pjax.xhr = $.ajax(options) if (xhr.readyState > 0) { // pjax event is deprecated $(document).trigger('pjax', [xhr, options]) if (options.push && !options.replace) { // Cache current container element before replacing it cachePush(pjax.state.id, context.clone().contents()) window.history.pushState(null, "", options.url) } fire('pjax:start', [xhr, options]) // start.pjax is deprecated fire('start.pjax', [xhr, options]) fire('pjax:send', [xhr, options]) } return pjax.xhr } // Public: Reload current page with pjax. // // Returns whatever $.pjax returns. function pjaxReload(container, options) { var defaults = { url: window.location.href, push: false, replace: true, scrollTo: false } return pjax($.extend(defaults, optionsFor(container, options))) } // popstate handler takes care of the back and forward buttons // // You probably shouldn't use pjax on pages with other pushState // stuff yet. function onPjaxPopstate(event) { var state = event.state if (state && state.container) { var container = $(state.container) if (container.length) { var contents = cacheMapping[state.id] if (pjax.state) { // Since state ids always increase, we can deduce the history // direction from the previous state. var direction = pjax.state.id < state.id ? 'forward' : 'back' // Cache current container before replacement and inform the // cache which direction the history shifted. cachePop(direction, pjax.state.id, container.clone().contents()) } var popstateEvent = $.Event('pjax:popstate', { state: state, direction: direction }) container.trigger(popstateEvent) var options = { id: state.id, url: state.url, container: container, push: false, fragment: state.fragment, timeout: state.timeout, scrollTo: false } if (contents) { // pjax event is deprecated $(document).trigger('pjax', [null, options]) container.trigger('pjax:start', [null, options]) // end.pjax event is deprecated container.trigger('start.pjax', [null, options]) if (state.title) document.title = state.title container.html(contents) pjax.state = state container.trigger('pjax:end', [null, options]) // end.pjax event is deprecated container.trigger('end.pjax', [null, options]) } else { pjax(options) } // Force reflow/relayout before the browser tries to restore the // scroll position. container[0].offsetHeight } else { window.location = location.href } } } // Fallback version of main pjax function for browsers that don't // support pushState. // // Returns nothing since it retriggers a hard form submission. function fallbackPjax(options) { var url = $.isFunction(options.url) ? options.url() : options.url, method = options.type ? options.type.toUpperCase() : 'GET' var form = $('