Ruby on Rails阻止Turbolinks劫持AJAX操作

我正在按照RoR入门指南进行操作并添加一些内容。 具体来说，我想要实现的是，在步骤5.13删除文章中 ，我使用AJAX而不是使用标准模式删除了一篇文章。

我想以最符合RoR做事方式的方式这样做。 阅读使用Rails章节中的JavaScript后 ，以下步骤似乎是要走的路：

1. 将属性remote: true添加到link_to帮助程序（请参阅代码段A）
2. 通过添加data: {turbolinks: false}禁用turbolinks这个link_to帮助data: {turbolinks: false} （参见代码片段A）
3. 向控制器添加一些逻辑，确保返回JSON（参见代码片段B）。
4. 添加侦听ajax:success事件的JavaScript，然后将项目设置为动画（请参阅代码段C）。

片段A.

  'remove-article' %> 

代码片段B.

 def destroy @article = Article.find(params[:id]) respond_to do |format| if @article.destroy format.html { redirect_to articles_path } format.json { render json: @article } else format.html { render action: "index" } format.json { render json: @article.errors, status: :unprocessable_entity } end end end 

代码片段C.

 (function(){ $(document).on('turbolinks:load', listenForArticleDelete); function listenForArticleDelete() { $('a.remove-article').on('ajax:success', function(e, data, status, xhr) { // e.preventDefault(); console.log('DELETE: AJAX SUCCESS', e, '\n', data, '\n', status, '\n', xhr); }); } })(); 

这不像我预期的那样工作：

• turbolinks禁用无效：它仍在替换整页内容。
• 事件ajax:success触发ajax:success事件但是当我检查该事件的data属性时，我看到了一些奇怪的东西。 它似乎是Turbolinks即将完成的工作的文本表示（？！）。 Turbolinks.clearCache() Turbolinks.visit("http://localhost:3000/articles", {"action":"replace"})

我显然是这样做错了。 有人可以向我解释我应该怎么做吗？ 我不只是如何让它工作，而且还是以惯用的RoR方式？

---

编辑

我发现哪个部分是罪魁祸首：它是Snippet B，因为format.html是在format.json之前运行的。 只需切换这两个就解决了这个问题：

修订后的片段A：

   'remove-article' %>   'remove-article' %> 

修订后的片段B：

 def destroy @article = Article.find(params[:id]) respond_to do |format| if @article.destroy # Must place json before html, otherwise html will be executed format.json { render json: @article } format.html { redirect_to articles_path } else format.json { render json: @article.errors, status: :unprocessable_entity } format.html { render action: "index" } end end end 

Answer 1

我个人会以不同的方式来到这里。

查看：触发ajax调用删除文章

 <%= link_to 'Destroy default', article, method: :delete, :remote => true, :class=> 'remove-article' %> 

控制器：

 def destroy @article.destroy respond_to do |format| format.js end end 

这将处理destroy方法并返回javascript，默认情况下，它将返回相关目录中的destroy.js.erb文件

destroy.js.erb：

 $("#article").slideToggle(300, function(){ $("#article").remove(); }); 

仅供参考： http ： //api.jquery.com/slidetoggle/

希望这有点帮助

Answer 2

尝试修改您的代码段A并使用no_turbolink：true

片段A.

 <%= link_to 'Destroy', article_path(article), method: :delete, data: {no_turbolink: true, remote: true}, :class=> 'remove-article' %> 

生成的链接html应该包含以下代码：

 data-no-turbolink="true" 

编辑：添加数据-no-turbolink =“true”到标签，希望它有帮助，你的问题的根源是禁用turbolink，一旦我们实现它我认为你应该是好的。

选择退出Turbolink