Twitter de arranque: de Popovers no aparecen en la primera posición, pero aparecen en segundo clic

Question

Ésta 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 esta es la 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 haga clic en el botón 'Me gusta', popover no aparece en el primer clic, así que echo de menos la respuesta importante, si me ha gustado la página o no. Cuando hago clic en el botón 'Me gusta' aparece el segundo popover y luego aparece mantiene su comportamiento de alternar a partir de ahí. ¿Y las 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 al $(element).popover();. Por lo tanto, su código inicializa el popover después de haciendo 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 realizar la llamada al .popover() antes de hacer clic en el enlace. En su 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 al .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, debe llamar al .popover('show') manualmente, después de establecer el atributo data-content.

Una cosa más: debe llamar al .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 al .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í, solo puede llamar al .popover('hide') y eliminar la clase, de lo contrario, realice su llamada AJAX. Creé a small jsfiddle para mostrar lo que quiero decir.

Para obtener más información look at the docs.

Espero que ayude.