From d06a1ee7eec96a1b52f21026e18a0a09219e66a8 Mon Sep 17 00:00:00 2001 From: Dimitri Roche Date: Fri, 13 Oct 2017 09:05:12 -0400 Subject: Update documentation to lead with ajax param `event.detail` --- guides/source/working_with_javascript_in_rails.md | 55 ++++++++--------------- 1 file changed, 19 insertions(+), 36 deletions(-) (limited to 'guides') diff --git a/guides/source/working_with_javascript_in_rails.md b/guides/source/working_with_javascript_in_rails.md index 098366ec1b..f8cfac3995 100644 --- a/guides/source/working_with_javascript_in_rails.md +++ b/guides/source/working_with_javascript_in_rails.md @@ -188,15 +188,19 @@ bind to the `ajax:success` event. On failure, use `ajax:error`. Check it out: ```coffeescript $(document).ready -> - $("#new_article").on("ajax:success", (e, data, status, xhr) -> + $("#new_article").on("ajax:success", (event) -> + [data, status, xhr] = event.detail $("#new_article").append xhr.responseText - ).on "ajax:error", (e, xhr, status, error) -> + ).on "ajax:error", (event) -> $("#new_article").append "

ERROR

" ``` Obviously, you'll want to be a bit more sophisticated than that, but it's a start. +NOTE: As of Rails 5.1 and the new `rails-ujs`, the parameters `e, data, status, xhr` +have been bundled into `event.detail`. + #### link_to [`link_to`](http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to) @@ -225,7 +229,7 @@ and write some CoffeeScript like this: ```coffeescript $ -> - $("a[data-remote]").on "ajax:success", (e, data, status, xhr) -> + $("a[data-remote]").on "ajax:success", (event) -> alert "The article was deleted." ``` @@ -343,39 +347,6 @@ This generates a form with: ``` -Dealing with Ajax events ------------------------- - -Here are the different events that are fired when you deal with elements -that have a `data-remote` attribute: - -NOTE: All handlers bound to these events are always passed the event object as the -first argument. The table below describes the extra parameters passed after the -event argument. For example, if the extra parameters are listed as `xhr, settings`, -then to access them, you would define your handler with `function(event, xhr, settings)`. - -| Event name | Extra parameters | Fired | -|---------------------|------------------|-------------------------------------------------------------| -| `ajax:before` | | Before the whole ajax business, aborts if stopped. | -| `ajax:beforeSend` | xhr, options | Before the request is sent, aborts if stopped. | -| `ajax:send` | xhr | When the request is sent. | -| `ajax:success` | xhr, status, err | After completion, if the response was a success. | -| `ajax:error` | xhr, status, err | After completion, if the response was an error. | -| `ajax:complete` | xhr, status | After the request has been completed, no matter the outcome.| -| `ajax:aborted:file` | elements | If there are non-blank file inputs, aborts if stopped. | - -### Stoppable events - -If you stop `ajax:before` or `ajax:beforeSend` by returning false from the -handler method, the Ajax request will never take place. The `ajax:before` event -is also useful for manipulating form data before serialization. The -`ajax:beforeSend` event is also useful for adding custom request headers. - -If you stop the `ajax:aborted:file` event, the default behavior of allowing the -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. @@ -405,6 +376,18 @@ document.body.addEventListener('ajax:success', function(event) { }) ``` +### Stoppable events + +If you stop `ajax:before` or `ajax:beforeSend` by returning false from the +handler method, the Ajax request will never take place. The `ajax:before` event +is also useful for manipulating form data before serialization. The +`ajax:beforeSend` event is also useful for adding custom request headers. + +If you stop the `ajax:aborted:file` event, the default behavior of allowing the +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. + Server-Side Concerns -------------------- -- cgit v1.2.3 From a6b0930ff164701e208308d9c23e36e6d05d5ae2 Mon Sep 17 00:00:00 2001 From: Dimitri Roche Date: Fri, 13 Oct 2017 09:05:12 -0400 Subject: Update documentation to lead with ajax param `event.detail` --- guides/source/working_with_javascript_in_rails.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'guides') diff --git a/guides/source/working_with_javascript_in_rails.md b/guides/source/working_with_javascript_in_rails.md index f8cfac3995..fc9d3d0ce3 100644 --- a/guides/source/working_with_javascript_in_rails.md +++ b/guides/source/working_with_javascript_in_rails.md @@ -198,8 +198,9 @@ $(document).ready -> Obviously, you'll want to be a bit more sophisticated than that, but it's a start. -NOTE: As of Rails 5.1 and the new `rails-ujs`, the parameters `e, data, status, xhr` -have been bundled into `event.detail`. +NOTE: As of Rails 5.1 and the new `rails-ujs`, the parameters `data, status, xhr` +have been bundled into `event.detail`. For information about the previously used +`jquery-ujs` in Rails 5 and earlier, read the [`jquery-ujs` wiki](https://github.com/rails/jquery-ujs/wiki/ajax). #### link_to @@ -376,12 +377,16 @@ document.body.addEventListener('ajax:success', function(event) { }) ``` +NOTE: As of Rails 5.1 and the new `rails-ujs`, the parameters `data, status, xhr` +have been bundled into `event.detail`. For information about the previously used +`jquery-ujs` in Rails 5 and earlier, read the [`jquery-ujs` wiki](https://github.com/rails/jquery-ujs/wiki/ajax). + ### Stoppable events If you stop `ajax:before` or `ajax:beforeSend` by returning false from the handler method, the Ajax request will never take place. The `ajax:before` event -is also useful for manipulating form data before serialization. The -`ajax:beforeSend` event is also useful for adding custom request headers. +can manipulate form data before serialization and the +`ajax:beforeSend` event is useful for adding custom request headers. If you stop the `ajax:aborted:file` event, the default behavior of allowing the browser to submit the form via normal means (i.e. non-Ajax submission) will be -- cgit v1.2.3