Вкладки начальной загрузки: загрузите средство просмотра NGL во вкладку

Question

У меня проблемы с загрузкой программы просмотра NGL во вкладках начальной загрузки.Он отлично работает, если загружен за пределы вкладок.Тем не менее, он не работает, если я пытаюсь загрузить его на вкладке, отличной от видимой по умолчанию.Любые предложения приветствуются.

HTML:

<ul id="myTabs" class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#chartcontainer1" aria- 
    controls="chartcontainer1" role="tab" data-toggle="tab">Chart 1</a></li>
  <li role="presentation"><a href="#chartcontainer2" aria- 
  controls="chartcontainer2" role="tab" data-toggle="tab">Chart 2</a></li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="chartcontainer1">
  Some content
  </div>
  <div role="tabpanel" class="tab-pane fade" id="chartcontainer2">
  Some other content
  <span id="showfilename"></span>
  <div id="viewport" style="width:400px; height:300px;"></div>
  </div>
</div>

javascript:

$(document).ready(function() {

$('#myTabs a[href="#chartcontainer2"]').on('click', function(e) {
  e.preventDefault();
  $(this).show()
  addViewer()

  function addViewer () {
var pdbfile = "rcsb://1CRN"
$('#showfilename').html(pdbfile);
var stage = new NGL.Stage("viewport");
stage.loadFile(pdbfile).then(function (component) {
  component.addRepresentation("cartoon");
  component.autoView();
      });
    }
});

jsfiddle: работает за пределами jsfiddle: не работает(внутренняя вкладка)

Answer 1

Вам нужно добавить свой просмотрщик, когда отображается вкладка.Используйте событие selected.bs.tab.

Я обновил вашу скрипку; -)