使用Rails和jQuery动态呈现部分视图 [英] Dynamically render view in a partial with Rails and jQuery

问题描述

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

In my app, I have a user profile page that has three tabs and a blank div below it. There is a default tab that is white and two other tabs that are darker and "unselected".

我想这样做，以便下面div中的内容呈现部分基于选择哪个选项卡。

I want to make it so that the content in the div below renders a partial based on which tab is selected.

我已经让它工作到jQuery允许我点击不同选项卡的位置，它改变了选项卡的颜色而没有页面刷新。

I already have it working to the point where jQuery allows me to click on the different tabs and it changes the colors of the tabs without a page refresh.

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

However, I am stuck on how to get the partial to render correctly. Any thoughts on this? I am stuck on how to dynamically call a partial based on which tab is selected in the jQuery and actually am not sure if I need another file to interact with this to make it work. I am relatively new to jQuery in a rails app so I am not sure if I've done everything I need to.

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

User profile page: 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：app> assets> javascripts> userprofile.js

jQuery: app > assets > 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

Users Controller: 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以某种方式动态更改基于所选选项卡调用的部分。

There are three partials corresponding to the three tabs, and I need the jQuery to somehow dynamically change the partial being called based on the selected tab.

我真的很感激对此有所帮助，或者是否有其他资源可以回答我的问题。我找不到任何直接回答我想做的事情。

I'd really appreciate some help with this, or if there is another resource that can answer my question. I have not been able to find anything that directly answers what I am trying to do.

更新------

我使用了rails_has_elegance提供的解决方案，但我目标的div中没有​​出现任何内容。但是，我在rails服务器输出中看到这个，看起来它正在做我想要的：

I used the solution provided rails_has_elegance but nothing is appearing in the div I am targeting. However, I am seeing this in the rails server output, which seems like it is doing what I want:

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

推荐答案

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

If you want to avoid a lot of parameters, just make 3 different actions in your controller, one for each tab, which each respond to js. Then create a [action].js.erb for each action in the views with something like this:

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

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

You actually need to communicate with the server through a ajax request, whereas your onclick function would preload that partial and you don't have anything remote anymore.

这篇关于使用Rails和jQuery动态呈现部分视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！