aboutsummaryrefslogtreecommitdiffstats
path: root/guides/source/working_with_javascript_in_rails.md
diff options
context:
space:
mode:
authorKasper Timm Hansen <kaspth@gmail.com>2017-07-15 21:17:27 +0200
committerKasper Timm Hansen <kaspth@gmail.com>2017-07-15 21:17:27 +0200
commitaad42dce10a9cc110d67fa03a72ce5b41cbb394a (patch)
tree7c22623e9f34f2ff7bfa142385010b6a4e5aea85 /guides/source/working_with_javascript_in_rails.md
parent92fb8621a623afb33a145b1f3736010a3c870086 (diff)
parentb6300f3ecc79bff29cf9bb804a30fd92403feac1 (diff)
downloadrails-aad42dce10a9cc110d67fa03a72ce5b41cbb394a.tar.gz
rails-aad42dce10a9cc110d67fa03a72ce5b41cbb394a.tar.bz2
rails-aad42dce10a9cc110d67fa03a72ce5b41cbb394a.zip
Merge branch 'master' into unlock-minitest
Diffstat (limited to 'guides/source/working_with_javascript_in_rails.md')
-rw-r--r--guides/source/working_with_javascript_in_rails.md29
1 files changed, 29 insertions, 0 deletions
diff --git a/guides/source/working_with_javascript_in_rails.md b/guides/source/working_with_javascript_in_rails.md
index 290f2a509b..ed27752a06 100644
--- a/guides/source/working_with_javascript_in_rails.md
+++ b/guides/source/working_with_javascript_in_rails.md
@@ -376,6 +376,35 @@ browser to submit the form via normal means (i.e. non-AJAX submission) will be
canceled and the form will not be submitted at all. This is useful for
implementing your own AJAX file upload workaround.
+### Rails-ujs event handlers
+
+Rails 5.1 introduced rails-ujs and dropped jQuery as a dependency.
+As a result the Unobtrusive JavaScript (UJS) driver has been rewritten to operate without jQuery.
+These introductions cause small changes to `custom events` fired during the request:
+
+NOTE: Signature of calls to UJS’s event handlers has changed.
+Unlike the version with jQuery, all custom events return only one parameter: `event`.
+In this parameter, there is an additional attribute `detail` which contains an array of extra parameters.
+
+| Event name | Extra parameters (event.detail) | Fired |
+|---------------------|---------------------------------|-------------------------------------------------------------|
+| `ajax:before` | | Before the whole ajax business. |
+| `ajax:beforeSend` | [xhr, options] | Before the request is sent. |
+| `ajax:send` | [xhr] | When the request is sent. |
+| `ajax:stopped` | | When the request is stopped. |
+| `ajax:success` | [response, status, xhr] | After completion, if the response was a success. |
+| `ajax:error` | [response, status, xhr] | After completion, if the response was an error. |
+| `ajax:complete` | [xhr, status] | After the request has been completed, no matter the outcome.|
+
+Example usage:
+
+```html
+document.body.addEventListener('ajax:success', function(event) {
+ var detail = event.detail;
+ var data = detail[0], status = detail[1], xhr = detail[2];
+})
+```
+
Server-Side Concerns
--------------------