Rails中ajax调用后页面不显示更新信息
我有rails 3.1,当我使用ajax进行删除操作时,如果没有手动刷新,页面不会显示更新的内容。
奇怪的是,所有 .js.erb 代码似乎都能正常触发。我什至尝试在 destroy.js.erb 中放置一个简单的 page.alert('hi') 但删除后我没有收到任何警报。我看到有几个地方提到在视图中为 ajax 添加“脚本”标签以使 jquery 工作,但最新的教程都没有提到这一点。我会感谢你的帮助。
这是我在服务器日志中看到的内容:
Started DELETE "/categories/35" for 127.0.0.1 at 2011-12-19 12:58:15 -0500
Processing by CategoriesController#destroy as JS
Parameters: {"id"=>"35"}
User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = 5 LIMIT 1
Category Load (0.3ms) SELECT "categories".* FROM "categories" WHERE "categories"."user_id" = 5 AND "categories"."id" = ? LIMIT 1 [["id", "35"]]
SQL (0.5ms) DELETE FROM "categories" WHERE "categories"."id" = ? [["id", 35]]
Rendered categories/destroy.js.erb (0.5ms)
Completed 200 OK in 161ms (Views: 30.7ms | ActiveRecord: 3.2ms)
这是我在生成的 html 页面输出页面源中看到的内容:
...
<tr id = "category_35">
<td>High-end products</td>
<td class="deletebutton"><a href="/categories/35" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow">Delete</a></td>
</tr>
<tr id = "category_36">
<td>Economy products</td>
<td class="deletebutton"><a href="/categories/36" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow">Delete</a></td>
</tr>
destroy.js.erb 的内容:
('#<%= dom_id(@category) %>').fadeOut(700);
在 Gemfile 中:
gem 'jquery-rails'
在categories_controller.rb 中:
def index
@categories = current_user.categories.all
respond_to do |format|
format.html # index.html.erb
format.json
format.js
end
end
def destroy
@category.destroy
respond_to do |format|
format.html { redirect_to categories_url }
format.js {
render :template => 'categories/destroy.js.erb', :layout => false
}
end
end
在 app/views/categories/index.html 中。 html.erb
<h2>Categories</h2>
<table name="categories_list">
<%= render "categories_list" %>
</table>
<br />
部分 _categories_list.html.erb
<% @categories.each do |category| %>
<tr id = "<%= dom_id(category)%>">
<td><%= category.name %></td>
<td class="deletebutton"><%= link_to 'Delete', category, confirm: 'Are you sure?', method: :delete, :remote => true %></td>
</tr>
<% end %>
I have rails 3.1 and when I use ajax for delete operation, the page is not showing the updated content without a manual refresh.
The strange thing is that all the .js.erb code seems to be firing properly. I even tried putting just a simple page.alert('hi') in the destroy.js.erb but I do not get any alert after the delete. I saw a couple of places where they mention adding a "script" tag for ajax in the view to make jquery work but none of the latest tutorials mention that. I will appreciate your help.
Here is what I see in the server logs:
Started DELETE "/categories/35" for 127.0.0.1 at 2011-12-19 12:58:15 -0500
Processing by CategoriesController#destroy as JS
Parameters: {"id"=>"35"}
User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = 5 LIMIT 1
Category Load (0.3ms) SELECT "categories".* FROM "categories" WHERE "categories"."user_id" = 5 AND "categories"."id" = ? LIMIT 1 [["id", "35"]]
SQL (0.5ms) DELETE FROM "categories" WHERE "categories"."id" = ? [["id", 35]]
Rendered categories/destroy.js.erb (0.5ms)
Completed 200 OK in 161ms (Views: 30.7ms | ActiveRecord: 3.2ms)
Here is what I see in the generated html page output page source:
...
<tr id = "category_35">
<td>High-end products</td>
<td class="deletebutton"><a href="/categories/35" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow">Delete</a></td>
</tr>
<tr id = "category_36">
<td>Economy products</td>
<td class="deletebutton"><a href="/categories/36" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow">Delete</a></td>
</tr>
The content of destroy.js.erb:
('#<%= dom_id(@category) %>').fadeOut(700);
In Gemfile:
gem 'jquery-rails'
In categories_controller.rb:
def index
@categories = current_user.categories.all
respond_to do |format|
format.html # index.html.erb
format.json
format.js
end
end
def destroy
@category.destroy
respond_to do |format|
format.html { redirect_to categories_url }
format.js {
render :template => 'categories/destroy.js.erb', :layout => false
}
end
end
In app/views/categories/index.html.erb
<h2>Categories</h2>
<table name="categories_list">
<%= render "categories_list" %>
</table>
<br />
In the partial _categories_list.html.erb
<% @categories.each do |category| %>
<tr id = "<%= dom_id(category)%>">
<td><%= category.name %></td>
<td class="deletebutton"><%= link_to 'Delete', category, confirm: 'Are you sure?', method: :delete, :remote => true %></td>
</tr>
<% end %>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
好吧,以防万一有人偶然发现这个问题,我想分享解决方案。大约有 3 件重要的事情:
destroy.js.erb 中的 $ 符号丢失了。这是更正后的代码:
$('#<%= dom_id(@category) %>').fadeOut(700);
此外,必须指示控制器在响应 .js 时不要使用默认布局。这可以在应用程序控制器本身中完成。但我在类别控制器中这样做了,如下所示:
respond_to do |格式|
format.html { 重定向到categories_url }
格式.json
format.js {渲染“销毁”,:layout => false}
此外,在迭代过程中的某个时刻,我混淆了 format.json 和 format.js。它们是两个不同的东西!因为我是 RoR 的新手,所以我认为对 ajax 调用的响应将是 json 并且 format.json 类似于 format。 。
最后,我应该向 Mark 致敬,他在 github 上分享了一个 ajax 演示:
https://github.com/markusproske/ajax_demo/tree/jquery
我的额外更改要使其对我有用,必须禁用布局再现。否则,该演示就很彻底了。我仍在研究处理 js 调用的错误条件。
Ok, just in case someone stumbles on this question, I wanted to share the solution. There were about 3 things of significance:
The $ sign in destroy.js.erb was missing. Here is the corrected code:
$('#<%= dom_id(@category) %>').fadeOut(700);
Also, the controller must be instructed NOT to use the default layouts when responding to .js. This can be done in the applcation controller itself. But I did it in the category controller as follows:
respond_to do |format|
format.html { redirect_to categories_url }
format.json
format.js {render "destroy", :layout => false}
Also, at one point during the iteration I had confused format.json with format.js. They are two different things! Since, I am new to RoR, I thought that the response to the ajax calls will be json and format.json is analogous to format. js.
Finally, i should give a shout out to Mark, who shared an ajax demo on github at:
https://github.com/markusproske/ajax_demo/tree/jquery
The additional change I had to do to make it work for me was disabling the layout rendition. Otherwise, that demo is thorough. I am still looking at handling error conditions for js calls.