Simples Ideias

Exibindo mensagens no Rails

08/12/06

module ApplicationHelper
  def flash_message
    messages = ""
    [:notice, :info, :warning, :error].each {|type|
      if flash[type]
        messages += "<p class=\"#{type}\">#{flash[type]}</p>"
      end
    }
    
    messages
  end
end

flash[:notice] = "Informações salvas com sucesso."
flash[:warning] = "Preencha todos os campos obrigatórios."
flash[:error] = "Não foi possível salvar as informações."
flash[:info] = "Você tem mensagens não visualizadas."

<%= flash_message %>

#1 Yuri Malheiros disse:

08 Dez 06, 10:48PM

Bem bacana essa daqui...

Nesse caso ainda é necessário definir as classes que serão usadas pela tag , por exemplo, uma classe para notice, outra para warning e assim sucessivamente?

#2 Walter Cruz disse:

09 Dez 06, 09:20AM

Muito bacana isso! Valeu pela dica.

#3 Nando Vieira disse:

09 Dez 06, 03:38PM

Yuri, você que precisa formatar a mensagem. Este método apenas cria o HTML.

#4 roberto disse:

09 Dez 06, 07:03PM

Muito bom, parabens, o mais interessante é ver nós brazucas metendo bronca no rails... e com certeza nossa fama de ótimos criadores está no mundo todo....

#5 Davis disse:

11 Dez 06, 10:07AM

Eu tinha feito um lance parecido.
Mas não era um código tão limpo! Boa Nando!

Abraço!

#6 ArthurGeek disse:

15 Dez 06, 08:03PM

Compartilha com a gente o seu css tb. :)

Ah, qual sistema de blog vc tá usando aqui? É algum em Rails? Tô tentando me virarcom o Mephisto... muito bom!

#7 Nando Vieira disse:

16 Dez 06, 02:00AM

Fala Arthur! Não é nada de mais! É algo assim:

.notice, .error, .warning, .info {
font-weight: bold;
margin: -10px 0 15px 0;
padding: 5px 5px 5px 27px;
}

.notice {
border: 1px solid #9c9;
background: #e2f9e3 url(../images/tick.png) no-repeat 5px center;
color: #060;
}

.error {
border: 1px solid #c68484;
background: #fcc url(../images/cross.png) no-repeat 5px center;
color: #c00;
}

.warning {
border: 1px solid #dd0;
background: #ffc url(../images/error.png) no-repeat 5px center;
color: #000;
}

.info {
border: 1px solid #82c2d4;
background: #ebf5f8 url(../images/information.png) no-repeat 5px center;
color: #000;
}

As imagens são do http://famfamfam.com

#8 Arthur Furlan disse:

25 Jan 07, 02:33PM

A dica é legal, mas o que eu mais gostei do post foi o layout das mensagens! Já incorporei aos meus sistemas (com algumas modificações). :)

#9 Alexandre Piccolo disse:

20 Mar 07, 04:30PM

Parabéns, NANDOVIEIRA: ótima dica.
Uma simples idéia simples - eficiente e elegante.
Novamente, parabéns.

#10 Alexandre Piccolo disse:

20 Mar 07, 06:22PM

Ah, só complementando (uma vez que usei no meu projeto as idéias que o NANDOVIEIRA publicou aqui):

Para manter o texto das mensagens sempre em HTML, pode-se alterar a linha:

messages += "#{flash[type]}"

por:

messages += "" + html_escape(flash[type]) +""

e, assim, as mensagens saem todas em plain-HMLT (e isso ajuda bastante em idiomas como o nosso, com acentos e demais caracteres especiais.

É isso. A idéia continua simples e bacana.

#11 André disse:

23 Mar 07, 10:42AM

Fala Nando, essa personalização das mensagens é uma ótima idéia. No caso do spesa você dispara um effect para mostrar as mensagens. Essa chamada aos effects é feita a partir de onde?

Estou querendo usar as mesmas cores e icones no meu projeto, tem problema?

#12 Nando Vieira disse:

23 Mar 07, 02:17PM

Olá André. O efeito é chamado no arquivo Javascript. Existe uma função genérica que faz isso automaticamente. Você pode usar o ícones sim. Abraço!

#13 Carlos Aquino disse:

31 Maio 07, 06:00PM

aqui ta dando o erro

Status: 500 Internal Server Error Content-Type: text/html
We're sorry, but something went wrong.

We've been notified about this issue and we'll take a look at it shortly.

#14 Nando Vieira disse:

01 Jun 07, 09:53AM

Dá uma olhada no log que lá irá dizer o que está dando de errado. Se quiser, posta no pastebin.com (lembre-se de marcar a opção "forever") e colocar um link que tento ajudar! ;)

#15 Weldys Santos disse:

11 Set 07, 05:02PM

Nando, realmente está dando um erro 500 como ocarlos falou acima,

dá uma olhada no erro!
http://pastebin.com/f3471029e

