kotovalexarian-likes-github/rails--rails
1
0
Fork 0
mirror of https://github.com/rails/rails.git synced 2022-11-09 12:12:34 -05:00
Code Releases Activity

Updated working with javascript readme to support the behavior of rails-ujs.

Browse source
This commit is contained in:
Dmytro Vasin 2017-06-13 08:37:03 +03:00
parent 42a8072193
commit 0cd957ef45
1 changed files with 29 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
guides/source/working_with_javascript_in_rails.md
View file

@ -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 canceled and the form will not be submitted at all. This is useful for
implementing your own AJAX file upload workaround. 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 have changed.
Unlike the version with jqeury, all custom events return only one parameter: `event`.
In this parameter, there is an additional attribute `details` 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 Server-Side Concerns
-------------------- --------------------