Rails 4 ajax在引导选项卡中加载内容
我有同样的问题，如本文所述。
但是，我仍然觉得难以理解解决方案。
风景：
/ Nav tabs %ul.nav.nav-tabs %li.active =link_to "Tab1", "#tab1", html_options = { "data-toggle" => "tab" } %li =link_to "Tab2", "#tab2", html_options = { "data-toggle" => "tab" } %li =link_to "Tab3", "#tab3", html_options = { "data-toggle" => "tab" } / Tab panes .tab-content .tab-pane.active#tab1 %p Fetch content .tab-pane.active#tab2 %ul.nav.nav-pills %li.active= link_to 'Overview', "#overview", html_options = { "data-toggle" => "tab"} %li= link_to 'Details', "#details", html_options = { "data-toggle" => "tab"} .tab-content .tab-pane.active#overview %p Fetch overview .tab-pane.active#details %p Fetch details .tab-pane.active#tab3 %p Fetch content 控制器：
def show @data_tab1 = User.admin @data_tab2 = User.member @data_tab3 = User.moderator end
我不希望在每个请求中加载这三组数据。 这样当单击第二个选项卡并加载@ data_tab2时。
我发现这段代码可能很有用：
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var target = $(e.target).attr("href") // activated tab if ($(target).is(':empty')) { $.ajax({ type: "GET", url: "**WHAT SHOULD I PUT IN HERE**", error: function(data){ alert("There was a problem"); }, success: function(data){ $(target).html(data); } }) } })
所以，我想知道：
1.如何更改每个单击选项卡的活动状态
2.如何ajax加载标签数据
Ajax调用错误。
[Error] TypeError: undefined is not a function (evaluating 'e.target.data("target")') (anonymous function) (1, line 3) dispatch (jquery.js, line 4642) handle (jquery.js, line 4310) trigger (jquery.js, line 4551) (anonymous function) (jquery.js, line 5261) each (jquery.js, line 384) each (jquery.js, line 137) trigger (jquery.js, line 5260) (anonymous function) (bootstrap.js, line 1048) next (bootstrap.js, line 1091) activate (bootstrap.js, line 1098) show (bootstrap.js, line 1043) (anonymous function) (bootstrap.js, line 1113) each (jquery.js, line 384) each (jquery.js, line 137) Plugin (bootstrap.js, line 1108) clickHandler (bootstrap.js, line 1137) dispatch (jquery.js, line 4642) handle (jquery.js, line 4310)
我想给每个选项卡窗格分一部分，如何动态更改控制器中的部分名称？ 例如
/ Tab panes .tab-content .tab-pane.active#tab1 = render "tab1" .tab-pane.active#tab2 = render "tab2" .tab-pane.active#tab3 = render "tab3"
我应该使用不同的实例变量吗？
def show @data_tab = User.admin @data_tab = User.member if params[:tab] == "member" @data_tab = User.moderator if params[:tab] == "moderator" end
要么
def show @data_tab1 = User.admin @data_tab2 = User.member if params[:tab] == "member" @data_tab3 = User.moderator if params[:tab] == "moderator" end
更新：
它保持渲染与vid剪辑中显示的相同数据集。
http://tinypic.com/r/28k5302/8
请指教。
- 如何更改每个单击选项卡的活动状态
如果你看一下bootstrap tabs markup ，它会说：
只需在元素上指定data-toggle =“tab”或data-toggle =“pill”，即可激活制表符或精选导航而无需编写任何JavaScript
所以你的标记必须是这样的：
/ Nav tabs %ul.nav.nav-tabs %li.active =link_to "Tab1", "#tab1", html_options = { "data-toggle" => "tab" } %li =link_to "Tab2", "#tab2", html_options = { "data-toggle" => "tab" } %li =link_to "Tab3", "#tab3", html_options = { "data-toggle" => "tab" } / Tab panes .tab-content .tab-pane.active#tab1 %p Fetch content .tab-pane#tab2 %ul.nav.nav-pills %li.active = link_to 'Overview', "#overview", html_options = { "data-toggle" => "tab"} %li = link_to 'Details', "#details", html_options = { "data-toggle" => "tab"} .tab-content .tab-pane.active#overview %p Fetch overview .tab-pane#details %p Fetch details .tab-pane#tab3 %p Fetch content
注意： 您只需要在要显示的选项卡上应用活动类。
- 如何ajax加载标签数据
一个。 创建您希望ajax请求进入的自定义路由，或者您可以使用show动作。
湾 我们需要添加一些数据属性，以便我们知道正在单击哪个选项卡。 然后我们可以在后端定位它。
/ Nav tabs %ul.nav.nav-tabs %li.active =link_to "Tab1", "#tab1", data: {toggle: "tab", target: "admin", href: "#{your_show_action_path} %li =link_to "Tab2", "#tab2", data: {toggle: "tab", target: "member", href: "#{your_show_action_path} %li =link_to "Tab3", "#tab3", data: {toggle: "tab", target: "moderator", href: "#{your_show_action_path} / Tab panes .tab-content .tab-pane.active#tab1 %p // this will be activated by default so you can load default content here .tab-pane#tab2 %ul.nav.nav-pills %li.active = link_to 'Overview', "#overview", html_options = { "data-toggle" => "tab"} %li = link_to 'Details', "#details", html_options = { "data-toggle" => "tab"} .tab-content .tab-pane.active#overview %p Fetch overview .tab-pane#details %p Fetch details .tab-pane#tab3 %p Fetch content
C。 使用JS来激活你的ajax请求
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var target = $(this).data("target"); var href = $(this).data("href"); $.ajax({ type: "GET", url: href, data: {tab: target}, dataType: "script" }); })
d。 现在，您可以根据ajax请求发送的选项卡变量加载选项卡内容。
def show @data_tab = User.admin @data_tab = User.member if params[:tab] == "member" @data_tab = User.moderator if params[:tab] == "moderator" end #show.js.erb $(".tab-pane.active").html("your content here");
我想给每个选项卡窗格分一部分，如何动态更改控制器中的部分名称？ 我应该使用不同的实例变量吗？
如果内容相同则可以使用相同的部分和相同的实例变量，但如果它不同，则可以检查params以获取目标变量的值，然后相应地在js.erb中渲染部分
更新：
1：如何动态更改.tab-pane.active，因为我将设置成员和主持人空部分，这样当我单击“成员”选项卡时，部分将填充ajax数据并向该窗格添加“活动”类？
你不需要在这里添加活动类，因为如果你的应用程序中有bootstrap js，它会自动在你点击的选项卡上设置活动类，checkout bootstrap docs
2：js.erb如何响应不同的实例变量并呈现不同的部分？
当您单击选项卡时，我们获取data-target属性并将其作为params发送到ajax请求中，然后在js.erb文件中我们检查这些param值以呈现partials。
3.如何阻止先前点击的标签发送ajax请求？
不确定你的意思，但之前点击的标签不会也不应该发送ajax请求。 如果您快速单击2个选项卡，那么发送2个ajax请求是正常的，因为它最终会显示活动选项卡。
- 要更改选项卡的活动状态，您需要向其添加
active类（并从以前的选项卡中删除它） - 要加载数据，您需要将您的ajax请求的
url放入显示操作的路径（使用param datects需要加载哪个选项卡）。 或者你可以使用远程链接 – 这里提供了很好的样本