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

在我的应用程序中,我有一个用户配置文件页面,其中有三个选项卡,下面有一个空白div。 有一个默认选项卡是白色,另外两个选项卡更暗,“未选中”。

我想这样做,以便下面div中的内容根据选择的选项卡呈现部分内容。

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

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

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

    <%= link_to "
  • Tab 1
  • ".html_safe, userprofile_users_path, remote: true %> <%= link_to "
  • Tab 2
  • ".html_safe, userprofile_users_path, remote: true %> <%= link_to "
  • Tab 3
  • ".html_safe, userprofile_users_path, remote: true %>

jQuery:app> assets> javascripts> userprofile.js

 $(function() { $("li.tab").click(function(e) { e.preventDefault(); $("li.tab").removeClass("selected"); $(this).addClass("selected"); $("#profile-content").html(""); }); }); 

用户控制器: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 

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

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

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

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

在控制器中获取结果,然后使用js.erb在所有3个选项卡下面的div中渲染部分