Fixed flash messages reappearing

app/assets/javascripts/flash_messages.js

@@ -32,3 +32,15 @@ function flashMessage(flashType, message) {
     $flashDiv.hide({effect: "fade", duration: 1000});
   }, 5000);
 }
+
+$(document).on("ready page:load", function() {
+  $("#flashHolder").find("div").each(function(idx, div) {
+    var $div = $(div);
+    var type = $div.attr("class");
+    var message = $div.html();
+
+    $div.remove();
+
+    flashMessage(type, message);
+  });
+});

app/assets/stylesheets/flash_messages.scss

@@ -1,4 +1,8 @@
 
+#flashHolder {
+  display: none;
+}
+
 #flashContainer {
   position: fixed;
   width: 100%;

app/views/layouts/_flash_messages.html.erb

@@ -1,22 +1,10 @@
 <div id="flashContainer"></div>
 
-<% unless flash.empty? %>
+<div id="flashHolder">
-
+  <% flash.each do |type, values| %>
-  <script type="text/javascript">
+    <% Array.wrap(values).each do |value| %>
-    $(document).on("ready page:load", function() {
+      <div class="<%= type %>"><%= value %></div>
-      <%=
-        calls = []
-        flash.each do |key, value|
-          if value.respond_to? 'each'
-            value.each { |sub_value| calls << "flashMessage('#{j(key.to_s)}', '#{j(sub_value.to_s)}');" }
-          else
-            calls << "flashMessage('#{j(key.to_s)}', '#{j(value.to_s)}');"
-          end
-        end
-
-        raw(calls.join('\n'))
-      %>
-    });
-  </script>
-
     <% end %>
+  <% end %>
+</div>
+