bootstrap popover update content

Question

how do you update the content of bootstrap popover after ajax success, I specifically need to change the value of the input field that I have but once I close the popover and click on it, the original value of the input field shows up? can someone help me out?

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

after the data is saved the popover is closed and when I click edit again the old value shows in the input box.

Answer 1

Please find enclosed a working demo of a popover that will be updated with the response from an ajax request.

I've removed your request parameters just for the demo to be able to do the request with mocky.io.

The trick was to use .attr('value', text) instead of .val(text). I'm not exactly sure what's going on here. Maybe someone can explain why that's different. But with attr it changes the popover and it works.

Another thing that is required is to recreate the popover. I also wanted to destroy the first popover but that doesn't work. So I created the same popover again.

You can also find the same code here at jsFiddle.

There is a bug in the code here at SO. If you get the data from the server and then close the popover, the data will be reset to initial value.

Don't know what's wrong, because it works at jsFiddle with-out that bug.

Update 04.12.2014:

I've improved the code a bit. Now there is a close button in the popover and the data is stored so the data from server is still available when the popover is re-opened.

The bug mentioned above was probably not a SO issue, it was because the data from server was not properly stored. That is also fixed now.

I've also removed some not needed script tags in the demo because tooltip and popover are already included in bootstrap 3.

Update 05.12.2014:

I have another improvement to the code. The line $(this).parent().find('.close').click(...) is not working like I wanted it. I wanted to add the handler only to the close button of the current popover. But it adds it to all elements with class .close. Because $(this).parent() is the body element. I think it is better to do it like this:

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

With aria-describedby you'll get the id of the current popover and then you can find the close button of that popover.

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