Chargez un contenu pop-up Bootstrap avec AJAX. Est-ce possible?

Question

Les morceaux appropriés de ce que j'ai essayé sont ici:

 <a href="#" data-content="<div id='my_popover'></div>"> Click here </a>

$(".button").popover({html: true})

$(".button").click(function(){
    $(this).popover('show');
    $("#my_popover").load('my_stuff')
})
 

Lorsque je clique sur mon clavier, la requête est émise, mais ne s'affiche pas dans la fenêtre popover. Je ne vois même pas HTML pour le popover être ajouté au DOM, mais cela pourrait être firebug.

Quelqu'un at-il essayé cela?

Answer 1

Fonctionne bien pour moi:

 $('a.popup-ajax').popover({
    "html": true,
    "content": function(){
        var div_id =  "tmp-id-" + $.now();
        return details_in_popup($(this).attr('href'), div_id);
    }
});

function details_in_popup(link, div_id){
    $.ajax({
        url: link,
        success: function(response){
            $('#'+div_id).html(response);
        }
    });
    return '<div id="'+ div_id +'">Loading...</div>';
}
 

Answer 2

Ajouter un data-* attribut de l' data-poload pour les éléments que vous souhaitez ajouter un pop sur. Il est évident que le contenu de cet attribut:

<a href="#" title="blabla" data-poload="/test.php">blabla</a>

Et en JavaScript, de préférence dans un $(document).prêt();

$('*[data-poload]').bind('hover',function() {
    var e=$(this);
    e.unbind('hover');
    $.get(e.data('poload'),function(d) {
        e.popover({content: d}).popover('show');
    });
});

unbind('hover') empêche le chargement de données plus d'une fois et popover() lie un nouveau hover événement. Si vous voulez que les données soient actualisées à chaque hover cas, vous devez supprimer l' unbind.

Answer 3

Après avoir lu toutes ces solutions, je pense que la solution devient beaucoup plus simple si vous utilisez un appel ajax synchrone . Vous pouvez alors utiliser quelque chose comme:

   $('#signin').popover({
    html: true,
    trigger: 'manual',
    content: function() {
      return $.ajax({url: '/path/to/content',
                     dataType: 'html',
                     async: false}).responseText;
    }
  }).click(function(e) {
    $(this).popover('toggle');
  });
 

Answer 4

Une variante du code de Çağatay Gürtürk, vous pouvez utiliser la fonction de délégué à la place et forcer le masquage de la fenêtre popover lors du survol.

 $('body').delegate('.withajaxpopover','hover',function(event){
    if (event.type === 'mouseenter') {
        var el=$(this);
        $.get(el.attr('data-load'),function(d){
            el.unbind('hover').popover({content: d}).popover('show');
        });
    }  else {
        $(this).popover('hide');
    }
});
 

Answer 5

Une autre solution:

$target.find('.myPopOver').mouseenter(function()
{
    if($(this).data('popover') == null)
    {
        $(this).popover({
            animation: false,
            placement: 'right',
            trigger: 'manual',
            title: 'My Dynamic PopOver',
            html : true,
            template: $('#popoverTemplate').clone().attr('id','').html()
        });
    }
    $(this).popover('show');
    $.ajax({
        type: HTTP_GET,
        url: "/myURL"

        success: function(data)
        {
            //Clean the popover previous content
            $('.popover.in .popover-inner').empty();    

            //Fill in content with new AJAX data
            $('.popover.in .popover-inner').html(data);

        }
    });

});

$target.find('.myPopOver').mouseleave(function()
{
    $(this).popover('hide');
});

L'idée ici est de déclencher manuellement l'affichage de la Liste avec mouseenter et mouseleave événements.

Sur mouseenter, si il n'y a pas de Liste de la création de votre article (si($(this).de données('liste') == null)), créez-la. Ce qui est intéressant, c'est que vous pouvez définir votre propre Liste de contenu en le passant comme argument (modèle) de la liste() fonction. Ne pas oublier de mettre le html paramètre à vrai également.

Ici, je viens de créer un caché modèle appelé popovertemplate et le clone avec JQuery. N'oubliez pas de supprimer l'attribut id une fois que vous le clone sinon vous vous retrouverez avec dupliqué id dans les DOM. Notez également que style="display: none" pour masquer le modèle dans la page.

<div id="popoverTemplateContainer" style="display: none">

    <div id="popoverTemplate">
        <div class="popover" >
            <div class="arrow"></div>
            <div class="popover-inner">
                //Custom data here
            </div>
        </div>
    </div>
</div>

Après l'étape de création (ou si elle a déjà été créé), il vous suffit d'afficher la liste avec $(this).liste('show');

Alors classique de l'appel Ajax. Sur le succès, vous devez nettoyer la vieille liste du contenu avant de mettre de nouvelles données à partir du serveur. Comment peut-on obtenir la liste actuelle de contenu ? Avec la .liste.dans le sélecteur de! L' .en classe indique que la liste est affichée, c'est le truc ici!

Pour finir, sur mouseleave événement, il suffit de masquer la liste.