Rails 通过 ajax 闪烁通知

Question

长话短说，我有一个按钮。单击它时，我希望触发一个 ajax 请求，该请求获取 flash[:notice] 并将其显示在 $ 中的 div 中

这是我的简化视图：

 <input type="button" id="search" value="display"/>

 <div id="notice">

 </div>

视图中我的ajax请求：

$("#search").submit(function(){
                            $.ajax({
                                type: "POST",
                                url: //url to my show action
                                success: function(data){
                                      /*$("#notice").html("<%= flash[:notice] %>");
                                        $("#content").html(data);*/
                                }
                            });
                            return false;
                    });

我的控制器：

def HomeController <  ActionController::Base
  def index

  end

  def show
    respond_to do |format|
    format.js {  flash[:notice] = "" + count.to_s + " results found for " + params[:query][:search_key] + "" }
    end
    #render :partial => 'search'
  end
end

我的show.js.erb

#app/views/dashboard_home/show.js.erb
$("#notice").html("<%=j flash[:notice] %>");

$("#content").html("<%=j render partial: "search" %>");

问题是当我点击按钮时，通知显示正常。但同样的通知也会在下一次点击时持续存在。搜索部分包含表格请帮助！

Answer 1

会话

同样的通知也会在下次点击时持续存在

这是因为flash 是stored in the session variable of Rails：

flash 是会话的特殊部分，每次都会清除 要求。这意味着存储在那里的值只能在 下一个请求，这对于传递错误消息等很有用。

您遇到的问题是，由于我不认为 ajax 算作新请求（需要对此进行参考），因此数据将持续到您下次通过 HTTP 请求时。

--

修复

我最初会尝试这个：

def show
    respond_to do |format|
        format.js {  flash[:notice] = "my secret number "+rand(0,5)+" !" }
    end
end

您遇到的主要问题是您正在使用ERB 预处理器在您的JS 中处理flash 变量。这是一个问题，因为这意味着您将无法使用资产预编译来帮助它工作。

看了this question，不如试试after_filter callback，像这样：

#app/controllers/home_controller.rb
Class Home < ActionController::Base
   after_filter { flash.discard if request.xhr? }, only: :show

    def show
        respond_to do |format|
            format.js {  flash[:notice] = "my secret number "+rand(0,5)+" !" }
        end
    end
end

--

更新

您应该在您的show.js.erb 中包含success 功能：

#app/views/home/show.js.erb
$("#notice").html("<%= flash[:notice] %>");

这意味着您可以从application.js 中删除整个ajax 调用，并用remote: true 替换您的搜索表单：

#app/views/search/index.html.erb
<%= form_tag home_show_path, remote: true %>

之所以如此，是因为当您使用format.js 响应块时，Rails 会在您的视图中加载[action].js.erb 文件。考虑到这只发生在动作完成之后，它相当于你的ajax的success函数。

通过这样做，您将能够从您的 application.js 中删除整个 ajax 函数，并替换为 UJS 版本，如上所述

Answer 2

感谢 Rich Peck 的回答，这是我开始工作的一个示例。我需要使用 flash.now 来确保 Flash 通知不会持续存在。

视图中的 AJAX 触发器：

<%= link_to "Email report", users_path, remote: true %>

控制器：

# app/controllers/users_controller
class UsersController < ApplicationController

  def index
    # do some things here

    respond_to do |format|
      format.js { flash.now[:notice] = "Here is my flash notice" }
    end
  end
end

渲染视图：

# app/views/users/index.js.erb
$("#flash").html('<%= j render partial: "shared/notice_banner" %>');

flash 通知在布局中的显示位置：

# app/views/layouts/application.html.erb
<div id="flash">
  <% if notice.present? %>
    <%= render partial: "shared/notice_banner" %>
  <% end %>
</div>


# app/views/shared/_notice_banner.html.erb
<div data-alert class="alert-box">
  <%= notice %>
  <a href="#" class="close">&times;</a>
</div>