#16 Nando Vieira disse:

11 Set 07, 05:14PM

Weldys, o WP estava convertendo dois apóstrofos para uma aspa! Estúpido. O código foi corrigido!

#17 Weldys Santos disse:

11 Set 07, 05:19PM

rsrs.. eu tinha acabado de decifrar o problema... eu tinha mudado pq tinha achado estranho só a abertura das aspas, mas tudo bem. tah tudo certo! Agora o código tá redondim!

Valeu e parabéns pela dica :)

#18 Arthur Martins disse:

19 Mar 08, 04:14PM

Nando,
Parabéns, muito útil e simples.
Já estou usando em minha aplicação.

#19 Eduardo M. disse:

26 Set 08, 02:54PM

Eu estava tentando fazer a exibição deste flash_message responder a uma chamada RJS. Tenho uma função que posta comentários e ela adiciona os posts por ajax, ou seja, a página não é renderizada novamente e portanto o flash_message não é acionado, ficando sem mensagem.

Neste método que posta comentários eu tenho:

render :update do |page|
...
# No caso de ser uma mensagem no formato notice eu faço o seguinte
page['feedback'].replace("#{@comentario.comentario}")
page['feedback'].show
end

Na view eu tenho:

...

...

Na primeira vez que eu posto um comentário, funciona corretamente, mas seu eu tentar postar outro comentário logo em seguida dá o seguinte erro:

RJS error:

TypeError: $("feedback") is null

#20 Eduardo M. disse:

26 Set 08, 02:57PM

Opa,

corrigindo o último post que ficou sem a parte da view:

Na view eu tenho um div com id "feedback" e dentro dele o a chamada rails para "flash_message"

Obrigado por qualquer dica.

Eduardo M.

#21 Eduardo M. disse:

26 Set 08, 03:54PM

Sobre os dois últimos posts, consegui!

Se alguém estiver querendo usar o flash_message com RJS faça da seguinte forma:

No application_helper eu fiz o método:

# Mostra a mensagem informativa utilizada em operações realizadas com sucesso.
# O elemento (div, td...) da página que contém o método "flash_message" deve ter id='feedback'
# @page Página usada no "render update do |page|"
# @tipo notice, warning, info, error
# @mensagem String que será a mensagem renderizada
def flash_message_now (page,tipo,mensagem)
page.replace_html 'feedback', "#{mensagem}"
page.show 'feedback'
end

No controller eu tenho, por exemplo:

render :update do |page|
...
flash_message_now(page,"notice","Comentário enviado com sucesso")
end

Eduardo Mucelli.

#22 Eduardo M. disse:

26 Set 08, 03:57PM

Desculpe mais um post, mas no post anterior eu esqueci do html, que foi comido pelo na postagem.

Na linha "page.replace_html 'feedback', "#{mensagem}"" deveria ser:
page.replace_html 'feedback', "menor p class='#{tipo}' maior #{mensagem} menor barra p maior"

Eduardo Mucelli.

#23 Guilherme disse:

11 Out 08, 02:36AM

Nando, estou tentando utilizar aquele efeito que faz as mensagens aparecem e desaparecem automaticamente mas não estou conseguindo. Pode me dar uma dica ou postar algo sobre a utilização desse efeito ?

Muito obrigado e desculpe qualquer coisa ;)

Abraços.

#24 Márcio disse:

04 Fev 09, 08:14PM

Adicionei o seu exemplo, e, na mensagem do tipo :notice está aparecendo duas vezes a mensagem, a do seu exemplo, e a da aplicação que vem por default.
Como desabilito a que vem por default?

#25 Nando Vieira disse:

04 Fev 09, 08:25PM

Márcio, remove a chamada para < %= flash[:notice] %> que tem no arquivo app/views/layouts/application.html.erb

#26 Thiago Ganzarolli disse:

31 Mar 10, 01:15AM

Obrigado, melhorou muito a exibição e organização das minhas mensagens.

#27 Stclara disse:

12 Ago 10, 05:09PM

Salve, amigo. O código messages += "#{flash[type]}" tá quebrando no rails 3, aparece na página: AVISO.
O que será que mudou no rails 3?

[]'s

Stclara.

#28 Nando Vieira disse:

12 Ago 10, 11:57PM

No Rails 3 você precisa alterar o retorno de messages para messages.html_safe.

#29 João Diego disse:

15 Dez 10, 04:25PM

Dica útil e o site http://famfamfam.com/ tb ajuda muito.

#30 hugo disse:

01 Ago 11, 09:58PM

Oi, ótimo post.

Preciso de ajuda com uma coisa como renderizar as mensagens em um evento ajax no rails 3.
Alguem pode me ajudar, sou novato no rails =)

#31 Carlos Alan disse:

01 Nov 11, 11:18AM

Nando Vieira,

Você escreveu esse artigo em 08/12/06.. de lá pra cá.. surgiu alguma solução, melhor do que essa?