Question

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

我想这样做，以便下面div中的内容根据选择的标签呈现部分内容。

我已经让它工作到jQuery允许我点击不同的选项卡，它会更改选项卡的颜色而不刷新页面。

但是，我仍然坚持如何正确渲染部分。有什么想法吗？我坚持如何根据jQuery中选择的选项卡动态调用部分，实际上我不确定是否需要另一个文件与此交互以使其工作。我在rails应用程序中对jQuery相对较新，所以我不确定我是否已经完成了我需要的所有工作。

用户个人资料页面：app＆gt;意见＆gt; 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：app＆gt;资产＆gt; javascripts＆gt; 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?")%>");
        });
    });

用户控制器：应用＆gt;控制器＆gt; 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

Answer 1

如果你想避免很多参数，只需在你的控制器中做3个不同的动作，每个动作一个，每个动作都响应js。然后为视图中的每个动作创建一个[action] .js.erb，其内容如下：

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

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

Answer 2

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

在控制器中获取结果，然后使用js.erb

在所有3个选项卡下面的div中渲染部分

使用Rails和jQuery动态呈现部分视图

2 个答案: