rails - flash messages not displaying until page reload?

Question

I am playing around with render/redirects in my rails application, i have the following controller action

class MessagesController < ApplicationController

 def create
    @message = Message.new(body: params[:message])
    if @message.save
      head :created
    else
      flash[:notice] = "failed!"
      render "home/index"
    end

  end

here is my home/index.html.erb file

<% if flash[:notice] %>
    <div class="notice"><%= flash[:notice] %></div>
  <% end %>

<form>
  <textarea name="message" id="message" placeholder="Type your message..."></textarea>
  <input type="submit"></input>
</form>

I am submitting the form with jquery:

$(document).ready(function(){
  $('form').submit(function(e){
    e.preventDefault();
    var message_body = $('#message').val();
    $('#message').val('');
    $('#message').focus();
     $.ajax({
       url:    '/messages',
       method: 'post',
       data:   {message: message_body}
     });
  });
});

I have a validation in my form model that ensures that the message body cant be blank validates :body, presence: true

So when i create an empty message and hit submit, it renders the home/index template. (as it should)

Inside chrome, in the preview/response tabs of dev console i can see the flash message, however in my actual application, i cant see the flash notice until i refresh the page.. then it shows up.

Am i mis-understanding something about the ways pages are rendered/the differences between render/redirect_to or is this a turbo links issue ? I tried removing turbo links by removing //= require turbolinks from my application.js file and restarting my server.. still the same issue .

Any ideas ?

Tim Kretschmer · Accepted Answer · 2015-09-28 17:44:31Z

3

you defenitely misunderstand something about how flash_messages are dealing in rails.

the flash message is a one-timer for a rendering or a redirect (and then rendering).

if you set a flash[:notice] , the next time rails is rendering something, the flash_message will be available (and straight after it will be gone).

since you want to submit the form async, you should return the status, and then inside your ajaxcall you can go by the statuscodes and give some feedback for the user

something like this is possible (untested)

ajax({url, method, statusCodes: function() {
 200: function() {
   //success
 },
 500: function() {
  //failure
 }
});

and then inside your controller give back a 500 http code and the errors of the object

else
  render status: 500, json: {errors: @message.errors}
end

answered Sep 28, 2015 at 17:44

Tim Kretschmer

2,2911 gold badge22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TABISH KHAN Over a year ago

thanks, but how would i then access the @message.errors inside my ajax statuscode function ?

Tim Kretschmer Over a year ago

well, just givien 500: functon(data) and then make a console.log(data) and you will see how you can use that. actually its just a json, so you can then just go in and for each key, take the error message and print that out

Tim Kretschmer Over a year ago

u will like this, for sure! stefan.haflidason.com/…

TABISH KHAN · Accepted Answer · 2015-09-28 19:58:37Z

0

After playing around with this for a bit, and with help from the answers this is how i solved this :

My messages controller:

 def create
    @message = Message.new(body: params[:message])
    if @message.save
      head :created
    else
      render status: 422, json: { errors: @message.errors.full_messages}
    end
  end

My ajax call:

$(document).ready(function(){
  $('form').submit(function(e){
    e.preventDefault();
    var message_body = $('#message').val();

    $('#message').val('');
    $('#message').focus();

    $.ajax({
      url:      '/messages',
      method:   'post',
      data:     {message: message_body},

      error: function(data){
        console.log(data);
          var response = jQuery.parseJSON(data.responseText);
          var error_message = response.errors.join("\n");
          alert(error_message);
      }

    }); //end of ajax function 

  });   //end of submit function

});     //end of document.ready

answered Sep 28, 2015 at 19:58

TABISH KHAN

1,6231 gold badge20 silver badges33 bronze badges

1 Comment

Tim Kretschmer Over a year ago

well, ya, something like that. i personally dont go for success and error , instead i go for statusCodes, but you are throwing a 422 and that is defenitely a wrong (!) statusCode for what you are doing. a 422 is Unprocessable Entity. You should rather throw a 500 (which is also what rails is throwing default if "something went wrong")

Collectives™ on Stack Overflow

rails - flash messages not displaying until page reload?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related