Tenho uma table
que possui uma td
com o seguinte código :
.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));
Toda vez que o usuário passa o mouse sobre a td
eu disparo um evento de mouseenter
e mostro o popover
.
Só que nessa mesma table
o usuário pode alterar o status que é demonstrado no 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");
}
Repare que eu pego o valor do data("content")
e coloco esse valor em um textarea
para poder editar. E é aí que inicia meu problema.
Quando salvo a informação editada, eu insiro o val()
do textarea
no 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();
});
Coloquei Anderson só para testar.
Aparentemente funciona, pois se clico para editar ele leva o Anderson para o textarea
do modal
, mas se passo o mouse sobre o campo ele mostra o valor antigo e não o que eu salvei.
Existe alguma forma de atualizar o popver
para ele mostrar o novo valor sem ter que recarregar a tela inteira?
div
pronto por exemplo. Nesse caso, teria que "recriar" o popover depois de mudar o valor do atributo, algo como$('#idDoElemento').popover();
$(linha).find("td:nth-child(7)").data('content', 'ANDERSON').popover();
Mas ele não recarrega. Eu monto o popover quando crio a table.