Permalink
Browse files

Merge branch 'change-fn-pjax-api'

Conflicts:
	test/unit/fn_pjax.js
  • Loading branch information...
2 parents 45543d6 + 6a9ac4c commit 543d2002645b2ce918efaae718d4af95d544cae4 @defunkt committed Sep 11, 2012
Showing with 44 additions and 53 deletions.
  1. +9 −12 README.md
  2. +17 −9 jquery.pjax.js
  3. +18 −32 test/unit/fn_pjax.js
View
@@ -41,7 +41,7 @@ One. Functionally obtrusive, loading the href with ajax into data-pjax:
```
```js
-$('a[data-pjax]').pjax()
+$(document).pjax('a[data-pjax]')
```
@@ -52,9 +52,7 @@ Two. Slightly obtrusive, passing a container and binding an error handler:
```
```js
-$('.js-pjax').pjax('#main')
-
-$('#main').on('pjax:error', function(e, xhr, err) {
+$('#main').pjax('.js-pjax').on('pjax:error', function(e, xhr, err) {
$('.error').text('Something went wrong: ' + err)
})
```
@@ -73,17 +71,17 @@ Three. Unobtrusive, showing a 'loading' spinner:
```
```js
-$('a').pjax('#main').on('click', function(){
+$('#main').pjax('a').on('pjax:send', function(){
$(this).showLoader()
})
```
-## $(link).pjax( container, options )
+## $(container).pjax( link, options )
-The `$(link).pjax()` function accepts a container, an options object,
-or both. The container MUST be a string selector - this is because we
-cannot persist jQuery objects using the History API between page loads.
+The `$(container).pjax(selector)` uses the jquery context as the
+default container pjax. The link selector is used to match against
+delegated click events to start pjaxing.
The options are the same as jQuery's `$.ajax` options with the
following additions:
@@ -195,16 +193,15 @@ reponse body into:
This allows you to, say, display a loading indicator upon pjaxing:
```js
-$('a.pjax').pjax('#main')
-$('#main')
+$('#main').pjax('a.pjax')
.on('pjax:start', function() { $('#loading').show() })
.on('pjax:end', function() { $('#loading').hide() })
```
Because these events bubble, you can also set them on the document:
```js
-$('a.pjax').pjax()
+$('#main').pjax('a.pjax')
$(document)
.on('pjax:start', function() { $('#loading').show() })
.on('pjax:end', function() { $('#loading').hide() })
View
@@ -4,28 +4,36 @@
(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.
+// When called on a container with a selector, fetches the href with
+// ajax into the container 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.
//
+// Exported as $.fn.pjax
+//
// 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)
+// (default: current jquery context)
// 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
+// For convenience the second 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)
+function fnPjax(selector, container, options) {
+ var context = this
+ return this.on('click.pjax', selector, function(event) {
+ options = optionsFor(container, options)
+ if (!options.container)
+ options.container = $(this).attr('data-pjax') || context
+ handleClick(event, options)
})
}
@@ -38,9 +46,9 @@ function fnPjax(container, options) {
//
// Examples
//
-// $('a').live('click', $.pjax.click)
+// $(document).on('click', 'a', $.pjax.click)
// // is the same as
-// $('a').pjax()
+// $(document).pjax('a')
//
// $(document).on('click', 'a', function(event) {
// var container = $(this).closest('[data-pjax-container]')
View
@@ -19,9 +19,7 @@ if ($.support.pjax) {
asyncTest("pushes new url", function() {
var frame = this.frame
- frame.$("a").pjax({ container: "#main" })
-
- frame.$("#main").on("pjax:end", function() {
+ frame.$("#main").pjax("a").on("pjax:end", function() {
equal(frame.location.pathname, "/dinosaurs.html")
start()
})
@@ -32,9 +30,7 @@ if ($.support.pjax) {
asyncTest("replaces container html from response data", function() {
var frame = this.frame
- frame.$("a").pjax({ container: "#main" })
-
- frame.$("#main").on("pjax:end", function() {
+ frame.$("#main").pjax("a").on("pjax:end", function() {
equal(frame.$("iframe").attr('title'), "YouTube video player")
start()
})
@@ -45,9 +41,7 @@ if ($.support.pjax) {
asyncTest("sets title to response title tag", function() {
var frame = this.frame
- frame.$("a").pjax({ container: "#main" })
-
- frame.$("#main").on("pjax:end", function() {
+ frame.$("#main").pjax("a").on("pjax:end", function() {
equal(frame.document.title, "dinosaurs")
start()
})
@@ -56,38 +50,32 @@ if ($.support.pjax) {
})
- asyncTest("uses first argument as container", function() {
+ asyncTest("uses second argument as container", function() {
var frame = this.frame
- frame.$("a").pjax("#main")
-
- frame.$("#main").on("pjax:end", function() {
+ frame.$("body").pjax("a", "#main").on("pjax:end", "#main", function() {
equal(frame.location.pathname, "/dinosaurs.html")
start()
})
frame.$("a[href='/dinosaurs.html']").click()
})
- asyncTest("uses first argument as options", function() {
+ asyncTest("uses second argument as options", function() {
var frame = this.frame
- frame.$("a").pjax({container: "#main", push: true})
-
- frame.$("#main").on("pjax:end", function() {
+ frame.$("#main").pjax("a", {push: true}).on("pjax:end", function() {
equal(frame.location.pathname, "/dinosaurs.html")
start()
})
frame.$("a[href='/dinosaurs.html']").click()
})
- asyncTest("uses first argument as container and second as options", function() {
+ asyncTest("uses second argument as container and third as options", function() {
var frame = this.frame
- frame.$("a").pjax("#main", {push: true})
-
- frame.$("#main").on("pjax:end", function() {
+ frame.$("body").pjax("a", "#main", {push: true}).on("pjax:end", function() {
equal(frame.location.pathname, "/dinosaurs.html")
start()
})
@@ -101,7 +89,7 @@ if ($.support.pjax) {
frame.$("a").attr('data-pjax', "#main")
- frame.$("a").pjax()
+ frame.$("body").pjax("a")
frame.$("#main").on("pjax:end", function() {
equal(frame.location.pathname, "/dinosaurs.html")
@@ -114,7 +102,7 @@ if ($.support.pjax) {
asyncTest("sets relatedTarget to clicked element", function() {
var frame = this.frame
- frame.$("a").pjax({ container: "#main" })
+ frame.$("#main").pjax("a")
var link = frame.$("a[href='/dinosaurs.html']")[0]
@@ -130,7 +118,7 @@ if ($.support.pjax) {
asyncTest("doesn't ignore left click", function() {
var frame = this.frame
- frame.$("a").pjax({ container: "#main" })
+ frame.$("#main").pjax("a")
var event = frame.$.Event('click')
event.which = 0
@@ -143,7 +131,7 @@ if ($.support.pjax) {
asyncTest("ignores middle clicks", function() {
var frame = this.frame
- frame.$("a").pjax({ container: "#main" })
+ frame.$("#main").pjax("a")
var event = frame.$.Event('click')
event.which = 3
@@ -156,7 +144,7 @@ if ($.support.pjax) {
asyncTest("ignores command clicks", function() {
var frame = this.frame
- frame.$("a").pjax({ container: "#main" })
+ frame.$("#main").pjax("a")
var event = frame.$.Event('click')
event.metaKey = true
@@ -169,7 +157,7 @@ if ($.support.pjax) {
asyncTest("ignores ctrl clicks", function() {
var frame = this.frame
- frame.$("a").pjax({ container: "#main" })
+ frame.$("#main").pjax("a")
var event = frame.$.Event('click')
event.ctrlKey = true
@@ -182,7 +170,7 @@ if ($.support.pjax) {
asyncTest("ignores cross origin links", function() {
var frame = this.frame
- frame.$("a").pjax({ container: "#main" })
+ frame.$("#main").pjax("a")
var event = frame.$.Event('click')
frame.$("a[href='https://www.google.com/']").trigger(event)
@@ -194,7 +182,7 @@ if ($.support.pjax) {
asyncTest("ignores same page anchors", function() {
var frame = this.frame
- frame.$("a").pjax({ container: "#main" })
+ frame.$("#main").pjax("a")
var event = frame.$.Event('click')
frame.$("a[href='#main']").trigger(event)
@@ -206,9 +194,7 @@ if ($.support.pjax) {
asyncTest("scrolls to anchor after load", function() {
var frame = this.frame
- frame.$("a").pjax({ container: "#main" })
-
- frame.$("#main").on("pjax:end", function() {
+ frame.$("#main").pjax("a").on("pjax:end", function() {
equal(frame.location.pathname, "/dinosaurs.html")
equal(frame.location.hash, "#main")
start()

0 comments on commit 543d200

Please sign in to comment.