diff options
Diffstat (limited to 'guides/source/working_with_javascript_in_rails.md')
| -rw-r--r-- | guides/source/working_with_javascript_in_rails.md | 33 |
1 files changed, 31 insertions, 2 deletions
diff --git a/guides/source/working_with_javascript_in_rails.md b/guides/source/working_with_javascript_in_rails.md index 047aeae37d..ed27752a06 100644 --- a/guides/source/working_with_javascript_in_rails.md +++ b/guides/source/working_with_javascript_in_rails.md @@ -250,7 +250,7 @@ Since it's just a `<form>`, all of the information on `form_with` also applies. ### Customize remote elements It is possible to customize the behavior of elements with a `data-remote` -attribute without writing a line of JavaScript. Your can specify extra `data-` +attribute without writing a line of JavaScript. You can specify extra `data-` attributes to accomplish this. #### `data-method` @@ -351,7 +351,7 @@ 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 exemple, if the extra parameters are listed as `xhr, settings`, +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 | @@ -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 -------------------- |