javascript - popper - Twitter bootstrap: los Popovers no se muestran con el primer clic, pero se muestran con un segundo clic

popover js

Question

Este es mi marcado:

<a href="#" class="reviews" id="like" rel="popover" data-content="" data-placement="right" data-original-title="Like episode">
    <i class="icon-thumbs-up"></i> 
    Loved it
</a>(<span id="episode_likes">{{ episode_likes }}</span>

Y este es el JavaScript:

$(''a.reviews#like'').click(function(e){
    var element = $(this);
    $.ajax({
        url: ''/episoderatings/like/'',
        type: ''POST'',
        dataType: ''json'',
        data: {
            csrfmiddlewaretoken: ''{{ csrf_token }}'',
            episode_number: current,
            story: current_story
        },
        success: function(response){
            if(response==''You have liked this episode''){
                $(''span#episode_likes'').text(parseInt($(''span#episode_likes'').text())+1);
            }
            $(element).attr(''data-content'',response);
            $(element).popover();
        }
    });
    e.preventDefault();
});

El problema es cuando hago clic en el botón ''Me gusta'', el popover no aparece en el primer clic, así que echo de menos la respuesta importante, ya sea que me haya gustado la página o no. Cuando hago clic en el botón "Me gusta", aparece el segundo popover y luego mantiene su comportamiento de alternar desde allí en adelante. ¿Algunas ideas?

Answer 1

Cuando hace clic por primera vez en su enlace, todavía no se ha inicializado ningún popover que pueda mostrarse. Inicializas el popover con la llamada a $(element).popover(); . Por lo tanto, su código inicializa el popover después de hacer clic en el enlace y no se muestra nada la primera vez. La segunda vez que hace clic en él, el popover está allí y se puede mostrar.

Debe realizar la llamada a .popover() antes de hacer clic en el enlace. En tu caso

$(''a.reviews#like'')
    .popover({trigger: ''manual''})
    .click(function(e){
        var element = $(this);
        $.ajax({
            url: ''/episoderatings/like/'',
            type: ''POST'',
            dataType: ''json'',
            data: {
                csrfmiddlewaretoken: ''{{ csrf_token }}'',
                episode_number: current,
                story: current_story
            },
            success: function(response){
                if(response==''You have liked this episode''){
                    $(''span#episode_likes'').text(parseInt($(''span#episode_likes'').text())+1);
                }
                $(element).attr(''data-content'',response).popover(''show'');
            }
        });
        e.preventDefault();
    });

debería hacer el truco.

Observe la llamada a .popover({trigger: ''manual'') en la línea 2. Esto inicializa el popover y desactiva que aparezca inmediatamente después de hacer clic. Eso no sería útil, ya que establece su contenido en la devolución de llamada AJAX, y tan pronto como se puede mostrar el popover. Por lo tanto, en la devolución de llamada, ahora debe llamar a .popover(''show'') manualmente, después de haber configurado el atributo de data-content .

Una cosa más: tienes que llamar a .popover(''hide'') en algún momento después de mostrar el popover. No desaparecerá cuando vuelva a hacer clic en el enlace, ya que la llamada AJAX solo se activa una vez más y se llama de nuevo a .popover(''show'') . Una solución en la que puedo pensar es agregar una clase al enlace cuando el popover está activo y verificar esa clase en cada clic. Si la clase está allí, puedes simplemente llamar a .popover(''hide'') y eliminar la clase, sino hacer tu llamada AJAX. Creé un jsfiddle pequeño para mostrar lo que quiero decir.

Para más información mira los documentos .

Espero que ayude.