From: Tomas Sedovic<tsedovic(a)redhat.com>
https://bugzilla.redhat.com/show_bug.cgi?id=679147
In a JS-enabled browser, we use jQuery UI Tabs to display the contents of the
details pane. The content is loaded using ajax whenever the user switches a
tab.
The bug was that the first tab never got reloaded. That caused
inconsistencies in the UI.
As a part of the fix, the text in the tab headers is now enclosed in<span>
tags which allows us to show a message notifying the user that the tab is
being loaded.
For whatever reason, jQuery UI requires that<span> tag for this to work.
---
src/app/views/layouts/_details_pane.haml | 4 +++-
src/public/javascripts/application.js | 2 +-
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/app/views/layouts/_details_pane.haml
b/src/app/views/layouts/_details_pane.haml
index 89ea471..c38bff4 100644
--- a/src/app/views/layouts/_details_pane.haml
+++ b/src/app/views/layouts/_details_pane.haml
@@ -1,6 +1,8 @@
%ul.ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all
- @tab_captions.each do |tab|
%li.ui-state-default.ui-corner-top{ :class => "#{'ui-tabs-selected
ui-state-active' if @details_tab == slug(tab)}"}
- = link_to tab, @url_params.merge(:details_tab => slug(tab))
+ %a{ :href => url_for(@url_params.merge(:details_tab => slug(tab)))}
+ %span
+ = tab
#details-selected
= render :partial => @details_tab
diff --git a/src/public/javascripts/application.js
b/src/public/javascripts/application.js
index ef3b1d5..af29bd6 100644
--- a/src/public/javascripts/application.js
+++ b/src/public/javascripts/application.js
@@ -75,7 +75,7 @@ var Conductor = {
},
enhanceDetailsTabs: function () {
- $('#details-view ul li a').first().attr('href',
'#details-selected');
+ $('#details-selected').hide();
$('#details-view').tabs('destroy').tabs();
}
};
ACK
(Only disadvantage is that now it does ajax request on default tab which
is actually already loaded, but afaik there is not simple solution for
this - we can do more investigation later when working on new UI)