From c9527652c753dd8fe3ac120a05f5e80d6d691346 Mon Sep 17 00:00:00 2001 From: Yauheni Dakuka Date: Mon, 18 Sep 2017 09:38:47 +0300 Subject: Fix quotes [ci skip] --- guides/source/working_with_javascript_in_rails.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'guides/source/working_with_javascript_in_rails.md') diff --git a/guides/source/working_with_javascript_in_rails.md b/guides/source/working_with_javascript_in_rails.md index 27cef2bd27..098366ec1b 100644 --- a/guides/source/working_with_javascript_in_rails.md +++ b/guides/source/working_with_javascript_in_rails.md @@ -382,7 +382,7 @@ 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. +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. -- cgit v1.2.3 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/source/working_with_javascript_in_rails.md') 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 1ac2a2292f1010662f83906b97d046974409c948 Mon Sep 17 00:00:00 2001 From: Yoshiyuki Hirano Date: Sun, 15 Oct 2017 02:11:18 +0900 Subject: Add accept-charset to the output of form_with in JS guide [ci skip] --- guides/source/working_with_javascript_in_rails.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'guides/source/working_with_javascript_in_rails.md') diff --git a/guides/source/working_with_javascript_in_rails.md b/guides/source/working_with_javascript_in_rails.md index 098366ec1b..b2716c7faa 100644 --- a/guides/source/working_with_javascript_in_rails.md +++ b/guides/source/working_with_javascript_in_rails.md @@ -174,7 +174,7 @@ passing the `:local` option `form_with`. This will generate the following HTML: ```html -
+ ...
``` -- 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/source/working_with_javascript_in_rails.md') 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 From b6baf0c88411824ce99f1ad4b9de64fa37ad96ea Mon Sep 17 00:00:00 2001 From: Yauheni Dakuka Date: Thu, 30 Nov 2017 09:25:50 +0300 Subject: Cosmetic changes [ci skip] --- guides/source/working_with_javascript_in_rails.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'guides/source/working_with_javascript_in_rails.md') diff --git a/guides/source/working_with_javascript_in_rails.md b/guides/source/working_with_javascript_in_rails.md index 86746a5ae0..c3dff1772c 100644 --- a/guides/source/working_with_javascript_in_rails.md +++ b/guides/source/working_with_javascript_in_rails.md @@ -492,7 +492,7 @@ replace the entire `` of the page with the `` of the response. It will then use PushState to change the URL to the correct one, preserving refresh semantics and giving you pretty URLs. -The only thing you have to do to enable Turbolinks is have it in your Gemfile, +The only thing you have to do to enable Turbolinks is have it in your `Gemfile`, and put `//= require turbolinks` in your JavaScript manifest, which is usually `app/assets/javascripts/application.js`. -- cgit v1.2.3