[英]Rails 4 x AJAX: partial not reloading on click with remote: true
In my Rails 4 app, I have a Post
model with a custom approval
attribute. 在我的Rails 4应用程序中,我有一个带有自定义
approval
属性的Post
模型。
I am trying to update this custom approval
attribute from the Posts#Show page when the user clicks on one of three particular links set with remote: true
. 当用户单击设置为
remote: true
的三个特定链接之一时,我尝试从Posts#Show页面更新此自定义approval
属性remote: true
。
The goal is to reload only the partial displaying the content of this attribute, and not the entire page. 目标是仅重新加载部分显示此属性的内容,而不是整个页面。
Here is my Post
show.html.erb
view: 这是我的
Post
show.html.erb
视图:
<div id="post_show_approval">
<%= render 'approval' %>
</div>
And here is my _approval.html.erb partial, located in the app/views/posts
folder: 这是我的_approval.html.erb部分,位于
app/views/posts
文件夹中:
<ul>
<li>
<% if @post.approval == "ok" %>
<span class="ok_green">
<span class="glyphicon glyphicon-ok"></span>
Post Approved
</span>
<% else %>
<span class="approval_blue" %>
<%= link_to post_path(:id => @post.id, "post[approval]" => "ok"), :class => "post_appoval_link", remote: true, :method => :patch do %>
<span class="glyphicon glyphicon-ok"></span>
Approve this post
</span>
<% end %>
<% end %>
</li>
<li id="post_show_require_edits">
<% if @post.approval == "edit" %>
<span class="edit_yellow">
<span class="glyphicon glyphicon-repeat"></span>
This post requires edits
</span>
<% else %>
<span class="approval_blue" %>
<%= link_to post_path(:id => @post.id, "post[approval]" => "edit"), :class => "post_appoval_link", remote: true, :method => :patch do %>
<span class="glyphicon glyphicon-repeat"></span>
Require edits for this post
</span>
<% end %>
<% end %>
</li>
<li id="post_show_to_be_deleted">
<% if @post.approval == "remove" %>
<span class="remove_red">
<span class="glyphicon glyphicon-remove"></span>
This post needs to be deleted
</span>
<% else %>
<span class="approval_blue" %>
<%= link_to post_path(:id => @post.id, "post[approval]" => "remove"), :class => "post_appoval_link", remote: true, :method => :patch do %>
<span class="glyphicon glyphicon-remove"></span>
Mark this post as to be deleted
<% end %>
</span>
<% end %>
</li>
</ul>
As you can see, all the links with the post_approval_link
class are set with remote: true
. 如您所见,所有具有
post_approval_link
类的链接都设置为remote: true
。
Then, I have updated my PostsController
as follows: 然后,我更新了
PostsController
,如下所示:
def update
respond_to do |format|
if @post.update(post_params)
format.html { redirect_to post_path(@post) }
format.json { render :show, status: :ok, location: @post }
format.js
else
format.html { render :edit }
format.json { render json: @post.errors, status: :unprocessable_entity }
end
end
end
And I have created an update.js.erb
file in the app/views/posts
folder: 我在
app/views/posts
文件夹中创建了一个update.js.erb
文件:
$('#post_show_approval').reload(true);
————— ——————
UPDATE : as alternatives to the above line, I also tried 更新 :作为上述方法的替代方法,我也尝试过
$('#post_show_approval').hide().show();
and 和
$('#post_show_approval').toggle().toggle();
But none of these seem to work. 但是这些似乎都不起作用。
————— ——————
UPDATE 2 : here is another thing I tried: 更新2 :这是我尝试过的另一件事:
$('#post_show_approval').load('<%= j render "approval" %>');
But it is not working either. 但这也不起作用。
————— ——————
UPDATE 3 : when I try only 更新3 :当我只尝试
$('#post_show_approval').hide();
or 要么
$('#post_show_approval').toggle();
The div does disappear. div确实消失了。
But I still did not find a way to make it reappear with its content updated. 但是我仍然没有找到一种使它随着内容更新而重新出现的方法。
————— ——————
UPDATE 4 : also, when I use: 更新4 :同样,当我使用时:
$('#post_show_approval').append('<%= j render(partial: "approval") %>');
The approval
partial does load with its updated content... the initial content does not disappear, so every time we click on one of the links, a new line of content stacks up. approval
部分确实会加载其更新的内容...初始内容不会消失,因此,每次我们单击链接之一时,都会堆积新的内容行。
————— ——————
However, when I click on one of the three links with the post_approval_link
class, the appoval
attribute of the post is actually updated to the correct value, but the #post_show_approval
div is not reloaded and I need to refresh the page to see the actual changes. 但是,当我单击带有
post_approval_link
类的三个链接之一时, post_approval_link
的appoval
属性实际上已更新为正确的值,但#post_show_approval
div并未重新加载,我需要刷新页面以查看实际更改。
What am I missing in the implementation of this AJAX feature? 在实现此AJAX功能时我缺少什么?
The problem was that I was not using the right JavaScript method. 问题是我没有使用正确的JavaScript方法。
With: 带有:
$('#post_show_approval').html('<%= j render(partial: "approval") %>');
It is now working like a charm. 现在,它像魅力一样运转。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.