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


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?


32
2017-09-08 18:57


origen


Respuestas:


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();. Entonces, tu código inicializa el popover después el clic en el enlace y nada se muestra la primera vez. La segunda vez que hace clic en él, el popover está allí y se puede mostrar.

Debe hacer 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. Eso inicializa el popover y deshabilita que aparezca de inmediato 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. Entonces, en la devolución de llamada, ahora debe llamar .popover('show') manualmente, después de haber configurado el data-content atributo.

Una cosa más: tienes que llamar .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 .popover('show') se llama de nuevo. 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 .popover('hide') y elimine la clase, de lo contrario haga su llamada AJAX. yo creé una pequeña jsfiddle para mostrar lo que quiero decir

Para más información mira los documentos.

Espero que ayude.


27
2017-09-08 19:35