Bootstrap popover顯示標題，但不顯示動態控件上的內容

我有一個使用.NET 4.5和VisualBasic與Bootstrap 3.7的ASP.NET項目。在特定頁面上，基於用戶所做的選擇，在頁面的MainContent容器中創建動態html表格。該表的數據來自SQL Server數據庫。在表格的選定單元格中，使用javascript函數調用來添加圖像（動態創建表格的同時）以創建並打開引導彈出窗口。 javascript功能位於頁面的MainContent容器內。 3個參數被髮送到該功能 - 圖像的ID，標題和適用於該圖像的內容。所有3個值都作爲字符串值發送。Bootstrap popover顯示標題，但不顯示動態控件上的內容

彈出窗口完全按照我的預期工作，除非它不填充內容。當我從1個彈出窗口圖像單擊到另一個時，會顯示每個不同彈出窗口的適當標題，並且彈出窗口位於正確的位置。我知道這些數據是由javascript函數發送和接收的。如果在JavaScript函數中，我將document.getElementById(ctrlTransfer)更改爲'image'，彈出窗口顯示正確的標題和內容。（它不是由被點擊的特定彈出圖像定位的，而是由頁面上的第一個非動態圖像定位的。另外，當'image'被替換時，點擊其他彈出圖像不會改變標題或內容。）

這裏是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子的呼叫（在項目的獨立代碼模塊中）中創建，表中有選擇地放置一個酥料餅圖像在某些細胞。

用於爲酥料餅的創建圖像的代碼如下：

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中填充標題和內容。

感謝您的幫助。

來源

2017-05-26 user1857249

我發現父元素的樣式有時會干擾popover內部的html。簡單地增加'容器： '體'，'解決了該問題： '<腳本類型= 「文本/ JavaScript的」> 功能DisplayTransferValues（TransferControl，TransferTitle，TransferValue）{ 如果（！TransferTitle = '未定義'）{ var ctrlTransfer ='MainContent_'+ TransferControl; $ document.getElementById（ctrlTransfer））。popover（{ container：'body'， trigger：'hover'， html：true，' – user1857249

我做了一些額外的研究，發現在getbootstrap.com有時父母元素的樣式可能會干擾popover內的html。簡單地增加容器：「身體」，解決了該問題：

<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>

現在無論是標題和內容都在引導酥料餅無誤。

來源

2017-05-31 14:18:34 user1857249

Bootstrap popover顯示標題，但不顯示動態控件上的內容

回答

相關問題