Rails JQuery选项卡未清除答案

【问题标题】：Rails JQuery Tabs Not ClearingRails JQuery选项卡未清除
【发布时间】：2012-05-07 21:55:29
【问题描述】：

我有一个显示页面，它使用 JQuery-ui 选项卡根据选项卡选择动态加载内容。

这是我的页面：

<%= stylesheet_link_tag 'upload.css', :media => 'screen' %>
<%= javascript_include_tag "tabs"%>

<div id="tabs">
    <ul>
        <li id="active"><%= link_to "Description" , :id => @upload.id, :action => "description"%></li>          
        <li><%= link_to "Images" , :id => @upload.id, :action => "images"%></li>
    </ul>

<div id="#content_area">
</div>
</div>

这是我的 JQuery：

//= require jquery
//= require jquery-ui

$(document).ready(function(){
    var $tabs = $("#tabs").tabs({ select: function(event, ui) {
                                          $(ui.panel).empty();
                                      }
                               });
});

现在应该发生的是我单击一个选项卡，它会动态加载相应的内容并清除旧内容。就目前而言，当我单击选项卡时，它确实设法动态加载内容，但它并没有完全清除旧的东西。它的作用是在我单击选项卡并将其保留在那里时加载内容。但是，如果我要单击同一个选项卡，它将刷新内容。这不是我想要的，我只想在单击图像选项卡时看到图像内容，并在单击描述选项卡时看到描述内容。

如何修改我的 JQuery 来实现这一点？

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-3 jquery-ui tabs jquery-tabs

【解决方案1】：

现在可以通过更改 JQuery 来清除 JQuery-tab 动态创建的两个类。我只是在通过 firebug 查看生成的 HTML 后才注意到它们（注意：我还添加了一些“正在加载...”标签页加载时的文本）：

//= require jquery
//= require jquery-ui

$(document).ready(function(){
    var $tabs = $("#tabs").tabs({ select: function(event, ui) {                                         
                                          $("#ui-tabs-1").empty();
                                          $("#ui-tabs-2").empty();
                                          if($.data(ui.tab, 'load.tabs')) {
           $(ui.panel).html("Loading...");
       }

                                      }
                               });
});

【讨论】：