使用AJAX結果動態更新Bootstrap Popover

Question

我已閱讀了許多有關使用AJAX結果更新Bootstrap彈出窗口內容的問題，但似乎無法拼湊出適用於我的情況的解決方案。我很抱歉如果我錯過了什麼。

我在模態對話框中的窗體中有一系列輸入框。當某個文本框（＃工具框）被填寫並且另一個文本框（#chamber框）進入焦點時，我發送一個AJAX調用來識別該工作室的適用值並希望它們在彈出窗口中顯示。使用下面的代碼我能夠做到這一點，但只能在第一次嘗試。之後，內容保持不變（即，不會被新房間信息取代）。請注意，我也將AJAX結果放入輸入的自動完成中，並且每次都更改爲新值，只是popover保持不變。

的應用程序的複雜性本身不適合於jFiddle，以下是適用的snipits

HTML：

<div class="control-group"> 
    <label class="control-label" for="chamber">Chamber</label> 
    <div class="controls"> 
     <input id="chamber" name="chamber" type="text" placeholder="Enter a chamber" class="input-xlarge chamberType"> 
     <a href="#" id="chamberPopup"><span class="glyphicon glyphicon-search"></span></a> 
    </div> 
</div> 

商會重點：

$("#chamber").focus(function() { 
    var parent = $('#tool').val(); 
    if (parent != '') { 
     $.ajax({ 
      type: 'POST', 
      url: 'getChamberDropdown.php', 
      data: {parent: parent}, 
      dataType: 'json', 
      async: false, 
      success: function (chamberResult) { 
       var chamberHint; 

       if(chamberResult.length > 0) { 
        chamberHint = JSON.stringify(chamberResult); 
       } else { 
        chamberHint = "No chambers."; 
       } 
       $(function() { 
        $('.chamberType').autocomplete({ 
         source: chamberResult 
        }); 
       }); 

       $('#chamberPopup').popover({ 
        placement: "right", 
        html: true, 
        title: "Applicable Chambers", 
        content: chamberHint 
       }); 
      } 
     }); 
     $('#chamberPopup').popover('show'); 
    } 
}) 

室出來的重點：

$("#chamber").focusout(function() { 
    $('#chamberPopup').popover('hide'); 
}) 

任何意見或援助，將不勝感激。

Answer 1

請將您的代碼調整爲以下內容。由於popover沒有refresh方法，因此您必須每次都要destroy並重新初始化。

$(function() { 
    var popover = $('#chamberPopup'); 
    popover.popover(); 
    $("#chamber").focus(function() { 
     popover.popover('destroy').popover({ 
      placement: "right", 
      html: true, 
      title: "Applicable Chambers", 
      content: 'Loading ..... ... ' 
     }); 
     var parent = $('#tool').val(); 
     if (parent != '') { 
      $.ajax({ 
       type: 'POST', 
       url: 'getChamberDropdown.php', 
       data: {parent: parent}, 
       dataType: 'json', 
       async: false, 
       success: function (chamberResult) { 
        var chamberHint; 

        if(chamberResult.length > 0) { 
         chamberHint = JSON.stringify(chamberResult); 
        } else { 
         chamberHint = "No chambers."; 
        } 
        $('.chamberType').autocomplete({ 
         source: chamberResult 
        }); 

        popover.popover('destroy').popover({ 
         placement: "right", 
         html: true, 
         title: "Applicable Chambers", 
         content: chamberHint 
        }) 
        .popover('show'); 
       } 
      }); 
     } 
    }); 
});