Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
张重言
rails
提交
1debdb09
R
rails
项目概览
张重言
/
rails
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
R
rails
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
未验证
提交
1debdb09
编写于
11月 25, 2017
作者:
V
Vipul A M
提交者:
GitHub
11月 25, 2017
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #30881 from dimroc/master
Update documentation to lead with ajax param `event.detail` [ci skip]
上级
b1bbbdd5
a6b0930f
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
24 addition
and
36 deletion
+24
-36
guides/source/working_with_javascript_in_rails.md
guides/source/working_with_javascript_in_rails.md
+24
-36
未找到文件。
guides/source/working_with_javascript_in_rails.md
浏览文件 @
1debdb09
...
...
@@ -188,15 +188,20 @@ 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"
,
(
e
vent
)
->
$
(
"#new_article"
).
append
"<p>ERROR</p>"
```
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
`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
[
`link_to`
](
http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to
)
...
...
@@ -225,7 +230,7 @@ and write some CoffeeScript like this:
```
coffeescript
$
->
$
(
"a[data-remote]"
).
on
"ajax:success"
,
(
e
,
data
,
status
,
xhr
)
->
$
(
"a[data-remote]"
).
on
"ajax:success"
,
(
e
vent
)
->
alert
"The article was deleted."
```
...
...
@@ -343,39 +348,6 @@ This generates a form with:
<input
data-disable-with=
"Saving..."
type=
"submit"
>
```
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 +377,22 @@ 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
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
canceled and the form will not be submitted at all. This is useful for
implementing your own Ajax file upload workaround.
Server-Side Concerns
--------------------
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录