Rails 如何创建 Jquery flash 消息而不是默认的 rails 消息

Question

我想在页面顶部创建自定义 Jquery 消息，而不是标准的 rails flash 消息。我想在我的投票底部附近创建一条 Flash 消息。

我的控制器：

def vote_up
  @post = Post.find(params[:id])
  current_user.up_vote(@post)
  flash[:message] = 'Thanks for voting!'
  redirect_to(root_path, :notice => 'Tak for dit indlæg, det er nu online!')
rescue MakeVoteable::Exceptions::AlreadyVotedError
  flash[:error] = 'Already voted!'
  redirect_to root_path
end

我的看法：

<% @posts.each do |post| %>
  <h1><%= post.titel %></h1>
  <p><%= post.body_html %></p>
  <p><%= link_to 'Vote up', stem_op_path(post.id) %> BRUGERNAVN: <%= post.user.username %> | UPVOTES: <%= post.up_votes %> | DOWN VOTES: <%= post.down_votes %> OPRETTET: <%= post.created_at.strftime("%d %B") %><%= link_to 'Destroy', post, :confirm => 'Are you sure?', :method => :delete %></p>
  </tr>
<% end %>

Answer 1

Groupon 样式通知 将背景与 alfa 通道一起放置以获得最佳外观

#rails controller   
flash[:notice] = "Login successful!"



#rails helper
module ApplicationHelper
  def flash_notifications
    message = flash[:error] || flash[:notice]

    if message
      type = flash.keys[0].to_s
      javascript_tag %Q{$.notification({ message:"#{message}", type:"#{type}" });}
    end
  end

end



#rails layout
<%= flash_notifications -%>



#javascript code
(function( $, undefined ) {
    $.notification = function(options) {
        var opts = $.extend({}, {type: 'notice', time: 3000}, options);
        var o    = opts;

        timeout          = setTimeout('$.notification.removebar()', o.time);
        var message_span = $('<span />').addClass('jbar-content').html(o.message);
        var wrap_bar     = $('<div />').addClass('jbar jbar-top').css("cursor", "pointer");

    if (o.type == 'error') {
          wrap_bar.css({"color": "#D8000C"})
        };

        wrap_bar.click(function(){
            $.notification.removebar()
        });

        wrap_bar.append(message_span).hide()
            .insertBefore($('.container')).fadeIn('fast');
    };


    var timeout;
    $.notification.removebar    = function(txt) {
        if($('.jbar').length){
            clearTimeout(timeout);

            $('.jbar').fadeOut('fast',function(){
                $(this).remove();
            });
        }   
    };


})(jQuery);



#css
.jbar{
    height:50px;
    width:100%;
    position:fixed;
    text-align:center;
    left:0px;
    z-index:9999999;
    margin:0px;
    padding:0px;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=92); 
    opacity: 0.92;
    -moz-opacity: 0.92;
    -moz-box-shadow: #555 0px 0px 5px;
    box-shadow: #555 0px 0px 5px;
}

.jbar-top{
    top:0px;
}

.jbar-bottom{
    bottom:0px;
}

.jbar-content{
    line-height:46px;
    font-size: 18px;
}

.jbar-top a.jbar-cross{
    top:8px;    
}

.jbar-bottom a.jbar-cross{
    bottom:8px;
}

Answer 2

这取决于您所说的自定义 JQuery 消息的含义。例如，如果您有一个部分接收消息并以某种方式呈现它，那么您可能会有类似

<% if flash[:message] %>
    <%= render :partial => "path_to_success_partial", :locals => {:message => flash[:message]} %>
<% elsif flash[:error] %>
    <%= render :partial => "path_to_error_partial", :locals => {:message => flash[:message]} %>
<% end %>

<% @posts.each do |post| %>
    <h1><%= post.titel %></h1>
    <p><%= post.body_html %></p>
    <p><%= link_to 'Stem op', stem_op_path(post.id) %> BRUGERNAVN: <%= post.user.username %> | UPVOTES: <%= post.up_votes %> | DOWN VOTES: <%= post.down_votes %> OPRETTET: <%= post.created_at.strftime("%d %B") %><%= link_to 'Destroy', post, :confirm => 'Are you sure?', :method => :delete %></p>
    </tr>
<% end %>

然后在你的部分中你可以有类似的东西

<script type="text/javascript">
    $(document).ready(function() {
         //put stuff into your div here
         var errordiv = ".error";
         $(errordiv).css("border", "2px solid pink");
         $(errordiv).html(message);
         $(errordiv).animate({
             //some animation
         }, 500); 
    });
</script>
<div class="error"></div>

请注意，如果您想在您的应用程序中使用 Flash 消息，您应该始终将它们放在某个地方的部分位置，并将其粘贴在 layouts/application.html.erb 的应用程序范围视图中，以便您可以概括该功能。

Answer 3

如果你想要this 之类的东西。比你可以使用这个gem

Answer 4

我认为您将很难使用redirect_to root_path 获得一个优雅的解决方案。假设您的 root_path 控制器操作与 vote_up 在同一个控制器中，我会这样做：

# Assuming your root_path points to index
def index
  @posts = Post.all
end

def vote_up
  # You'll need to set up all the prerequisites for your index view here
  @posts = Post.all

  @post = @posts.detect {|post| post.id == params[:id]}
  begin
    current_user.up_vote(@post)
    redirect_to(root_url, :notice => 'Tak for dit indlæg, det er nu online!')
  rescue MakeVoteable::Exceptions::AlreadyVotedError
    @post.errors.add_to_base("Already voted!")
    render 'index'
  end
end

然后让你的视图变成这样：

<% @posts.each do |post| %>
  <% if post.errors.present? %>
    <div class="posterror"><%= post.errors.full_messages.to_sentence %></div>
  <% end %>
  <h1><%= post.titel %></h1>
  <p><%= post.body_html %></p>
  ...
<% end %>

然后使用 CSS 来设置 div.posterror 的样式，和/或 jQuery 来做一些花哨的效果，许多 jQuery 工具提示插件之一将是一个很好的开端。

最好的办法是制作vote_up AJAX。

Answer 5

您可以使用 flash[:notice] 或 flash[:error] 在视图中获取 flash 消息，并使用您喜欢的任何方式显示它。例如，

<p id='notice'>
   <%=flash[:notice]%>
</p>