假设你有一个包含两列内容的页面.无论什么原因,您希望通过
AJAX请求在页面加载后检索其中一列的
HTML内容.用户不需要采取行动使内容加载(无链接点击或表单提交),它只会自动发生.
我可以通过在主响应中返回空的占位符div来轻松实现
<div id="pink-dancing-elephants"></div>
$.ajax({
url: "/elephants/dancing/pink",cache: false,success: function(html){
$("#pink-dancing-elephants").append(html);
}
});
并且具有响应/大象/跳舞/粉红色的动作返回相应的HTML片段.
这一切都很好,但我想知道我是否缺少一些Rails3功能,这将使这更容易.例如.我正在寻找能够在主视图中放置像下面这样的东西的能力,剩下的就是“魔术”
<%= render :url=>"/elephants/dancing/pink",:remote => true %>
我错过了什么吗？
解决方法
我使用@ cailinanne的评论中描述的方法对Dan L的帖子,它对我来说很好.我喜欢附加到div的数据标签的可读性.在您的html中,您可以准确地看到将要加载到该div中的内容,如果要将此功能添加到多个div或页面,则不必添加任何新的JS.
摘自本文：http://tech.thereq.com/post/16479390885/loading-page-content-via-ajax-in-rails-3-1
$("#comments").load("/blogs/2/comments");
尴尬的部分是AJAX路径(/ blogs / 2 / comments),它们根据我们正在查看的博客显然改变.如果我们完全遵循jQuery文档,那么我们可以在HTML体的中间放一个脚本标签,这样在我们的模板文件中,我们可能会有一些像
# show.html.erb
<div id="comments"></div>
<script>
$("#comments").load("<%= blog_comments_path(@blog)%>");
</script>
呸.不是JavaScript的粉丝混入我的模板文件.
该怎么办？遵循Rails UJS建议的模式,并利用新的HTML数据属性.
首先,当您要在页面中加载AJAX内容时,请在模板中执行以下操作
#show.html.erb <div id="comments" data-load="<%= blog_comments_path(@blog. :format => :js)%>"> </div>
# application.js or any JS file loaded within application.js
$("div[data-load]").filter(":visible").each(function(){
var path = $(this).attr('data-load');
$(this).load(path);
});
第三,设置一个匹配获取请求到blog_comments的路由(输入rake路由,查看路由的名称)
# routes.rb # ajax load at page load get "/blogs/comments" => "blogs#comments"
