Permalink
Browse files

Add `target` option and set as Event#relatedTarget

Deprecates `clickedElement`

Fixes #100
  • Loading branch information...
1 parent 93f51d0 commit b1e9880450aae884d38c0065cc46b8dbcc6ad755 @josh josh committed Mar 1, 2012
Showing with 61 additions and 21 deletions.
  1. +1 −1 README.md
  2. +24 −20 jquery.pjax.js
  3. +15 −0 test/unit/fn_pjax.js
  4. +21 −0 test/unit/pjax.js
View
@@ -90,7 +90,7 @@ following additions:
* `container` - The String selector of the container to load the
reponse body. Must be a String.
-* `clickedElement` - The element that was clicked to start the pjax call.
+* `target` - The Element that was clicked to start the pjax call.
* `push` - Whether to pushState the URL. Default: true (of course)
* `replace` - Whether to replaceState the URL. Default: false
* `timeout` - pjax sets this low, <1s. Set this higher if using a
View
@@ -71,7 +71,8 @@ function handleClick(event, container, options) {
var defaults = {
url: link.href,
container: $(link).attr('data-pjax'),
- clickedElement: $(link),
+ target: link,
+ clickedElement: $(link), // DEPRECATED: use target
fragment: null
}
@@ -131,6 +132,11 @@ var pjax = $.pjax = function( options ) {
options.url = options.url()
}
+ var target = options.target
+
+ // DEPRECATED: use options.target
+ if (!target && options.clickedElement) target = options.clickedElement[0]
+
var url = options.url
var hash = parseURL(url).hash
@@ -141,20 +147,22 @@ var pjax = $.pjax = function( options ) {
oldSuccess = options.success,
oldError = options.error
- options.context = findContainerFor(options.container)
+ var context = options.context = findContainerFor(options.container)
+
+ function fire(type, args) {
+ var event = $.Event(type, { relatedTarget: target })
+ context.trigger(event, args)
+ return !event.isDefaultPrevented()
+ }
var timeoutTimer
options.beforeSend = function(xhr, settings) {
- var context = this
-
url = stripPjaxParam(settings.url)
if (settings.timeout > 0) {
timeoutTimer = setTimeout(function() {
- var event = $.Event('pjax:timeout')
- context.trigger(event, [xhr, options])
- if (event.result !== false)
+ if (fire('pjax:timeout', [xhr, options]))
xhr.abort('timeout')
}, settings.timeout)
@@ -172,14 +180,11 @@ var pjax = $.pjax = function( options ) {
if (result === false) return false
}
- var event = $.Event('pjax:beforeSend')
- this.trigger(event, [xhr, settings])
- result = event.result
- if (result === false) return false
+ if (!fire('pjax:beforeSend', [xhr, settings])) return false
- this.trigger('pjax:start', [xhr, options])
+ fire('pjax:start', [xhr, options])
// start.pjax is deprecated
- this.trigger('start.pjax', [xhr, options])
+ fire('start.pjax', [xhr, options])
}
options.complete = function(xhr, textStatus) {
@@ -189,11 +194,11 @@ var pjax = $.pjax = function( options ) {
// DEPRECATED: Invoke original `complete` handler
if (oldComplete) oldComplete.apply(this, arguments)
- this.trigger('pjax:complete', [xhr, textStatus, options])
+ fire('pjax:complete', [xhr, textStatus, options])
- this.trigger('pjax:end', [xhr, options])
+ fire('pjax:end', [xhr, options])
// end.pjax is deprecated
- this.trigger('end.pjax', [xhr, options])
+ fire('end.pjax', [xhr, options])
}
options.error = function(xhr, textStatus, errorThrown) {
@@ -203,9 +208,8 @@ var pjax = $.pjax = function( options ) {
// DEPRECATED: Invoke original `error` handler
if (oldError) oldError.apply(this, arguments)
- var event = $.Event('pjax:error')
- this.trigger(event, [xhr, textStatus, errorThrown, options])
- if (textStatus !== 'abort' && event.result !== false)
+ var allowed = fire('pjax:error', [xhr, textStatus, errorThrown, options])
+ if (textStatus !== 'abort' && allowed)
window.location = url
}
@@ -278,7 +282,7 @@ var pjax = $.pjax = function( options ) {
// DEPRECATED: Invoke original `success` handler
if (oldSuccess) oldSuccess.apply(this, arguments)
- this.trigger('pjax:success', [data, status, xhr, options])
+ fire('pjax:success', [data, status, xhr, options])
}
View
@@ -128,6 +128,21 @@ if ($.support.pjax) {
frame.$(link).click()
})
+ asyncTest("sets relatedTarget to clicked element", function() {
+ var frame = this.frame
+
+ frame.$("a").pjax({ container: "#main" })
+
+ var link = frame.$("a[href='/dinosaurs.html']")[0]
+
+ frame.$("#main").on("pjax:end", function(event, xhr, options) {
+ equal(link, event.relatedTarget)
+ start()
+ })
+
+ frame.$(link).click()
+ })
+
asyncTest("ignores middle clicks", function() {
var frame = this.frame
View
@@ -290,6 +290,27 @@ if ($.support.pjax) {
})
})
+ asyncTest("sets relatedTarget to target", function() {
+ var frame = this.frame
+
+ var endCalled
+
+ frame.$("#main").on("pjax:end", function(event, xhr, options) {
+ ok(event)
+
+ equal(event.relatedTarget, frame.$("#main")[0])
+ equal(this, frame.$("#main")[0])
+
+ start()
+ })
+
+ frame.$.pjax({
+ url: "hello.html",
+ container: "#main",
+ target: frame.$("#main")[0]
+ })
+ })
+
asyncTest("triggers pjax:beforeSend event from container", function() {
var frame = this.frame

5 comments on commit b1e9880

@tim-peterson

i'm confused on how to use this new "target: link" option. I thought I understood what to do with how it was previously, clickedElement: $(this).css('color', 'red') but now I don't know what I'm supposed to do with => target: link.

I tried => target: this.style.backgroundColor="green" but that doesn't work.

can you provide some help, i'm not the most advanced with jquery/javascript.

thanks,
tim

@josh
Contributor
josh commented on b1e9880 Mar 3, 2012
$(document).on("pjax:start", function(event) {
  $(event.relatedTarget).css({backgroundColor: "green"})
})
@tim-peterson

ok, awesome but how to turn off the green when click a different pjax link?

also, does this mean you can't do: pjax({ target: something...}) ?

thanks,
tim

@josh
Contributor
josh commented on b1e9880 Mar 3, 2012
$(document).on("pjax:end", function(event) {
  $(event.relatedTarget).css({backgroundColor: "none"})
})

$.pjax({target: element}) will set event.relatedTarget. Its automatically set if you use $.fn.pjax.

@tim-peterson

hmm, that didn't work. The background stays green on every $('a.pjax') I click.

neither did this:

    $(document).on("pjax:end", function(event) {
      $('a.pjax').not(event.relatedTarget).css({backgroundColor: "none"});
    });

I just downloaded the latest pjax script last night after seeing your commit so this shouldn't be the issue.

thoughts?

thanks,
tim

Please sign in to comment.