使用Javascript和Rails一起使用Bootbox显示警告对话框

时间:2014-08-26 14:09:24

标签: javascript ruby-on-rails-4 bootbox

我是Rails的新手,并且在成功签署网站时一直试图显示成功消息。一直登录成功后,我一直在尝试使用bootbox.js来显示存储在ruby哈希中的消息 - 不幸的是我甚至更新了Javascript,当我创建一个成功的登录时,我无法获得任何一个bootbox要显示的内容。下面的代码显示了我想要显示消息的位置。

<div class="sidebar pull-left">
  <!-- sidebar -->
  <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
    <div class="list-group">
      <span class="fa-stack fa-lg">
      <i class="fa fa-square-o fa-stack-2x"></i>
      <%= link_to '', root_path, class: "fa fa-home fa-fw fa-stack-1x" %>
      </span>
      <span class="fa-stack fa-lg">
      <i class="fa fa-square-o fa-stack-2x"></i>
      <%= link_to '', help_path, class: "fa fa-question fa-fw fa-stack-1x" %>
      </span>  
    </div>
  </div>
</div>
<div class="main-content">
  <%= content_tag :div, class: "flash_messages", data: {flash: flash} do %>
  <% end %>

  <% content_for :alert do %>
    <script type="text/javascript">
      <%= render 'users/show_flash_messages.js' %>
    </script>
  <% end %>

  <% flash.each do |key, value| %>
    <%= yield :alert %>
  <% end %>  
  <%= yield %>
</div>

我用       &lt;%= content_tag:div,class:“flash_messages”,数据:{flash:flash} do%&gt;       &lt;%end%&gt; 将哈希内部的数据传递给客户端上的javascript数组。 ruby哈希在控制器中初始化:

  def create
    @user = User.new(user_params)
    if @user.save
      # sign_in @user 
      flash[:success] = "Welcome!"
      redirect_to @user
    else
      render 'new'
    end
  end

然后我在users.js.coffee中创建了一个方法,我希望通过从js数组中获取所需信息,使用bootbox警告对话框显示警报:

Messages = flashMessage: (flash) ->
flash_message = flash[1]
bootbox.alert flash_message
return

我在javascript中写了这个,然后使用转换器将其转换为coffeescript(这应该有用吗?)。然后我有一个名为_show_flash_messages.js.erb的rails javascript文件,我调用flashMessage函数。

$(function() {
    messages = $('.flash_messages').data('flash');
    Messages.flashMessage(messages);
});

我已经能够在引导程序警报中显示信息,但我首选的是使用这些引导程序对话框来显示信息。就像我说我是Rails的新手,这是我第一次尝试正确整合javascript,所以很可能我错过了一些明显的东西。

作为参考,这是对话框希望显示在以下页面上的页面的HTML:

<% provide(:title, @user.name) %>
<div class="center hero-unit">
    <div class="user-profile">
      <span class="user-header">
        <%= gravatar_for @user %>
        <h2>
            <%= @user.name %>
        </h2>
      </span>
      <span id="page-content">
        <p>
            This is where a short biography will go.
        </p>
      </span>
    </div>
</div>

0 个答案:

没有答案