Rails how to create Jquery flash message instead of the default rails message

Question

I want to create a custom Jquery message instead of the standard rails flash message at the top of my page. I want to create a flash message near my vote up bottom.

My controller:

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

My view:

<% @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-style notification put background with alfa-channel for best look

#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

It kind of depends on what you mean by a custom JQuery message. If for example you have a partial that takes a message and renders it in some way, then you might have something like

<% 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 %>

and then in your partials you can have something like

<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>

Mind you, if you want to use flash messages in your application, you should always put them in a partial somewhere and stick it in your application wide view in layouts/application.html.erb so you can generalize the functionality.