Continuando A Saga Sobre Ajax E Rails

Comments

Bom pessoal, demorei um pouco a fazer outro post devido ter me mudado para o Rio de Janeiro lol, trabalhando aqui agora. Não sei se posso falar a empresa que estou agora, ah vou falar rs. Bom fui contratado pela Helabs empresa do Sylvestre Mergulhão e Rafael Lima. Não tenho nem palavras para expressar a felicidade, que dizer tenho sim “lol”. Será um experiência única então vamos ao post.

Antes de começar esse post você deve seguir esse aqui e esse outro

Depois de completar os 2 posts acima, iremos colocar nosso projeto ajax e rails para exibir as mensagens de erro ao criar um post, bem como a mensagem flash. Não é nada muito complicado so iremos fazer uma simples condição no arquivo /views/post/create.js.erb, adicionar uma nova div no form que irá exibir a mensagem de erro, adicionar a div para flash_notice na index de post e uma pequena alteração no controller de post ao criar um.

Vamos comerçar com a parte de mensagem de erro, hum bom vamos fazer tudo logo, assim era como estava o arquivo create.js.erb de post:

1
2
3

$('#comments').prepend('<%= escape_javascript(render(@comment)) %>');
$('#comments > li').first().effect('highlight', {color: 'cyan', mode: 'show'}, 2000);
$('#comment_form > form')[0].reset();

Alteramos para:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<% if @post.errors.any? -%>
  /*Hide the flash notice div*/
  $('#flash_notice').hide(300);

  /*Update the html of the div post_errors with the new one*/
  $('#post_errors').html('<%= escape_javascript(error_messages_for(@post))%>');

  /*Show the div post_errors*/
  $('#post_errors').show(300);
<% else -%>
  /*Hide the div post_errors*/
  $('#post_errors').hide(300);

  /*Update the html of the div flash_notice with the new one*/
  $('#flash_notice').html('<%= escape_javascript(flash[:notice])%>');

  /*Show the flash_notice div*/
  $('#flash_notice').show(300);

  $('#posts').prepend('<%= escape_javascript(render(@post)) %>');
  $('#posts > li').first().effect('highlight', {color: 'cyan', mode: 'show'}, 2000);
  $('#post_form > form')[0].reset();

<% end -%>

Aqui eu ja inclui a parte para exibir a mensagem flash, veja que agora nós temos uma condição, que verifica se algum erro foi lançado, se existe ele dar um hide na div de flash_notice, atualiza nossa div de post_erros com o helper que eu criei aqui e exibe-a em seguida, senão ele da um hide na div de post_erros, atualiza a div da mensagem flash, mostra o objeto criado e limpa o formulário.

Com nosso arquivo create.js.erb no ponto, vamos adicionar as divs nas views, primeiro abra o form de post e deixe-o assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<%= form_for(@post, :remote => true) do |f| %>

  <div id= "post_errors" style="display:none"></div>

  <div class="field">
    <%= f.label :title %><br />
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :email %><br />
    <%= f.text_field :email %>
  </div>
  <div class="field">
    <%= f.label :content %><br />
    <%= f.text_area :content %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

Nossa única alteração foi a inclusão da div para exibir as mensagens de erro. Em seguida vamos abrir a index de post e incluir a div para a mensagem flash:

1
2
3
4
5
6
7
8
9
10
11
12

<div id="flash_notice" style="display:none"></div>

<h1>Posts</h1>
<div id="timer">Rendered at: <%= Time.now %></div> 
 
<div id="post_form">
  <%= render 'form' %>
</div>
 
<ul id="posts">
  <%= render :partial => @posts.reverse %>
</ul>

E finalizando abra o controller de post e deixei-o assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  def create
    @post = Post.new(params[:post])

    respond_to do |format|
      if @post.save
        format.html { redirect_to posts_url }
        format.json { render json: @post, status: :created, location: @post }
        format.js
        flash[:notice] = 'Post was successfully created.'
      else
        format.html { render action: "index" }
        format.json { render json: @post.errors, status: :unprocessable_entity }
        format.js
      end
    end
  end

Fiz uma pequena alteção, pois como estava antes não exibia a mensagem flash. Agora você ja pode verificar se esta exibindo ou não as mensagens de erro e mensagem flash, lembrando que você deve seguir esse aqui e esse outro, antes de começar aqui.

Simples e fácil lol

Comments