2012-05-07 30 views
0

我有一個顯示頁面,它使用JQuery-ui選項卡基於標籤選擇動態加載內容。Rails的JQuery標籤不清除

這裏是我的網頁:

<%= 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來實現這一目標?

回答

0

它現在通過更改JQuery來清除JQuery-Tab動態創建的兩個類。我只是在通過螢火蟲查看生成的HTML後才注意到它們(注意:我也在加載標籤頁時添加了一些「Loading ...」文本):

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

             } 
           }); 
});