在提交轨道上的模式对话框中显示 Flash 消息

Displaying flash messages on modal dialog box on submit rails

本文关键字：显示 Flash 消息 对话框 模式 提交 轨道      更新时间：2023-09-26

我正在尝试构建用于在rails中注册电子邮件地址的模态框。我已经完成了，但注册失败时无法找到在模式对话框中显示 Flash 消息的方法。提交时，该框将关闭，消息仅显示在主页上。我对网络或轨道没有很好的了解，但如果能得到一些指示，那就太好了。

该功能工作正常，预期失败，对话框应在其上显示消息，而不是在主页上显示消息。我知道我的代码中哪里有问题，但不知道这样做的方法。这是我的对话框代码

   <div id="register" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <%= form_for(@email, url: home_esave_path, :html => {class:"model-dialog"}) do |f| %>
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Register</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <%= f.text_field :email, class:"form-control",  placeholder: "Enter a valid gmail address" %>
            </div>
            <%= f.show_simple_captcha(:email=>"email", :label => "Human Authentication", :refresh_button_text => "Refresh text", class:"form-control", :placeholder => "Enter the code") %>
            <%= f.submit "Register me!",  :class => "btn register_button" %>
          </div>
          <div class="modal-footer" style="text-align:left">
            <!-- show in case of success -->
            <% if @email.errors.any? %>
            <div id="error_explanation">
              <h2>
                <%= pluralize(@email.errors.count, "error") %> prohibited
                this email from being saved:
              </h2>
              <ul>
                <% @email.errors.full_messages.each do |msg| %>
                <li><%= msg %></li>
                <% end %>
              </ul>
            </div>
            <% end %>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
        <% end %>
      </div>
      </div>

用于获取消息的我的控制器代码

def save
@email = Email.new(user_params)
if !user_params.nil?
  if @email.save_with_captcha
    flash[:success] = "Success! The email address #{@email.email} has been successfully registered. We will contact you as soon as we have available rooms for new beta testers."
    redirect_to :action => 'index'
  else
    if @email.valid?
      flash[:error] = "The captcha is not correct, enter again the captcha."
      redirect_to :action => 'index'
    else
      flash[:error] = "You have put invalid #{@email.email}"
      redirect_to :action => 'index'
    end
  end
end

结束 我在此模型之外显示的Flash消息很明显，将显示在主页上。但是我没有找到在模型对话框中显示它的方法。

这是我显示消息的方式

  <% flash.each do |type, message| %>
      <div class="alert <%= alert_for(type) %> fade in">
        <button class="close" data-dismiss="alert">×</button>
         <span class="sr-only">Close</span>
        <%= message %>
      </div>
      <% end %>

感谢您的建议

Flash 被设计为在（控制器）操作之间传递数据的一种方式（有关更多信息，请参阅文档）。 在你的情况下，你特别不想要一个动作，所以我认为没有办法做到这一点。

但是，您可以使用 Ajax 生成一条看起来像其他 Flash 消息的消息。 这是一种方法。

您将需要以下组件：

来自模式的远程调用

在模态内向表单添加remote: true或:remote => true。 这告诉 Rails 您希望在提交表单时对服务器进行 Ajax 调用，而不是整页帖子。

控制器更改

您需要响应 HTML 以外的格式。 像这样：

def save
  if !user_params.nil?
    @email = Email.new(user_params)
    @email.save_with_captcha
    respond_to do |format|
      format.html { redirect_to @email, notice: 'This should not happen.' }
      format.json { render action: 'show' }
      format.js   { render action: 'show' }
    end
  end
end

Javascript用于在您的模态中插入/清除"flash"错误消息

查看文件 - show.js.erb（可以以不同的方式命名，但名称应与上面的操作匹配）。

$('#build_error').remove();
<% if @email.errors.any? %>
  var build_error = "<div class='alert alert-danger' id='build_error'>";
  build_error += "The form contains <%= pluralize(@email.errors.count, 'error') %>.";
  build_error +=   "<ul id='error_explanation'>";
  <% @email.errors.full_messages.each do |msg| %>
    build_error += "<li><%= j msg %></li>";
  <% end %>
  build_error +=   "</ul>";
  build_error += "</div>";
  $(build_error).insertBefore( "#xxxxxx" );
<% else %>
  $('#email-modal').modal_success();
<% end %>

基本上，您需要清除任何以前的"flash"错误消息（第一行），然后显示新的错误消息（您需要在DOM中的某个地方找到它来附加它 - 请参阅xxxxxx）或关闭模态。 蛮力很强，但它对我有用。

希望你明白这个想法 - 我怀疑这些中的任何一个都会按原样工作，所以你需要理解这个概念。

相关文章：