如何通过jQuery渲染Rails表单? [英] how to render rails form by jquery?
问题描述
我正在尝试将跟踪和取消关注表单呈现到Rails视图中
I am trying to render follow and unfollow forms into rails view
Create.js.erb(我的问题在这里,因为这是错误的代码,仅作用于CSS而不作用于rails表单,我似乎无法处理它D:)
Create.js.erb ( my problem is here as this is wrong code only acts on CSS not the rails forms and I can't seem to handle it D:)
$('.btn-danger').attr('class', 'btn')
.val('Following')
.attr('id', 'btn-unfollow');
destroy.js.erb(同样这是错误的代码,仅在CSS上起作用,而不在rails形式上起作用)
destroy.js.erb ( also this is wrong code only acts on CSS, not the rails forms )
$('.btn').attr('class', 'btn-danger')
.val('unfollowed')
.attr('id', 'btn-follow');
我的Postsindex.html.erb
my Postsindex.html.erb
<% @posts.each do |f| %>
<%= f.headline %>
<%- f.text %>
<% if current_user.id != f.user.id %>
<% if !current_user.following?(f.user) %>
<%= form_for(current_user.active_relationships.build, remote: true) do |s| %>
<div> <%= hidden_field_tag :followed_id, f.user.id %> </div>
<%= s.button "follow", class: "btn btn-danger", id: "follow-btn" %>
<% end %>
<% else %>
<%= form_for(current_user.active_relationships.find_by(followed_id: f.user.id), :html => {method: :delete}, remote: true) do |s| %>
<%= s.button "unfollow", class: "btn", id: "unfollow-btn", remote: true %>
<% end %>
<% end %>
<% end %>
<% end %>
帖子控制器:
class PostsController < ApplicationController
def new
@post = Post.new
end
def index
@posts = post.all
end
end
唯一的问题是关注和取消关注不是在局部页面上,而是在同一页面上,因此,如果我可以将它们分别呈现给每个人,我会很感激...
The only problem is that follow and unfollow are not on partials but rather on same page so if i can render each of them separatley I will be thankful ...
推荐答案
我会做这样的事情.请更改以适应您数据库中的模型和字段
I would do something like this. Please change to adapt to your models and fields in your database
帖子视图: 我将创建两个链接来关注或取消关注.只有一个可见(取决于帖子的作者以及我是否已经关注他).这些链接将创建一个ajax帖子,以关注/取消关注该帖子的作者,并将切换链接(隐藏自己并显示另一个链接)
Posts view: I would make two links to follow or unfollow. Only one is visible (depending on the author of the post and if I am already following him). These links would make a ajax post to follow/unfollow the author of the post and will switch links (hides himself and shows the other link)
<% @posts.each do |post| %>
<%= post.headline %>
<%- post.text %>
<% if current_user.id != post.user.id %>
<%= render partial: 'follow_links', locals: { user: post.user }
<% end %>
<% end %>
部分关注链接.
<% show_follow_link = current_user.following?(user) ? 'hidden' : '' %>
<% show_unfollow_link = current_user.following?(user) ? '' : 'hidden' %>
<!-- links to follow/unfollow have data-attributes that include the path to make the ajax post and the user to follow, that is used to find the link to show after the ajax call -->
<%= link_to 'Follow', '#', { class: 'follow-user btn-success #{show_follow_link}', "data-url": follow_user_path(user.id), "data-followee": user.id } %>
<%= link_to 'Unfollow', '#', { class: 'unfollow-user btn-danger #{show_unfollow_link}', "data-url": unfollow_user_path(user.id), "data-followee": user.id } %>
部分Java语言
$('.follow-user').on("click",function() {
target = $(this)
url = target.attr('data-url')
followee = target.attr('data-followee')
other_button = $('.unfollow-user[data-followee="'+followee+'"]')
$.ajax( {
url: url,
type: 'post',
success: function() {
target.addClass('hidden');
other_button.removeClass('hidden');
},
error: function(ret) {
alert(ret.responseJSON.error);
}
});
});
$('.unfollow-user').on("click",function() {
target = $(this)
url = target.attr('data-url')
followee = target.attr('data-followee')
other_button = $('.follow-user[data-followee="'+followee+'"]')
$.ajax( {
url: url,
type: 'post',
success: function() {
target.addClass('hidden');
other_button.removeClass('hidden');
},
error: function(ret) {
alert(ret.responseJSON.error);
}
});
UsersController(要遵循和取消关注的新方法)
def follow
if !current_user
render json: { :error => 'You must log in' }, :status => :unprocessable_entity
return
end
who_to_follow = User.find_by id: params[:id]
if !who_to_follow
render json: { :error => 'User not found' }, :status => :not_found
return
end
# Change user_id by the field in the relationship that links to the followee
followee = current_user.active_relationships.create(user_id: who_to_follow.id)
render json: who_to_follow, :status => :ok
return
end
def unfollow
if !current_user
render json: { :error => 'You must log in' }, :status => :unprocessable_entity
return
end
who_to_unfollow = User.find_by id: params[:id]
if !who_to_unfollow
render json: { :error => 'User not found' }, :status => :not_found
return
end
# Change user_id by the field in the relationship that links to the followee
unfollowee = current_user.active_relationships.find_by user_id: who_to_unfollow.id
if !unfollowee
render json: { :error => 'You are not following this user' }, :status => :unprocessable_entity
return
end
unfollowee.destroy
render json: who_to_unfollow, :status => :ok
return
end
添加路线
post "/users/:id/follow" => 'users#follow', :as => :follow_user
post "/users/:id/unfollow" => 'users#unfollow', :as => :unfollow_user
这篇关于如何通过jQuery渲染Rails表单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!