Refresh in attr date to show on popover bootstrap

Navigation
1

I have a table that has a td with the following code: 

.append($("<td class='popOverStatusAlmo' data-container='body' data-toggle='popover' data-placement='top' data-content='" + this.StatusAlmoxarifado + "' style='color:red'></td>").text(this.StatusAlmoxarifado != "" ? this.StatusAlmoxarifado.toUpperCase().substring(0, 15) + "..." : this.StatusAlmoxarifado));

Every time the user hover over td I trigger an event of mouseenter and show popover .

Only in this same table the user can change the status that is shown in popover . 

if ($(e.target).hasClass("fa-pencil-square-o")) {
    $this = $(e.target).parent().parent();
    $("#txbMyModalStatusAlmoxarifado").val($($this).find("td:nth-child(7)").data("content"));
    $("#myModalStatusAlmoxarifado").modal("show");
}

Notice that I get the value of data("content") and put this value in textarea to be able to edit. And that's where my problem starts.

When I save the edited information, I enter the val() of textarea into attr data . 

$("#btnModalStatusAlmoxarifado").click(function () {
    var linha = $this;
    var comentario = $("#txbMyModalStatusAlmoxarifado").val();
    var pim = $(linha).find("td:nth-child(1)").text();
    modificarStatusAlmoxarifado(pim, comentario);    
    $(linha).find("td:nth-child(7)").text(comentario.toUpperCase().substring(0, 15) + "...");
    $(linha).find("td:nth-child(7)").data('content', 'ANDERSON');
    $('[data-toggle="tooltip"]').tooltip();
});

I put Anderson to test.

It seems to work, because if I click to edit it takes Anderson to textarea of modal , but if I hover over the field it shows the old value and not what I saved.

Is there any way to update popver so it shows the new value without having to reload the entire screen?

    
asked by anonymous 16.08.2017 / 15:13

1 answer

0

It seems that bootstrap always takes what's in data-content when it generates the popover, and then does not update anymore. One solution is to say that the content of the popover will be dynamic, changing the data-content property to another, such as date-text , to avoid that bootstrap manages the popover with fixed content.

Then, when starting the popover, use the content parameter and get the value always dynamically, like this (catching your code example): 

$(linha).find("td:nth-child(7)").popover({
    content: function() { 
        return $(this).data('texto'); 
   }
});

Of course, change all the code to read data-text instead of data-content .

I made a jsfiddle to test, see here: link

I hope it helps.

    
16.08.2017 / 18:55
Run search update on button Page content offset when closing modal bootstrap