Question

如何在ajax成功後更新引導彈窗的內容，我特別需要更改我擁有的輸入字段的值，但是一旦關閉了彈出窗口並單擊它，原始值輸入字段顯示？有人可以幫我嗎？

<button class="btn btn-primary edit" data-content='<input type="text" id="name" value="some value"> 
<button class="btn btn-primary save">Save</button>'>Edit</button> 

的JavaScript：

$('.edit').popover({ 
    placement: 'left', 
    html: true, 
}); 

$('body').on("click", ".save", function() { 
    var name = $('#name').val(); 

    $.ajax({ 
     type: "POST", 
     url: "test.php", 
     data: { 
      name: name 
     }, 
     cache: false, 
     success: function(response) { 
      if (response.indexOf("success") != -1) { 
       $('#name').val(name); 
       $('.edit').popover('hide').next('.popover').remove(); 
      } 
     } 
    }); 
}); 

後的數據被保存在酥料餅被關閉，當我再次點擊修改，舊值顯示在輸入框中。

Answer 1

請參閱隨附的演示文稿，該演示文稿將使用ajax請求的響應進行更新。

我已經刪除了您的請求參數，只是爲了能夠使用mocky.io執行請求。

訣竅是使用.attr('value', text)而不是.val(text)。我不確定這裏發生了什麼事。也許有人可以解釋爲什麼不同。 但與attr它改變了popover和它的作品。

另一件需要的是重新創建popover。我也想摧毀第一個popover，但這不起作用。所以我又創造了同樣的popover。

您也可以在這裏找到相同的代碼jsFiddle。

SO在代碼中存在一個錯誤。如果您從服務器獲取數據並關閉彈出窗口，則數據將重置爲初始值。

不知道什麼是錯的，因爲它在jsFiddle中沒有這個bug。

更新2014年4月12日：

我改善一下代碼。現在彈出窗口中有一個關閉按鈕，並且存儲了數據，因此當彈出窗口重新打開時，服務器中的數據仍然可用。

上面提到的錯誤可能不是SO問題，這是因爲服務器的數據沒有正確存儲。這現在也是固定的。

我也刪除了演示一些並不需要的腳本標籤，因爲工具提示和酥料餅在引導已經包含3

更新2014年5月12日：

我還有一個改進的代碼。 行$(this).parent().find('.close').click(...)不能像我想要的那樣工作。我想只將處理程序添加到當前彈出窗口的關閉按鈕。但它將它添加到類.close的所有元素。 因爲$（this）.parent（）是正文元素。我覺得這是更好地做這樣的：

var current_popover = '#' + $(e.target).attr('aria-describedby'); 
var $cur_pop = $(current_popover); 
$cur_pop.find('.close').click({}); 

隨着aria-describedby你會得到當前酥料餅的ID，然後你可以找到酥料餅的關閉按鈕。

$(function() { 
 
    var editData = 'new value'; 
 
    var doPopover = function (item, text) { 
 
     $('#name').attr('value',text); // use set attr and not val() 
 
     //$('#name').val(text); //<<<< not working here doesn't set DOM properly 
 
         
 
     var $pop = $(item); 
 
     
 
     $pop.popover({ 
 
      placement: 'right', 
 
      title: 'edit <a class="close" href="#">&times;</a>', 
 
      trigger: 'click', 
 
      html: true, 
 
      content: function() { 
 
       return $('#popup-content').html(); 
 
      } 
 
     }).on('shown.bs.popover', function(e) { 
 
      // console.log('triggered'); 
 
      // 'aria-describedby' is the id of the current popover 
 
      var current_popover = '#' + $(e.target).attr('aria-describedby'); 
 
      var $cur_pop = $(current_popover); 
 
      
 
      $cur_pop.find('.close').click(function(){ 
 
       //console.log('close triggered'); 
 
       $pop.popover('hide'); 
 
      }); 
 
     }); 
 

 
     return $pop; 
 
    }; 
 

 
    // enable popover 
 
    doPopover('.edit', editData); 
 
    
 
    // edit button click handler to show popover 
 
    $('.edit').click(function() { 
 
     doPopover('.edit', editData); 
 
    }); 
 
    
 
    $('body').on("click", ".save", function (e) { 
 
     e.preventDefault(); 
 
     var name = $('#name').val(); 
 
     
 
     //console.log($popover); 
 
     $.ajax({ 
 
      type: "GET", //"POST", 
 
      url: "http://www.mocky.io/v2/547f86501713955b0a8ed4da", //"test.php", 
 
      data: { 
 
       //name: name 
 
      }, 
 
      cache: false, 
 
      success: function (response) { 
 
       editData = response.data; 
 
       doPopover('.edit', editData); 
 
       console.log('response: ', editData); 
 
      } 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 

 
<button class="btn btn-primary edit" data-html="true" data-toggle="popover" class="edit" data-title="Edit">Edit</button> 
 
<div id="popup-content" class="hide"> 
 
    <input type="text" id="name" value="some value" /> 
 
    <button class="btn btn-primary save">Save</button> 
 
</div>