Permalink
Browse files

rename events: start.pjax, end.pjax => pjax:start, pjax:end

  • Loading branch information...
1 parent eaa74a5 commit 7bf90473a454c39c881e11e78d955a16ddfe3b4a @defunkt committed Sep 20, 2011
Showing with 10 additions and 6 deletions.
  1. +6 −6 README.md
  2. +4 −0 jquery.pjax.js
View
@@ -169,25 +169,25 @@ Your HTML should also include a `<title>` tag if you want page titles to work.
pjax will fire two events on the container you've asked it to load your
reponse body into:
-* `start.pjax` - Fired when a pjax ajax request begins.
-* `end.pjax` - Fired when a pjax ajax request ends.
+* `pjax:start` - Fired when a pjax ajax request begins.
+* `pjax:end` - Fired when a pjax ajax request ends.
This allows you to, say, display a loading indicator upon pjaxing:
```js
$('a.pjax').pjax('#main')
$('#main')
- .bind('start.pjax', function() { $('#loading').show() })
- .bind('end.pjax', function() { $('#loading').hide() })
+ .bind('pjax:start', function() { $('#loading').show() })
+ .bind('pjax:end', function() { $('#loading').hide() })
```
Because these events bubble, you can also set them on the body:
```js
$('a.pjax').pjax()
$('body')
- .bind('start.pjax', function() { $('#loading').show() })
- .bind('end.pjax', function() { $('#loading').hide() })
+ .bind('pjax:start', function() { $('#loading').show() })
+ .bind('pjax:end', function() { $('#loading').hide() })
```
## browser support
View
@@ -185,6 +185,8 @@ pjax.defaults = {
type: 'GET',
dataType: 'html',
beforeSend: function(xhr){
+ this.trigger('pjax:start', [xhr, pjax.options])
+ // start.pjax is deprecated
this.trigger('start.pjax', [xhr, pjax.options])
xhr.setRequestHeader('X-PJAX', 'true')
},
@@ -193,6 +195,8 @@ pjax.defaults = {
window.location = pjax.options.url
},
complete: function(xhr){
+ this.trigger('pjax:end', [xhr, pjax.options])
+ // end.pjax is deprecated
this.trigger('end.pjax', [xhr, pjax.options])
}
}

6 comments on commit 7bf9047

Contributor

josh replied Sep 20, 2011

👍

Owner

defunkt replied Sep 20, 2011

Reason: start.pjax is the wrong way to use jQuery Namespacing. Only use jQuery Namespacing when you want to 'tag' a native event(s) for possible removal later, not for custom events.

Contributor

sstephenson replied Sep 20, 2011

Thank you :)

@defunkt, that page demonstrates triggering namespaced events too. It makes it sound like they're meant to be used everywhere, not just tagging for possible removal.

The only downside I can see to 'start.pjax' is that someone who binds their own 'start' will get confused when start.pjax events show up. Other than that, is there a downside?

Reason: namespaced events are being considered for twitter bootstrap on twitter/bootstrap#3936

Owner

defunkt replied Sep 10, 2012

The only downside I can see to 'start.pjax' is that someone who binds their own 'start' will get confused when start.pjax events show up. Other than that, is there a downside?

Yeah, that's the downside that led us to make this change. If something triggered a start event it would also trigger any bound start.pjax events. It led to confusing bugs in production.

We were using jQuery namespaces with custom events, the idea being they'd be totally isolated. They turned out to not be totally isolated so we switched approaches.

Makes perfect sense. Thanks!

Please sign in to comment.