The flash provides a way to pass temporary objects between actions. Anything you place in the flash will be exposed to the very next action and then cleared out. This is a great way of doing notices and alerts, such as a create action that sets flash[:notice] = "Successfully created" before redirecting to a display action that can then expose the flash to its template. Actually, that exposure is automatically done. But not closing or removing and that flash message will be there till the view is refreshed or a new action is served.

In one of my recent applications I figured a way to add close link to make flash message disappear. Of course, you can employ JavaScript to automatically hide the flash div's after certain time. But, I choose to give an explicit close button / link. In my application template:

<% flash.each do |name, msg| %>
	<%= content_tag :div, :id => "flash_#{name}" do %>
		<%= msg %>
		<%= content_tag :span, :style => "float: right;" do %>
			<%= link_to_function image_tag('icons/cross.png'), 
			:onclick => "document.getElementById('flash_#{name}').style.display='none'" %>
		<% end %>
	<% end %>
<% end %>

A little styling:

#flash_notice, #flash_error, #flash_alert {
	padding: 5px 8px;
  	margin: 10px 0;
}

#flash_notice {
	background-color: #FAF0E6;
	border: solid 1px #5D871B;
	color: #5D871B;
}

#flash_error, #flash_alert {
	background-color: #FAF0E6;
	border: solid 1px #5D871B;
	color: #5D871B;
}

You need to have a image 'cross.png' in your 'images/icons'. And the outcome of is:

blog comments powered by Disqus