Question

I have a show page which is dynamically loading content based on tab-selection using JQuery-ui tabs.

Here is my page:

<%= 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>

and here is my JQuery:

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

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

Now what’s supposed to happen is I click a tab, it loads the corresponding contents dynamically and clears out the old contents. As it stands it does manage to load contents dynamically when I click a tab but it doesn’t quite clear out the old stuff. What it does is it loads the contents when I click the tab and it leaves it there. But then if I was to click the same tab it will refresh the content. This isn’t what I want, I only want to see Image content when the image tab is clicked and description content when the description tab is clicked.

How can I modify my JQuery to achieve this?

Answer 1

It works now by changing the JQuery to clear both of the classes that JQuery-tab creates dynamically. I only noticed them after looking at the generated HTML via firebug (Note: I also added some “Loading…” text for when the tab is 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...");
       }

                                      }
                               });
});