7

在我的应用程序中，我有一个用户个人资料页面，其中包含三个选项卡和一个空白 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 > controllers > 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
4

2 回答 2

9

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

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

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

于 2013-03-29T00:44:19.083 回答
0

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

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

于 2013-03-29T05:43:46.783 回答