Flash error from an ajax request in compoundjs

Question

I am trying to use flash('error', 'error text') to alert the webpage that an error has occurred via an ajax request. The ajax request hits an action where some database work is involved, and an error could be produced.

Controller:

load('application');

action('index', function() {
    this.title = 'Sample Page';
    render();
});

action('test', function() {
    flash('error', 'test error message');
    render('index', { title: 'Sample Page' });
});

Sample ajax call:

$.ajax({
    url: '/test-error',
    success: function(response) {
        console.log(response);
    },
    error: function(response) {
        console.log(response);
    }
});

Routes:

map.get('test', 'test-error#index');
map.get('test-error', 'test-error#test');

Is this even possible through an ajax call? I've tried using flash, followed by render('index') as shown above and have tried redirect(path_to.test); with no success. send(500, 'error message'); returns an error to the ajax call, which, if necessary, I could reload the page from there.

score 2 · Answer 1 · answered Sep 04 '13 at 17:35

the flash messages is usually made into html in the layout template (look in a generated application_layout). therefore, if you use render(), it will just generate the html and send it back to the client (with the error flash in it, IF you printed it out in the template).

if you want to send an error message from the server to the client, you can use send([msgNo]).

score 0 · Accepted Answer · answered Sep 13 '13 at 20:04

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);
    }
}

Flash error from an ajax request in compoundjs

2 Answers2