引导弹出框更新内容

bootstrap popover update content

本文关键字：更新 新内容      更新时间：2023-09-26

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

保存数据后，弹出窗口将关闭，当我再次单击编辑时，旧值显示在输入框中。

请找到随附的弹出窗口的工作演示，该演示将使用 ajax 请求的响应进行更新。

我删除了您的请求参数，只是为了让演示能够使用 mocky.io 执行请求。

诀窍是使用.attr('value', text)而不是.val(text)。我不太确定这里发生了什么。也许有人可以解释为什么这是不同的。但是使用 attr，它会更改弹出窗口并且可以工作。

需要的另一件事是重新创建弹出框。我也想摧毁第一个弹出窗口，但这不起作用。所以我再次创建了相同的弹出窗口。

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

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

不知道出了什么问题，因为它可以在jsFiddle上工作，而没有那个错误。

更新 04.12.2014：

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

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

我还删除了演示中一些不需要的脚本标签，因为工具提示和弹出框已经包含在引导程序 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，然后可以找到该弹出框的关闭按钮。

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

相关文章：