使用 rails 和 ajax 动态呈现内容。答案

【问题标题】：Using rails and ajax to dynamically render content.使用 rails 和 ajax 动态呈现内容。
【发布时间】：2013-10-25 10:22:51
【问题描述】：

对于如何完成我的应用程序的最后一步，我真的束手无策。

我想动态替换主要内容而不需要刷新页面。

application.html.erb 如下所示：

<div id="wrapper">
        <!-- ><div id="headcontainer">
            <header>
            </header>
        </div> -->
        <div id="maincontentcontainer">
            <div id="maincontent">
                <div class="section group">
                    <div class="col span_1_of_7">
                        <%= render :partial => "shared/menu" %>
                    </div>
                    <div id="replace">
                        <%= yield %>
                    </div>
                </div>
            </div>
        </div>

我有我的部分菜单，点击它时我想动态替换#replace div 的内容

<ul class='kwicks kwicks-vertical'>
    <li id='panel-1'><%= link_to_unless_current image_tag('keyIssues.png'), :remote => true %></li>
    <li id='panel-2'><%= link_to_unless_current image_tag('pollVsLeader.png'), :remote => true  %></li>
    <li id='panel-3'><%= link_to_unless_current image_tag('keyBubble.png'), :remote => true  %></li>
    <li id='panel-4'><%= link_to_unless_current image_tag('dataSource.png'),  :remote => true  %></li>
    <li id='panel-5'><%= link_to_unless_current image_tag('group14.png'), :remote => true  %></li>
</ul>

我有一些 Jquery 用于删除 div 并替换它。但它正在用页面的填充内容替换 div。这里页面中的页面是一些代码：

$(function(){
  $('#panel-1').click(function(){
    $("#remove").remove();
    $.get('../key_issues/index.html', function(html){
      $('.col.span_6_of_7').remove();
      $('.section.group').append(html);  
    });
  });
});

我已经尝试过 ajax-rails gem，但我也无法让它工作.. 有人可以提供一些建议吗？

【问题讨论】：

标签： jquery html ruby-on-rails ajax ruby-on-rails-3.2

【解决方案1】：

简单的方法

<li id='panel-1'><%= link_to image_tag('keyIssues.png'), some_path_to_url_controller , :remote => true %></li>

控制器代码

def some_method
 //your code
 respond_to do |format|
  format.js
 end
end

some_method.js.erb

$("#replace_div").html("<%= j render partial: 'your_partial' %>");

欲了解更多信息railscast

【讨论】：

谢谢您的回复..你能解释一下控制器代码吗..？
使您的远程链接为真，它将搜索 js 格式的响应。你可以做任何你想在替换 div 中显示的内容。
具体来说，link 会提交一个ajax 请求来调用controller 中的remote 函数，该函数随后会查询一些数据并返回一个JS 对象给页面。用 ajax 替换内容/部分。
对不起，如果这似乎是一个愚蠢的问题，.. some_method 是从哪里调用的（我在任何地方都看不到）？是否包含在 application_controller.js 中？
link_to image_tag 中的 href 是“some_path_to_url_controller”，您基本上可以在其中放置应用程序/控制器方法的路径，并使用您自己的路线和方法进行调整。然后单击它肯定会到达控制器/方法的链接。