Динамическое обновление Bootstrap Popover с результатами AJAX

Question

Я прочитал многие вопросы, касающиеся использования результатов AJAX для обновления содержимого Bootstrap popover, но, похоже, не может объединить решение, которое будет работать для моей ситуации. Прошу прощения, если я что-то пропустил.

У меня есть серия ящиков ввода в форме в диалоговом окне Модаль. Когда определенное текстовое поле (поле #tool) заполняется, а другое текстовое поле (поле #chamber) входит в фокус, я посылаю вызов AJAX для определения применимых значений для камеры и желаю, чтобы они отображались в popover. Используя приведенный ниже код, я могу это сделать, но только с первой попытки. После этого содержимое остается тем же (т. Е. Не заменяется новой информацией о палате). Обратите внимание, что я также помещаю результаты AJAX в autocomplete для ввода и каждый раз меняет на новые значения, только 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'); 
       } 
      }); 
     } 
    }); 
});