Like/dislike 系统使用 AJAX
Like/dislike system using AJAX
我目前正在处理我的第一个 RoR 项目。现在我想将 like/dislike 系统集成到我的应用程序中。我有一些代码,但它仅在重新加载页面时有效。我的目标是让 like/dislike 成为 post 而无需重新加载页面(使用 Ajax,而不是内置页面)。所以,这是我的代码,这里有什么问题?
我的控制器
def like
@post=Post.find(params[:id])
@post.increment!(:like)
render :nothing => true, :status => 200
end
def dislike
@post=Post.find(params[:id])
@post.increment!(:dislike)
render :nothing => true, :status => 200
end
我的观点
<table>
<% if @post.count!=0 %>
<% @post.each do |p| %>
<%if !p.text.nil?%>
<tr data-post_id="<%= p.id %>">
<td><b class="margin"><h4><%=p.text%></b></h4></td>
<td>by <%= link_to p.user.username, profile_dashboard_path(p.user) %> </td>
<td><span class="glyphicon glyphicon-thumbs-up likeAction"><%= p.like %> </td>
<td><span class="glyphicon glyphicon-thumbs-down dislikeAction"><%= p.dislike %> </td>
<%end%>
<% end %>
<%else%>
There's no posts yet, but you can add <%=link_to "one", create_a_post_dashboard_path(current_user)%>
<%end%>
</table>
我的 js 文件位于 app/assets/javascripts/dashboard.js,所以我没有任何名称为 like.js.erb 或 dislike.js.erb 的 js 文件(我不确定是否我需要它们)
jQuery(function($) {
$(".likeAction").click(function(){
var current_post_tr = $(this).parents('tr')[0];
$.ajax({
url: 'http://localhost:3000/dashboard/' + $(current_post_tr).attr('data-post_id') +'/like',
type: 'PUT',
success: function(){
$(".likeAction").hide().fadeIn();
location.reload();
}
});
});
$(".dislikeAction").click(function(){
var current_post_tr = $(this).parents('tr')[0];
$.ajax({
url: 'http://localhost:3000/dashboard/' + $(current_post_tr).attr('data-post_id') +'/dislike',
type: 'PUT',
success: function(){
$(".dislikeAction").hide().fadeIn();
location.reload();
}
});
});
});
success: function(){
$(".dislikeAction").hide().fadeIn();
var dislikes = parseInt($(".dislikeAction").text());
$(".dislikeAction").text(dislikes+1) // similarly for likes
}
我目前正在处理我的第一个 RoR 项目。现在我想将 like/dislike 系统集成到我的应用程序中。我有一些代码,但它仅在重新加载页面时有效。我的目标是让 like/dislike 成为 post 而无需重新加载页面(使用 Ajax,而不是内置页面)。所以,这是我的代码,这里有什么问题?
我的控制器
def like
@post=Post.find(params[:id])
@post.increment!(:like)
render :nothing => true, :status => 200
end
def dislike
@post=Post.find(params[:id])
@post.increment!(:dislike)
render :nothing => true, :status => 200
end
我的观点
<table>
<% if @post.count!=0 %>
<% @post.each do |p| %>
<%if !p.text.nil?%>
<tr data-post_id="<%= p.id %>">
<td><b class="margin"><h4><%=p.text%></b></h4></td>
<td>by <%= link_to p.user.username, profile_dashboard_path(p.user) %> </td>
<td><span class="glyphicon glyphicon-thumbs-up likeAction"><%= p.like %> </td>
<td><span class="glyphicon glyphicon-thumbs-down dislikeAction"><%= p.dislike %> </td>
<%end%>
<% end %>
<%else%>
There's no posts yet, but you can add <%=link_to "one", create_a_post_dashboard_path(current_user)%>
<%end%>
</table>
我的 js 文件位于 app/assets/javascripts/dashboard.js,所以我没有任何名称为 like.js.erb 或 dislike.js.erb 的 js 文件(我不确定是否我需要它们)
jQuery(function($) {
$(".likeAction").click(function(){
var current_post_tr = $(this).parents('tr')[0];
$.ajax({
url: 'http://localhost:3000/dashboard/' + $(current_post_tr).attr('data-post_id') +'/like',
type: 'PUT',
success: function(){
$(".likeAction").hide().fadeIn();
location.reload();
}
});
});
$(".dislikeAction").click(function(){
var current_post_tr = $(this).parents('tr')[0];
$.ajax({
url: 'http://localhost:3000/dashboard/' + $(current_post_tr).attr('data-post_id') +'/dislike',
type: 'PUT',
success: function(){
$(".dislikeAction").hide().fadeIn();
location.reload();
}
});
});
});
success: function(){
$(".dislikeAction").hide().fadeIn();
var dislikes = parseInt($(".dislikeAction").text());
$(".dislikeAction").text(dislikes+1) // similarly for likes
}