Question

如何在ajax成功后更新bootstrap popover的内容，我特别需要更改我的输入字段的值，但是一旦我关闭popover并单击它，输入字段的原始值就会显示出来？有人可以帮帮我吗？

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

您也可以在jsFiddle找到相同的代码。

SO的代码中有一个错误。如果从服务器获取数据然后关闭弹出框，则数据将重置为初始值。

不知道出了什么问题，因为它可以在jsFiddle中解决这个错误。

更新04.12.2014：

我对代码进行了一些改进。现在popover中有一个关闭按钮，数据被存储，因此当重新打开popover时，来自服务器的数据仍然可用。

上面提到的错误可能不是SO问题，因为来自服务器的数据没有正确存储。现在也已修复。

我还在演示中删除了一些不需要的脚本标签，因为工具提示和弹出框已经包含在bootstrap 3中。

更新05.12.2014：

我对代码有了另一个改进。 $(this).parent().find('.close').click(...)行不能像我想要的那样工作。我想将处理程序仅添加到当前弹出窗口的关闭按钮。但它将它添加到类.close的所有元素。因为$（this）.parent（）是body元素。我认为最好这样做：

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

使用aria-describedby，您将获得当前弹出窗口的ID，然后您可以找到该弹出窗口的关闭按钮。

＆＃13;

$(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);
            }
        });
    });
});

＆＃13;

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

＆＃13;

bootstrap popover更新内容

1 个答案: