X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/e398326fea08b53a132086935d24be8dfde1cd47..1bb7352bf1425dc9acf028f863eaff1e5c207571:/apps/workbench/app/assets/javascripts/tab_panes.js diff --git a/apps/workbench/app/assets/javascripts/tab_panes.js b/apps/workbench/app/assets/javascripts/tab_panes.js index 411a009f5c..cca49b2799 100644 --- a/apps/workbench/app/assets/javascripts/tab_panes.js +++ b/apps/workbench/app/assets/javascripts/tab_panes.js @@ -1,77 +1,91 @@ // Load tab panes on demand. See app/views/application/_content.html.erb -// Fire when a tab is selected/clicked. Check whether the content in -// the corresponding pane is loaded (or is being loaded). If not, -// start an AJAX request to load the content. +// Fire when a tab is selected/clicked. $(document).on('shown.bs.tab', '[data-toggle="tab"]', function(e) { - var content_url = $(e.target).attr('data-pane-content-url'); + $(this).trigger('arv:pane:reload'); +}); + +// Fire when the content in a pane becomes stale/dirty. If the pane is +// 'active', reload it right away. Otherwise, just replace the current content +// with a spinner for now, don't load the new content unless/until the pane +// becomes active. +$(document).on('arv:pane:reload', function(e) { + // Unload a single pane. Reload it if it's active. + $(e.target).removeClass('loaded'); var $pane = $($(e.target).attr('href')); - if ($pane.hasClass('loaded')) - return; - $.ajax(content_url, {dataType: 'html', type: 'GET', context: $pane}). - done(function(data, status, jqxhr) { - $('> div > div', this).html(data); - $(this).addClass('loaded'); - $(this).trigger('arv:pane:loaded'); - }).fail(function(jqxhr, status, error) { - var errhtml; - if (jqxhr.getResponseHeader('Content-Type').match(/\btext\/html\b/)) { - var $response = $(jqxhr.responseText); - var $wrapper = $('div#page-wrapper', $response); - if ($wrapper.length) { - errhtml = $wrapper.html(); + if ($pane.hasClass('active')) { + var content_url = $(e.target).attr('data-pane-content-url'); + $.ajax(content_url, {dataType: 'html', type: 'GET', context: $pane}). + done(function(data, status, jqxhr) { + // Preserve collapsed state + var collapsable = {}; + $(".collapse", $pane).each(function(i, c) { + collapsable[c.id] = $(c).hasClass('in'); + }); + var tmp = $(data); + $(".collapse", tmp).each(function(i, c) { + if (collapsable[c.id]) { + $(c).addClass('in'); + } else { + $(c).removeClass('in'); + } + }); + $pane.html(tmp); + $(e.target).addClass('loaded'); + $pane.trigger('arv:pane:loaded'); + }).fail(function(jqxhr, status, error) { + var errhtml; + if (jqxhr.getResponseHeader('Content-Type').match(/\btext\/html\b/)) { + var $response = $(jqxhr.responseText); + var $wrapper = $('div#page-wrapper', $response); + if ($wrapper.length) { + errhtml = $wrapper.html(); + } else { + errhtml = jqxhr.responseText; + } } else { - errhtml = jqxhr.responseText; + errhtml = ("An error occurred: " + + (jqxhr.responseText || status)). + replace(/&/g, '&'). + replace(//g, '>'); } - } else { - errhtml = ("An error occurred: " + - (jqxhr.responseText || status)). - replace(/&/g, '&'). - replace(//g, '>'); - } - $('> div > div', this).html( - '
' + - '' + - ' ' + - 'Reload tab
' + + '' + + ' ' + + 'Reload tab