0

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を変更するにはどうすればよいですか？

4

1 に答える 1

0

JQueryを変更して、JQuery-tabが動的に作成する両方のクラスをクリアすることで機能するようになりました。生成されたHTMLをfirebugで確認した後でのみ、それらに気づきました（注：タブの読み込み時に「読み込み中...」というテキストも追加しました）：

//= 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...");
       }

                                      }
                               });
});
于 2012-05-09T14:40:55.493 に答える