Rails doesn't display flash messages after ajax call

I'd like to weigh in as the need to pass messages to the header seemed like a round-a-bout way of doing something Rails should already be capable of.

After several hours of searching I realized I was already doing what needed to be done by passing the following lines in my controller:

flash[:error] = "My flash message error."

respond_to do |format|
  format.js 
end

The flash[:error] sets the Flash message for the following view, the respond_to realizes that I have remote: true set in my link_to (original ajax request):

<%= link_to "My Ajax Request", some_path(@some_value), remote: true %>

and responds to the link as JavaScript. You can include format.html in this block if you still want to have the ability to call that same controller without remote set to true.

In my application.html.erb I have a partial that renders flash messages:

<%= render "layouts/flash_notices" %>

and that partial contains a div that looks like the following:

<div id="flash_messages">
  <% flash.each do |type, message| %>
    <p><%= type %>: <%= message %></p>
  <% end %>
</div>

Finally I created a view called MY_CONTROLLER_ACTION_NAME.js.erb and inserted:

<% flash.each do |type, message| %>
  $("#flash_messages").html("<%= type.to_s.humanize %>: <%= message.html_safe %>")
<% end %>

Now when I click my AJAX enabled link, the controller action is executed, the flash message is set, the controller loads the js.erb view and finally, the javascript to replace the contents of my div with id="flash_messages" is executed. My original view is updated with the flash message and all is right with the world.

Note: If you're using Bootstrap or some other special CSS framework you can include that code in the js.erb file's $("#flash_messages').html(" "); call. I included my Bootstrap code as follows:

$("#flash_messages').html("<div class='alert <%= bootstrap_class_for(type) %> alert-dismissible' role='alert'><button class='close' data-dismiss='alert'>×</button><%= message.html_safe %></div>")

I know this question was posted several months ago, but when searching for this exact issue the response always seems to be that you need to send the flash messages via the headers. I wanted to show there is another method. Hopefully this will help my fellow Rails newbies of the future!

Firstly, thanks for comprehensive question

Here is an equally comprehensive answer: How do you handle Rail's flash with Ajax requests?

---

Ajax

I'd seriously look at your Ajax refresh process. Refreshing the whole page is super inefficient, and I think covering a deeper issue

Why don't you try using a .js.erb file in the views folder, to handle JS directly by the method:

def set_conflicts
  @conflict = @member.conflicts.for_date(params[:date]).first

  if @conflict
    @conflict.destroy
  else
    conflict_date = Date.parse(params[:date])
    unless Conflict.create(
        month: conflict_date.month,
        day:   conflict_date.day,
        year:  conflict_date.year,
        member: @member
    )
      flash[:alert] = 'Oops, there was a problem updating conflicts'
    end
  end
  flash[:notice] = 'This is a test!'

  respond_to do |format|
      format.html { redirect_to manage_member_conflicts_path(@member) }
      format.js 
  end
end

#app/views/controller/set_conflicts.js.erb
$("#your_element").html(<%=j render manage_member_conflicts_path(@member) ) %>);

---

Response

Although I don't know this for sure, I know the Flash objects are handled by ActionDispatch::Flash middleware. I believe this is not handled for XHR in the same way as standard HTTP requests, consequently preventing Flash from being shown in your response

This means you'll have to do something to pass the Flash object through your Ajax request. And according to the question I posted at the top of this answer, you can use the response headers to do it:

class ApplicationController < ActionController::Base
after_filter :flash_to_headers

def flash_to_headers
  return unless request.xhr?
  response.headers['X-Message'] = flash[:error]  unless flash[:error].blank?
  # repeat for other flash types...

  flash.discard  # don't want the flash to appear when you reload page
end

$(document).ajaxError(function(event, request) {
  var msg = request.getResponseHeader('X-Message');
  if (msg) alert(msg);
});