Question

我有一个使用.NET 4.5的ASP.NET项目和一个带Bootstrap 3.7的VisualBasic。在特定页面上，根据用户所做的选择，在页面的MainContent容器中创建动态html表。该表的数据来自SQL Server数据库。在表的选定单元格中，使用javascript函数调用添加图像（在创建表的同时动态创建）以创建并打开引导程序弹出窗口。 javascript函数位于页面的MainContent容器内。 3个参数被发送到该功能 - 图像的ID，标题和适用于该图像的内容。所有3个值都以字符串值的形式发送。

popover的工作方式与我预期的完全相同，只是它不会填充内容。当我从1个弹出窗口图像单击到另一个弹出窗口时，将显示每个不同弹出窗口的相应标题，并且弹出窗口位于正确的位置。我知道数据是由javascript函数发送和接收的。如果在JavaScript函数中我将document.getElementById(ctrlTransfer)更改为'image'，则popover会显示正确的标题和内容。（它不是由被点击的特定popover图像定位的，而是由页面上的第一个非动态图像定位。此外，当'image'被替换时，单击其他popover图像不会更改标题或内容。）

这是JavaScript函数

<script type="text/javascript">
   function DisplayTransferValues(TransferControl, TransferTitle, TransferValue) {
      if (TransferTitle != 'undefined') {
         var ctrlTransfer = 'MainContent_' + TransferControl;

         $document.getElementById(ctrlTransfer)).popover({
            trigger: 'hover',
            html: true,
            title: TransferTitle,
            content: TransferValue,
         }).popover("show");
      }
   }
</script>

html表是通过调用ASP.NET子（在项目中的独立代码模块中）创建的，该子选择性地将弹出图像放在表中的某些单元格中。

为popover创建图像的代码如下：

Dim ibnTrnsfr As ImageButton = New ImageButton
ibnTrnsfr.ID = "ibnTrnsfr" & strCntrlCounter
ibnTrnsfr.Height = 12
ibnTrnsfr.Width = 12

If Not arrScheming(intRow, intCol, 25).Equals(DBNull.Value) Then
   ibnTrnsfr.ImageUrl = "/Images/TransferOutBlue4.png"
   strTransfrOut = "Transfer Out of " & strCntrlCounter
   ibnTrnsfr.OnClientClick = "DisplayTransferValues('" & ibnTrnsfr.ID & "', '" & strTrnsfrOut & "', '" & arrScheming(intRow, intCol, 25) & "'); return false;"
ElseIf Not arrScheming(intRow, intCol, 26).Equals(DBNull.Value) Then
   ibnTrnsfr.ImageUrl = "/Images/TransferOutBlue4.png"
   strTransfrIn = "Transfer into " & strCntrlCounter
   ibnTrnsfr.OnClientClick = "DisplayTransferValues('" & ibnTrnsfr.ID & "', '" & strTrnsfrIn & "', '" & arrScheming(intRow, intCol, 26) & "'); return false;"
End If

后面的页面代码中的附加代码实际上将此图像添加到表格单元格中。

我已采取的步骤：

在DisplayTransferValues函数中添加了一个函数，用于接收内容数据并填充。
为加载时间添加了DisplayTransferValues的延迟。
在发送给函数的参数中切换“TransferTitle”和“TransferValue”的顺序。它成功地将TransferValue中的正确数据加载到弹出窗口的标题区域中。

我希望在popover中填充标题和内容。

感谢您的帮助。

Answer 1

我做了一些额外的研究，发现在getbootstrap.com上，有时父元素的样式会干扰popover中的html。只需添加容器：＆＃39; body＆＃39;，修复了问题：

<script type="text/javascript">
   function DisplayTransferValues(TransferControl, TransferTitle, TransferValue) {
      if (TransferTitle != 'undefined') {
         var ctrlTransfer = 'MainContent_' + TransferControl;
         $document.getElementById(ctrlTransfer)).popover({
            container: ' body',
            trigger: 'hover',
            html: true,
            title: TransferTitle,
            content: TransferValue,
         }).popover("show");
      }
   }
</script>

现在，在Bootstrap Popover中正确填充了Title和Content。

Bootstrap popover显示标题但不包含动态控件的内容

1 个答案: