javascript - 选择另一个模式弹出窗口后，带选项卡的模式弹出窗口中的 JQuery flot 不会出现

Question

将 Visual Studio 2012 与 JQuery、Bootstrap 和 Flot 结合使用。

我的屏幕显示多个项目。选择某个项目后，会出现一个带有选项卡的模态弹出窗口，其中第一个选项卡上包含一个浮点图。 (实际上有一个 getJSON 调用来获取图形数据，因此直到填充选项卡后才会显示图形)。

当选择一个独特的项目时，这一切都很好。但是，当单击先前选择的项目时，Flot 图表不会出现。

Flot 的 HTML 如下所示:

<div id="rightside-@Model.Room.RoomId" class="rightside">
  <div id="placeholder-@Model.Room.RoomId-container"  style="width:460px;height:300px;margin-bottom:28px">
    <div id="placeholder-@Model.Room.RoomId" style="width:460px;height:250px;margin-bottom:20px"></div>
    <input type="text" name="from" class="input-medium" value="#startDate"  />
    to
    <input type="text" name="to" class="input-medium" value="#endDate"/>
    <input type="button" class="btn" data-function="refine-date" data-value="change_graph_dattes" value="Change dates" style="float:right"/>
  </div>
<div>

在单步执行代码时，我在 $.plot 语句之前设置了一个断点，我看到绘图空间 (placeholder-nn)、它的父容器 (placeholder-nn-container) 以及其上方的容器 (右侧-nn) 高度、宽度、左、右、下、上均为 0。但是，容器内的其余选项卡和元素(输入)正确显示。

有什么建议吗？

Answer 1

经过进一步调试，我发现当时图表试图绘制选项卡内的 div 没有大小，但选项卡本身有。因此我认为这与选项卡激活有关。

为了让它发挥作用，我必须:

1. 禁止自动激活第一个选项卡
2. 短暂延迟(1/10 秒)后通过 JavaScript 激活选项卡

此语句不起作用:

$('#tabs a:first').tab('show');

这样做确实有效:

setTimeout(function () { $('#tabs a:first').tab('show'); }, 100);