1

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?

2
  • 1
    Precisa ver como é montado o popover, se é lido dinamicamente cada vez que exibe, ou quando inicia ele lê o atributo e deixa em um div pronto por exemplo. Nesse caso, teria que "recriar" o popover depois de mudar o valor do atributo, algo como $('#idDoElemento').popover(); Commented 16/08/2017 às 13:22
  • Obrigado por comentar. Não consegui, adicionei a seguinte linha : $(linha).find("td:nth-child(7)").data('content', 'ANDERSON').popover(); Mas ele não recarrega. Eu monto o popover quando crio a table. Commented 16/08/2017 às 13:31

1 Resposta 1

0

Aparentemente o bootstrap sempre pega o que está no data-content quando gera o popover, e depois não atualiza mais. Uma solução é dizer que o content do popover será dinâmico, o mudar a propriedade data-content para outra, como data-texto, para evitar que o bootstrap gere o popover com conteúdo fixo.

Então, ao iniciar o popover, usar o parâmtro content e pegar o valor sempre dinamicamente, assim (pegando seu exemplo de código):

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

Obviamente, mudar todo o código para ler o data-texto no lugar de data-content.

Fiz um jsfiddle para testar, veja aqui: https://jsfiddle.net/VUZhL/2758/

Espero que ajude.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .