模态关闭时不显示Flash消息

Question

所以我有一个模式，用户可以在其中输入电子邮件地址来邀请别人，点击按钮后，会发出ajax请求发送电子邮件。在发送电子邮件之后，它应该闪烁成功消息，但即使响应表明它已成功，它也不会闪烁。

我的ajax代码：

$.ajax({ 
  url: '/send_invite_email',
  type: 'POST',
  data: {"emails": $(".email-input").val()},
  success: function() {
    $('#invite-modal').modal('hide');
  }
});

InvitesController：

def send_invite_email
   @emails = params[:emails]
   @invited_by = current_user.id
   for email in @emails.split(/[\s,]+/)
     InvitationMailer.invite(email, @invited_by).deliver_later
     next if Invitation.find_by_invited_by_and_invitee(@invited_by, email)
     Invitation.create! invited_by: @invited_by, invitee: email
   end
   respond_to do |format|
     format.html { 
        flash[:success] = 'Invitation email sent!'
        redirect_to about_path
     }
     format.js
   end
end

Answer 1

您没有对响应做任何事情。首先，您需要向成功处理程序添加一个参数，以便能够访问数据，然后在处理程序中对数据执行某些操作

$.ajax({ 
  url: '/send_invite_email',
  type: 'POST',
  data: {"emails": $(".email-input").val()},
  success: function(serverResponse) {
    // do something with response
    alert( serverResponse);

    $('#invite-modal').modal('hide');
  }
});

参考$.ajax docs

Answer 2

<强>会话

作为charlietfl答案的补充，sessions不会通过Javascript传递，因此在您当前的实现中，根本不会传递“flash”。

  

Flash是会话的一个特殊部分，会随每个请求清除。这意味着存储在那里的值只能在下一个请求中使用，这对于传递错误消息等非常有用。

由于会话（of which flash is a part）在客户端和服务器之间共享（IE服务器设置用户的会话变量），因此无法通过纯粹的ajax请求“传递”会话变量。

相反，你要么必须手动传递数据，要么使用服务器端的JS（看起来你正在做的事情）：

#app/controllers/invites_controller.rb
class InvitesController < ApplicationController
   def send_invite_email
      flash[:success] = 'Invitation email sent!'
      respond_to do |format|
        format.js #-> app/views/invites/send_invite_email.js.erb
        format.html {  redirect_to about_path }
      end
   end
end

这将允许您使用以下内容：

app/views/invites/send_invite_email.js.erb
$("element").html("<%j flash[:success] %>");

<强>的Ajax

在您当前的设置中，您使用的是标准ajax。

Ajax代表Asynchronous Javascript And XML - 意味着它意味着将异步请求发送到您的服务器（IE请求超出标准页面加载范围）：

这意味着您发送到服务器的每个请求都会遇到响应，您必须处理这些请求。你目前没有这样做：

$.ajax({ 
  url: '/send_invite_email',
  type: 'POST',
  data: {"emails": $(".email-input").val()},
  success: function(data) {
    // "data" is the response which you'll be able to use in your DOM
  }
});

因为Ajax是异步的，所以它不能使用flash或任何其他服务器端代码（因为这需要加载到前端才能工作）。

简单地说，您不会通过ajax从服务器获取任何页面重定向或闪存。如果您想要标准功能（IE的应用程序根据控制器代码“重定向”等），请不要使用ajax。

如果你想发送ajax请求和有重定向等 - 你最好使用respond_to附带的服务器端JS。我为此编写了代码。