Question

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

我的屏幕显示多个项目。选择项目后，将显示带有选项卡的“模态”弹出窗口，其中包含第一个选项卡上的“绘图”图形。（实际上有一个getJSON调用来获取图形数据，因此在填充选项卡之后图形才会出现。）

选择一个独特的项目时，一切正常。但是，如果单击之前选择的项目，则不会显示“绘图”图。

这就是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语句之前设置了断点，我看到了绘图空间（占位符-nn），它是父容器（占位符-nn-container），以及上面的容器（右边） -nn）所有都有0高度，宽度，左，右，底部和顶部。但是，容器中的其余选项卡和元素（输入）正确显示。

有什么建议吗？

Answer 1

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

要实现这一点，我必须：

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

此声明不起作用：

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

这样做确实有效：

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

选择另一个模态弹出窗口后，在弹出弹出框中使用选项卡的JQuery flot不会出现

1 个答案: