Refresh in data attr to show in bootstrap Popover

Asked

Viewed 163 times

1

I have a table who owns 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 hovers over the td I trigger an event of mouseenter and show the popover.

Only this very one table the user can change the status that is demonstrated in the 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 take the value of data("content") and put that value in a textarea to be able to edit. And this is where my problem starts.

When I save the edited information, I enter the val() of textarea in the 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 the test.

Apparently it works because if I click to edit it takes Anderson to the 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 the popver to show the new value without having to reload the whole screen?

jquery html5 bootstrap
  • 1

    You need to see how Popover is mounted, whether it is read dynamically each time it displays, or when it starts it reads the attribute and leaves it in a div ready for example. In that case, you would have to "recreate" the Popover after changing the value of the attribute, something like $('#idDoElemento').popover();

  • Thanks for commenting. I couldn’t, I added the following line: $(linha).find("td:nth-child(7)").data('content', 'ANDERSON').popover(); But it does not reload. I mount the Popover when I create the table.

1 answer

0

Apparently the bootstrap always take what’s in data-content when it generates Popover, and then no longer updates. One solution is to say that content Popover will be dynamic, changing the property data-content to another, as date-text, to prevent the bootstrap manages Popover with fixed content.

Then, when starting Pover, use the parameter content and take the value always dynamically, thus (taking your example of code):

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

Obviously, change all the code to read the date-text in place of data-content.

I made a jsfiddle to test, see here: https://jsfiddle.net/VUZhL/2758/

I hope it helps.

Browser other questions tagged jquery html5 bootstrap

You are not signed in. Login or sign up in order to post.