I ended up using using the send
method to return errors to the page, and then I created a flash
function in javascript which flashes similar to how the server produces the message, and uses ICanHaz.js for generating the HTML.
In app/views/layouts/application_layout.ejs, I modified the div that contains the alerts to have the id flashMessage
:
<div class="large-10 columns white maincontent" id="divContent">
<% var flash = request.flash('info').pop(); if (flash) { %>
<div id="flashMessage" class="alert alert-info">
<a class="close" data-dismiss="alert">×</a>
<%- flash %>
</div>
<% } %>
<% flash = request.flash('error').pop(); if (flash) { %>
<div id="flashMessage" class="alert alert-error">
<a class="close" data-dismiss="alert">×</a>
<%- flash %>
</div>
<% }; %>
<%- body %>
</div>
Mustache template (for ICanHaz, ich.flash):
<div id="flashMessage" class="alert alert-{{type}}">
<a class="close" data-dismiss="alert">×</a>
{{msg}}
</div>
Javascript flash function:
function flash(type, msg) {
if (type == 'clear') {
$('#divContent #flashMessage').remove();
return;
}
if (!ich.hasOwnProperty('flash')) {
setTimeout(function () {flash(type, msg);}, 100);
return;
}
var result = ich.flash({ type: type, msg: msg});
if ($('#flashMessage').length > 0) {
$('#flashMessage').replaceWith(result);
} else {
$('#divContent').prepend(result);
}
}