Básico de Jquery e Ajax Em Rails

Comments

Este post tem por base o tutorial do rehali. Então antes de começar você deve fazer primeiro o post dele. Seguindo sua linha de programação neste post irei implementar a funcionalidade de inserir os comentários em um artigo(post), com as mesmas funcionalidades que o rehali usou em seu artigo: Jquery e Ajax.

Vamos as alterações no post do rehali, para em seguida implementar a nova funcionalidade de adicionar comentarios ao artigo.

Abra o model de Post e adicione o seguinte metodo:

1
2
3

def info
  "#{title} - [#{email}]"
end

Agora abrimos o arquivo views/posts/_post.html.erb e modificamos a segunda linha, ficando agora assim:

1
2
3
4
5
6

<%= content_tag_for(:li, post) do %>
  <p class="title"><%= link_to post.info, post %></p>
  <p class="content"><%= truncate post.content %></p>
  <span class="posted_at">Posted at <%= time_ago_in_words(post.created_at) %> ago.
  (<%= link_to 'Delete', post, :confirm => 'Are you sure?', :method => :delete, :remote => true%>)</span>
<% end %>

Aqui concluímos as alterações necessarias no post do rehali, para colocarmos os comentarios. Mãos a obra lol.

Criamos o scaffold de comentarios e geramos sua tabela:

rails g scaffold comment emai:string message:text references:post
rake db:migrate

Abra o model de post e o arquivo config/routes.rb e adicione respectivamente:

has_many :comments #model post

resources :posts do #aquivo routes
  resources :comments
end

Em seguida crie a partial que irá mostrar os comentarios dentro da pagina do artigo com o nome de _comment.html.erb dentro da pasta views/comments com o seguinte código:

1
2
3
4
5

<%= content_tag_for(:li, comment) do %>
  <p class="title"><%= comment.email %>: <%= comment.message %></p>
  <span class="posted_at">Posted at <%= time_ago_in_words(comment.created_at) %> ago.
  (<%= link_to 'Delete', comment, :confirm => 'Are you sure?', :method => :delete, :remote => true%>)</span>
<% end %>

Continuando, crie os arquivos create.js.erb e destroy.js.erb dentro da pasta views/comments com o seguinte código, respectivamente:

1
2
3

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

1

$('#<%= dom_id(@comment) %>').effect('highlight', {color: 'green', mode: 'hide'}, 1200);

Abra o form de comentarios e deixe-o assim:

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

<%= form_for([@post, Comment.new], :remote => true) do |f| %>
  <div class="field">
    <%= f.label :email %><br />
    <%= f.text_field :email %>
  </div>
  <div class="field">
    <%= f.label :message %><br />
    <%= f.text_area :message %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

Em seguida vamos modificar o controller de comentarios, especificamente as actions create e destroy:

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

class CommentsController < ApplicationController
  respond_to :js

  def create
    @post = Post.find(params[:post_id])
    @comment = @post.comments.create(params[:comment])
    respond_with(post_path(@post))
  end

  def destroy
    @comment = Comment.find(params[:id])
    @comment.destroy
    respond_with(post_path(@comment.post))
  end
end

E para quase finalizar vamos abrir a view show de post e deixa-la exatamente assim:

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

<div id="timer">Rendered at: <%= Time.now %></div> 

<p>
  <b>Title:</b>
  <%= @post.title %>
</p>

<p>
  <b>Email:</b>
  <%= @post.email %>
</p>

<p>
  <b>Content:</b>
  <%= @post.content %>
</p>

<h2>Add New Comment</h2>
<div id="comment_form">
 <%= render 'comments/form' %>
</div>

<ul id="comments">
 <%= render @post.comments.reverse %>
</ul>

<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>

Quase tudo pronto. Aproveitando o css do artido do rehali, abra o arquivo assets/stylesheets/comments.css.scss e adicione o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

html, body {
  font-family: Arial;
  font-size: 12px;
}

textarea {
  font-family: Arial;
  font-size: 12px;
  width: 500px;
  height: 100px;
  padding-bottom: 8px;
}

.textfield{
  font-family: Arial;
  font-size: 14px;
  width: 300px;
  padding-bottom: 8px;
  border: 1px solid black;
}

#comments ul {
  margin: 0;
  padding: 0;
}

#comments li {
  margin-left: -30pt;
  margin-bottom: 16px;
  padding: 8px;
  list-style: none;
  border: 1px solid #ccc;
}

#comments p {
  margin: 0;
}

#comments .title {
  font-size: 13px;
  font-weight: bold;
}

#comments .content {
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.posted_at {
  font-size: 8pt;
  text-decoration: italic;
  margin-bottom: 8px;
}

#timer {
  font-size: 8pt;
  text-decoration: italic;
}

Agora é so abrir o terminal e executar rails s. Simples e fácil lol.

Comments