Simple dynamic flash messages for JSON based apps

dynamic_flash.css.scss

$flash_width: 400px;
$distance_from_relative_anchor: 65px;
$left_offset: 0 - $flash_width / 2;

.flash_container {
  position: absolute;
  top: $distance_from_relative_anchor;
  left: 50%;
  width: $flash_width;
  margin: {left: $left_offset;}
  color: white;

  div {
    min-height: 20px;
    border-radius: 5px;
    padding: 5px;
  }
  .flash_notice {
    background-color: green;
  }

  .flash_error {
    background-color: red;
  }
}

dynamic_flash.js.coffee

class DynamicFlash extends Backbone.View

  events: {}

  messages: []
  
  initialize: (opts = {}) ->
    @el= opts.el || $ "#flash_container"
    @el.addClass "flash_container"
    $(document.body).on "ajax:complete", "form", @showFlashMessage
    $(document.body).on "ajax:error", "form", @showFlashMessage
    super

  render: () ->

  showFlashMessage: (e, xhr, response) =>
    respObj = $.parseJSON xhr.responseText
    message = respObj.message
    #we are assuming a response object with 'status', 'message' and 'errors' keys
    if (respObj.status == "created" or respObj.status == "ok")
      $(@el).html "<div class='flash_notice'>#{ message || "OK" }</div>"
    else if respObj.errors
      $(@el).html "<div class='flash_error'>#{ message || "Error" }</div>"
    $(@el).fadeIn(120)
    setTimeout ()=>
      $(@el).fadeOut(500)
    , 5000

(exports ? this).DynamicFlash = DynamicFlash

projects_controller.rb

format.json { render json: { model: @project,
                             status: 'created',
                             message: t("messages.projects.create") } 
}