Skip to content

Commit 4a0df41

Browse files
AlexHillAlexHill
committed
Merge branch 'master' into delay_pushstate
2 parents 3c17ac3 + a200310 commit 4a0df41

File tree

7 files changed

+221
-28
lines changed

7 files changed

+221
-28
lines changed

‎Gemfile

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
source 'http://rubygems.org'
2+
3+
gem 'sinatra'
4+
gem 'json'

‎Gemfile.lock

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
GEM
2+
remote: http://rubygems.org/
3+
specs:
4+
json (1.8.1)
5+
rack (1.5.2)
6+
rack-protection (1.5.3)
7+
rack
8+
sinatra (1.4.5)
9+
rack (~> 1.4)
10+
rack-protection (~> 1.4)
11+
tilt (~> 1.3, >= 1.3.4)
12+
tilt (1.4.1)
13+
14+
PLATFORMS
15+
ruby
16+
17+
DEPENDENCIES
18+
json
19+
sinatra

‎README.md

Lines changed: 117 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -187,28 +187,117 @@ function applyFilters() {
187187

188188
### Events
189189

190-
pjax fires a number of events regardless of how its invoked.
191-
192-
All events are fired from the container, not the link was clicked.
193-
194-
#### start and end
195-
196-
* `pjax:start` - Fired when pjaxing begins.
197-
* `pjax:end` - Fired when pjaxing ends.
198-
* `pjax:click` - Fired when pjaxified link is clicked.
199-
200-
This pair events fire anytime a pjax request starts and finishes. This includes pjaxing on `popstate` and when pages are loaded from cache instead of making a request.
201-
202-
#### ajax related
203-
204-
* `pjax:beforeSend` - Fired before the pjax request begins. Returning false will abort the request.
205-
* `pjax:send` - Fired after the pjax request begins.
206-
* `pjax:complete` - Fired after the pjax request finishes.
207-
* `pjax:success` - Fired after the pjax request succeeds.
208-
* `pjax:error` - Fired after the pjax request fails. Returning false will prevent the the fallback redirect.
209-
* `pjax:timeout` - Fired if after timeout is reached. Returning false will disable the fallback and will wait indefinitely until the response returns.
210-
211-
`send` and `complete` are a good pair of events to use if you are implementing a loading indicator. They'll only be triggered if an actual request is made, not if it's loaded from cache.
190+
All pjax events except `pjax:click` & `pjax:clicked` are fired from the pjax
191+
container, not the link that was clicked.
192+
193+
<table>
194+
<tr>
195+
<th>event</th>
196+
<th>cancel</th>
197+
<th>arguments</th>
198+
<th>notes</th>
199+
</tr>
200+
<tr>
201+
<th colspan=4>event lifecycle upon following a pjaxed link</th>
202+
</tr>
203+
<tr>
204+
<td><code>pjax:click</code></td>
205+
<td>✔︎</td>
206+
<td><code>options</code></td>
207+
<td>fires from a link that got activated; cancel to prevent pjax</td>
208+
</tr>
209+
<tr>
210+
<td><code>pjax:beforeSend</code></td>
211+
<td>✔︎</td>
212+
<td><code>xhr, options</code></td>
213+
<td>can set XHR headers</td>
214+
</tr>
215+
<tr>
216+
<td><code>pjax:start</code></td>
217+
<td></td>
218+
<td><code>xhr, options</code></td>
219+
<td></td>
220+
</tr>
221+
<tr>
222+
<td><code>pjax:send</code></td>
223+
<td></td>
224+
<td><code>xhr, options</code></td>
225+
<td></td>
226+
</tr>
227+
<tr>
228+
<td><code>pjax:clicked</code></td>
229+
<td></td>
230+
<td><code>options</code></td>
231+
<td>fires after pjax has started from a link that got clicked</td>
232+
</tr>
233+
<tr>
234+
<td><code>pjax:beforeReplace</code></td>
235+
<td></td>
236+
<td><code>contents, options</code></td>
237+
<td>before replacing HTML with content loaded from the server</td>
238+
</tr>
239+
<tr>
240+
<td><code>pjax:success</code></td>
241+
<td></td>
242+
<td><code>data, status, xhr, options</code></td>
243+
<td>after replacing HTML content loaded from the server</td>
244+
</tr>
245+
<tr>
246+
<td><code>pjax:timeout</code></td>
247+
<td>✔︎</td>
248+
<td><code>xhr, options</code></td>
249+
<td>fires after <code>options.timeout</code>; will hard refresh unless canceled</td>
250+
</tr>
251+
<tr>
252+
<td><code>pjax:error</code></td>
253+
<td>✔︎</td>
254+
<td><code>xhr, textStatus, error, options</code></td>
255+
<td>on ajax error; will hard refresh unless canceled</td>
256+
</tr>
257+
<tr>
258+
<td><code>pjax:complete</code></td>
259+
<td></td>
260+
<td><code>xhr, textStatus, options</code></td>
261+
<td>always fires after ajax, regardless of result</td>
262+
</tr>
263+
<tr>
264+
<td><code>pjax:end</code></td>
265+
<td></td>
266+
<td><code>xhr, options</code></td>
267+
<td></td>
268+
</tr>
269+
<tr>
270+
<th colspan=4>event lifecycle on browser Back/Forward navigation</th>
271+
</tr>
272+
<tr>
273+
<td><code>pjax:popstate</code></td>
274+
<td></td>
275+
<td></td>
276+
<td>event <code>direction</code> property: &quot;back&quot;/&quot;forward&quot;</td>
277+
</tr>
278+
<tr>
279+
<td><code>pjax:start</code></td>
280+
<td></td>
281+
<td><code>null, options</code></td>
282+
<td>before replacing content</td>
283+
</tr>
284+
<tr>
285+
<td><code>pjax:beforeReplace</code></td>
286+
<td></td>
287+
<td><code>contents, options</code></td>
288+
<td>right before replacing HTML with content from cache</td>
289+
</tr>
290+
<tr>
291+
<td><code>pjax:end</code></td>
292+
<td></td>
293+
<td><code>null, options</code></td>
294+
<td>after replacing content</td>
295+
</tr>
296+
</table>
297+
298+
`pjax:send` & `pjax:complete` are a good pair of events to use if you are implementing a
299+
loading indicator. They'll only be triggered if an actual XHR request is made,
300+
not if the content is loaded from cache:
212301

213302
``` javascript
214303
$(document).on('pjax:send', function() {
@@ -219,7 +308,8 @@ $(document).on('pjax:complete', function() {
219308
})
220309
```
221310

222-
Another protip: disable the fallback timeout behavior if a spinner is being shown.
311+
An example of canceling a `pjax:timeout` event would be to disable the fallback
312+
timeout behavior if a spinner is being shown:
223313

224314
``` javascript
225315
$(document).on('pjax:timeout', function(event) {
@@ -306,9 +396,11 @@ $ cd jquery-pjax/
306396
To run the test suite locally, start up the Sinatra test application.
307397

308398
```
309-
$ ruby test/app.rb
310-
== Sinatra/1.3.2 has taken the stage on 4567 for development with backup from WEBrick
399+
$ bundle install
400+
$ bundle exec ruby test/app.rb
401+
== Sinatra/1.4.5 has taken the stage on 4567 for development with backup from WEBrick
311402
403+
# in another tab:
312404
$ open http://localhost:4567/
313405
```
314406

‎bower.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"name": "pjax",
3-
"version": "1.8.1",
2+
"name": "jquery-pjax",
3+
"version": "1.8.2",
44
"main": "./jquery.pjax.js",
55
"dependencies": {
66
"jquery": ">=1.8"

‎jquery.pjax.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,10 @@ function handleClick(event, container, options) {
8282
if (link.href === location.href + '#')
8383
return
8484

85+
// Ignore event with default prevented
86+
if (event.isDefaultPrevented())
87+
return
88+
8589
var defaults = {
8690
url: link.href,
8791
container: $(link).attr('data-pjax'),
@@ -266,9 +270,13 @@ function pjax(options) {
266270
}
267271

268272
// Clear out any focused controls before inserting new page contents.
269-
document.activeElement.blur()
273+
try {
274+
document.activeElement.blur()
275+
} catch (e) { }
270276

271277
if (container.title) document.title = container.title
278+
279+
fire('pjax:beforeReplace', [container.contents, options])
272280
context.html(container.contents)
273281

274282
// FF bug: Won't autofocus fields that are inserted via JS.
@@ -446,6 +454,7 @@ function onPjaxPopstate(event) {
446454
container.trigger('pjax:start', [null, options])
447455

448456
if (state.title) document.title = state.title
457+
container.trigger('pjax:beforeReplace', [contents, options])
449458
container.html(contents)
450459
pjax.state = state
451460

‎test/unit/fn_pjax.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,25 @@ if ($.support.pjax) {
191191
start()
192192
})
193193

194+
asyncTest("ignores event with prevented default", function() {
195+
var frame = this.frame
196+
var eventIgnored = true
197+
198+
frame.$("#main").pjax("a").on("pjax:click", function() {
199+
eventIgnored = false
200+
})
201+
frame.$("a[href='/dinosaurs.html']").on("click", function(event) {
202+
event.preventDefault()
203+
setTimeout(function() {
204+
ok(eventIgnored, "Event with prevented default ignored")
205+
start()
206+
}, 10)
207+
})
208+
209+
frame.$("a[href='/dinosaurs.html']").click()
210+
})
211+
212+
194213
asyncTest("scrolls to anchor after load", function() {
195214
var frame = this.frame
196215

‎test/unit/pjax.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -528,6 +528,28 @@ if ($.support.pjax) {
528528
})
529529
})
530530

531+
asyncTest("triggers pjax:beforeReplace event from container", function() {
532+
var frame = this.frame,
533+
beforeContent = 'foo'
534+
535+
frame.$("#main")
536+
.text(beforeContent)
537+
.on("pjax:beforeReplace", function(event, contents, options) {
538+
ok(event)
539+
ok(contents)
540+
equal($(event.target).text(), beforeContent)
541+
equal(options.url, "hello.html")
542+
})
543+
frame.$("#main").on("pjax:success", function(event) {
544+
notEqual($(event.target).text(), beforeContent)
545+
start()
546+
})
547+
548+
frame.$.pjax({
549+
url: "hello.html",
550+
container: "#main"
551+
})
552+
})
531553

532554
asyncTest("triggers pjax:success event from container", function() {
533555
var frame = this.frame
@@ -820,6 +842,34 @@ if ($.support.pjax) {
820842
})
821843
})
822844

845+
asyncTest("popstate triggers pjax:beforeReplace event", function() {
846+
var frame = this.frame,
847+
originalContent = $(frame).html()
848+
849+
equal(frame.location.pathname, "/home.html")
850+
851+
frame.$('#main').on("pjax:complete", function() {
852+
equal(frame.location.pathname, "/hello.html")
853+
ok(frame.history.length > 1)
854+
855+
frame.$('#main').on('pjax:beforeReplace', function(event, contents, options) {
856+
ok(event)
857+
ok(contents)
858+
equal(frame.location.pathname, "/home.html")
859+
// Remember: the content hasn't yet been replaced.
860+
notEqual($(event.target).html(), originalContent)
861+
start()
862+
})
863+
864+
goBack(frame, function() {})
865+
})
866+
867+
frame.$.pjax({
868+
url: "hello.html",
869+
container: "#main"
870+
})
871+
})
872+
823873
// Test is fragile
824874
asyncTest("no initial pjax:popstate event", function() {
825875
var frame = this.frame

0 commit comments

Comments
 (0)