Question

我有一个Boot-Strap标签如下

<html> <head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<!-- INPUT PANEL -->
<div class="CustomSideBar" style="width: 300px ">
  <form class="well" method="POST" id="inputForm">
     <select name="pickTheSelected" onchange="??????">
          <option value="OPTION1">OPTION1</option> 
          <option value="OPTION2">OPTION2</option> 
     </select>
  </form>
</div>
<!-- BOOT STRAP -->
<ul id="myTab" class="nav nav-tabs">
   <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
   <li class="active"><a href="#tab2" data-toggle="tab">tab2</a></li>    
</ul>

<div id="myTabContent" class="tab-content">
     <div class="tab-pane fade in active" id="tab1">
        <!-- IT Can be a Form or Div Container -->
        <div class="well"  id="LinePlot">
        </div>
     </div>

     <div class="tab-pane fade in active" id="tab2">
        <!-- IT Can be a Form or Div Container -->
        <div class="well" id="BarPlot">

        </div>
     </div>
</div>
</body>
</html>

考虑具有ID id =“LinePlot”或id =“BarPlot”的BootStrap Tab div容器，根据ID为“inputForm”的表单中选择的输入绘制图表我有根据所选输入绘制数据或图表的想法。我很好。

但需要有关我的要求的信息或帮助。

要求

1）基于表单ID“inputForm”的输入更改我需要刷新Active Bootstrap Tab DIV容器。虽然不应刷新未选中的选项卡

示例如果活动Tab的ID为“tab2”on输入更改ID为“inputForm”的表单我需要刷新属于“BarPlot”的div容器。虽然“LinePlot”中的div容器不需要参考 - 反之亦然，如果“tab1”处于活动状态。

2）类似地，Div容器应仅在Tab中处于活动状态或已选中。基于ID为“InputForm”的表单中的Selected值。

希望我已经解释了我的要求

我发现我很难达到我的要求基于JavaScript。更多我不熟悉它。

如果有人，请告诉我实现我的要求的方法。通过JavaScript / JQuery或使用Ajax的Bootstrap。

谢谢和问候

Answer 1

这对jquery来说实际上并不那么难。您可以使用$.ajax()函数获取数据。使用$("#target-id").html(newContent);将数据加载到目标中。要知道哪个选项卡处于活动状态，您可以选择父项，在您的情况下$("#myTabContent div.tab-pane.active")（在您的代码中，只有一个选项卡应该激活类）。要获取输入的值：$("#my-input").val()。您不必在html中指定任何事件处理程序，为此您可以使用$("...").click(function() {...} )，.change()等。

在输入表单上的BootStrap选项卡中刷新表单或DIV容器

1 个答案: