选择另一个模态弹出窗口后，带有选项卡的模态弹出窗口中的 JQuery flot 不会出现答案

【问题标题】：JQuery flot within Modal Popup with Tabs does not appear after selecting another modal popup选择另一个模态弹出窗口后，带有选项卡的模态弹出窗口中的 JQuery flot 不会出现
【发布时间】：2014-10-25 05:03:05
【问题描述】：

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

我的屏幕显示多个项目。选择一个项目时，会出现一个带有选项卡的模态弹出窗口，其中包含第一个选项卡上的 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。但是，容器中的其余选项卡和元素（输入）显示正常。

有什么建议吗？

【问题讨论】：

在您从选项卡切换到选项卡时是否会发生这种情况？
当这些组件从隐藏变为可见时，您通常需要重新初始化或强制重绘它们。
This all works fine when selecting a unique item. However, when an item that was previously selected is clicked the Flot graph does not appear. - 这是什么意思？你能创建一个示例小提琴吗？
从 Tab 切换到 Tab 效果很好。当模态窗口隐藏然后返回时，div 没有任何位置信息。 cvrebert——我想我正在尝试重新绘制组件。但是，它们没有位置信息，因此浮动不会重绘。
我花了一点力气重现你的情况但失败了：plnkr.co/edit/1ajiLzoeb2yJaA1YxRG8?p=preview（一切似乎都还好）。您需要复制它以获得进一步的帮助。

标签： javascript jquery twitter-bootstrap flot

【解决方案1】：

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

要让它发挥作用，我必须：

禁用第一个选项卡的自动激活
在短暂延迟（1/10 秒）后通过 javascript 激活选项卡

此语句无效：

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

这样做确实有效：

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

【讨论】：