使用 Rails 和 jQuery 动态渲染部分视图答案

【问题标题】：Dynamically render view in a partial with Rails and jQuery使用 Rails 和 jQuery 动态渲染部分视图
【发布时间】：2013-03-29 00:34:35
【问题描述】：

在我的应用程序中，我有一个用户个人资料页面，其中包含三个选项卡和一个空白 div。有一个默认选项卡为白色，另外两个选项卡较暗且“未选中”。

我想让下面的 div 中的内容根据选择的选项卡呈现部分内容。

我已经让它工作到了 jQuery 允许我单击不同的选项卡并更改选项卡的颜色而无需刷新页面的地步。

但是，我被困在如何正确渲染局部。对此有什么想法吗？我被困在如何根据在 jQuery 中选择的选项卡动态调用部分，实际上我不确定我是否需要另一个文件与之交互以使其工作。我在 Rails 应用程序中对 jQuery 比较陌生，所以我不确定我是否已经完成了我需要做的所有事情。

用户个人资料页面：app > views > show.html.erb

   <ul class="profile-tabs">    

        <%= link_to "<li class=\"tab selected\">Tab 1</li>".html_safe, userprofile_users_path, remote: true %>
        <%= link_to "<li class=\"tab\">Tab 2</li>".html_safe, userprofile_users_path, remote: true %>
        <%= link_to "<li class=\"tab\">Tab 3</li>".html_safe, userprofile_users_path, remote: true %>

    </ul>

<div id="profile-content">

<!--content goes here -->

</div>

jQuery: 应用 > 资产 > javascripts > userprofile.js

$(function() {
        $("li.tab").click(function(e) {
          e.preventDefault();
          $("li.tab").removeClass("selected");
          $(this).addClass("selected");
          $("#profile-content").html("<%= escape_javascript(render partial: 
"How can I make this partial name be generated based on the value of the selected li?")%>");
        });
    });

用户控制器：app > 控制器 > users_controller.rb

class UsersController < ApplicationController

def show
    @user = User.find(params[:id])
end

def userprofile
    respond_to do |format|
        format.js
    end
end
end

三个选项卡对应三个部分，我需要 jQuery 以某种方式根据所选选项卡动态更改正在调用的部分。

如果有其他资源可以回答我的问题，我真的很感激。我无法找到任何可以直接回答我正在尝试做的事情的内容。

更新 ------

我使用了提供 rails_has_elegance 的解决方案，但我的目标 div 中没有出现任何内容。但是，我在 rails 服务器输出中看到了这一点，这似乎正在做我想做的事情：

Started GET "/users/currentoffers" for 127.0.0.1 at 2013-03-28 21:20:01 -0500
Processing by UsersController#currentoffers as JS
   Rendered users/_offers.html.erb (0.1ms)
   Rendered users/currentoffers.js.erb (0.8ms)
Completed 200 OK in 4ms (Views: 3.7ms | ActiveRecord: 0.0ms)
[2013-03-28 21:20:01] WARN  Could not determine content-length of response body. Set      content-length of the response or set Response#chunked = true

【问题讨论】：

标签： javascript jquery ruby-on-rails

【解决方案1】：

如果您想避免大量参数，只需在控制器中进行 3 个不同的操作，每个选项卡一个，每个选项卡都响应 js。然后为视图中的每个操作创建一个 [action].js.erb，如下所示：

$("#tab_content").html("<%= escape_javascript(render('tab1')) %>");

您实际上需要通过 ajax 请求与服务器通信，而您的 onclick 函数会预加载该部分，而您不再有任何远程。

【讨论】：

对不起，如果这真的很基本，但让我看看我是否明白你在说什么：1）在控制器中创建 3 个单独的操作 2）更改 link_to 标签中的路径 2）把那个[action].js.erb 文件中的上述代码存储在 app>views>users 目录中吗？我需要写什么额外的东西来处理你提到的 ajax 请求吗？
我认为这 3 个步骤应该做到这一点 :) Remote: true 很重要，并且在每个操作中都有一个 response_to format.js。
我正是这样做的，但是当我单击其中一个选项卡时，空的 div 没有填充我试图调用的部分。奇怪。
日志中没有错误 - 如果您看到我在问题中添加的内容，似乎部分已呈现，但页面上实际上没有发生任何事情。我不知道为什么会这样。
是的！抱歉，出现了这样一个愚蠢的错误，但我试图将 $('#tab_content') 作为目标，而它应该是 $('#tab-content')。我搞定了，谢谢你的帮助！

【解决方案2】：

在具有 3 个不同选项卡的三个条件的控制器中编写一个操作。通过单击任何选项卡调用 ajax，传递身份参数，例如“tab1”或“tab2”或“tab3”，如果需要，还需要参数。在控制器中，获取参数并调用包含实际业务逻辑的模型函数。

在控制器中获取结果并使用 js.erb 在所有 3 个选项卡下方的 div 中呈现部分内容

【讨论】：