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>