Charger un fichier d'amorce liste du contenu avec l'AJAX. Est-ce possible?

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>';
}

J'ai mis à jour la réponse la plus populaire. Mais dans le cas de mes modifications ne seront pas approuvés j'ai mis ici une réponse distincte.

Différences sont les suivantes:

• CHARGEMENT texte affiché pendant le chargement du contenu. Très bon pour les connexions lentes.
• Supprimé le scintillement qui se passe quand la souris quitte liste première fois.

Il faut d'abord ajouter un poload attribut pour les éléments vous
comme pour ajouter un pop sur. Le contenu de cet attribut doit être le
url à charger (absolue ou relative):

<a href="#" data-poload="/test.php">HOVER ME</a>

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

 //On first hover event we will make popover and then AJAX content into it.
$('[data-poload]').hover(
    function (event) {
        var el = $(this);

        //disable this event after first binding 
        el.off(event);

        //add initial popovers with LOADING text
        el.popover({
            content: "loading…", //maybe some loading animation like <img src='loading.gif />
            html: true,
            placement: "auto",
            container: 'body',
            trigger: 'hover'
        });

        //show this LOADING popover
        el.popover('show');

        //requesting data from unsing url from data-poload attribute
        $.get(el.data('poload'), function (d) {
            //set new content to popover
            el.data('bs.popover').options.content = d;

            //reshow popover with new content
            el.popover('show');
        });
    },
    //Without this handler popover flashes on first mouseout
    function() { }
);

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

Veuillez voir le travail JSFiddle de l'exemple.

La solution de Çağatay Gürtürk est gentil, mais j'ai vécu la même étrangeté décrit par Luc de L'Obscur:

Lors de l'ajax chargement dure trop longtemps (ou les événements de la souris sont trop rapides), nous avons une .liste('show') et pas de .liste('hide') sur un élément donné causant la liste de rester ouvert.

J'ai préféré ce massif des pré-charge de la solution, toutes les fenêtre pop-over-contenu est chargé et les événements sont gérés par bootstrap comme en normal (statique) popovers.

$('.popover-ajax').each(function(index){

    var el=$(this);

    $.get(el.attr('data-load'),function(d){
        el.popover({content: d});       
    });     

});

EN 2015, c'est la meilleure réponse

$('.popup-ajax').mouseenter(function() {
   var i = this
   $.ajax({
      url: $(this).attr('data-link'), 
      dataType: "html", 
      cache:true, 
      success: function( data{
         $(i).popover({
            html:true,
            placement:'left',
            title:$(i).html(),
            content:data
         }).popover('show')
      }
   })
});

$('.popup-ajax').mouseout(function() {
  $('.popover:visible').popover('destroy')
});

Je pense que ma solution est plus simple avec des fonctionnalités par défaut.

http://jsfiddle.net/salt/wbpb0zoy/1/

JS:

$("a.popover-ajax").each(function(){
		 $(this).popover({
			trigger:"focus",
			placement: function (context, source) {
                  var obj = $(source);
				  $.get(obj.data("url"),function(d) {
                        $(context).html( d.titles[0].title)
                  });	
			},
			html:true,
			content:"loading"
		 });
});

HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>


<ul class="list-group">
  <li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Cras justo odio</a></li>
  <li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Dapibus ac facilisis in</a></li>
  <li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Morbi leo risus</a></li>
  <li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Porta ac consectetur ac</a></li>
  <li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Vestibulum at eros</a></li>
</ul>

J'ai essayé la solution par Çağatay Gürtürk, mais a obtenu la même étrangeté, comme Luc l'Obscur. Ensuite essayé la solution par l'Aas Kusuma. Cela fonctionne, mais je crois qu'il ne l'Ajax lire chaque temps la liste est affichée. L'appel à unbind('hover') n'a aucun effet. C'est parce que délégué pour la surveillance des événements dans une classe spécifique -- mais cette classe est inchangé.

Voici ma solution, en étroite collaboration basée sur l'Aas Kusuma de l'. Changements:

• Remplacé delegate avec on pour correspondre à de nouvelles bibliothèques JQuery.
• Supprimer 'withajaxpopover' classe, plutôt que de déliaison passez événement (qui n'a jamais été lié)
• Ajouter "déclencheur: hover" pour la liste, de sorte que Bootstrap va la traiter complètement à partir de la deuxième utilisation.
• Mon chargement des données en fonction renvoie du JSon, ce qui le rend facile à spécifier à la fois le titre et le contenu de la liste.

 /* But: Afficher une info-bulle/liste où le contenu est récupérée à partir de la 
l'application la première fois seulement. 

Comment: Extraire le contenu approprié et de s'inscrire à l'info-bulle/liste la première fois 
la souris entre dans un élément du DOM avec la classe "withajaxpopover". Supprimer la 
la classe de l'élément de sorte que nous ne faisons pas que la prochaine fois que la souris entre dans. 
Toutefois, cela ne veut pas afficher l'info-bulle/liste pour la première fois 
(parce que la souris est déjà entré lorsque l'info-bulle est enregistrée). 
Nous devons donc nous montrer/cacher à nous-mêmes. 
*/
$(function() { 
$('body').sur('hover', '.withajaxpopover', function(event){ 
if (event.type === 'mouseenter') { 
var el=$(this); 
$.get(el.attr('data-load'),function(d){ 
el.removeClass('withajaxpopover') 
el.liste({trigger: 'hover', 
titre: d.titre, 
contenu: d.contenu}).liste('show'); 
}); 
} else { 
$(this).liste('hide'); 
} 
}); 
}); 

<button type="button" id="popover2" title="" data-content="<div id='my_popover' style='height:250px;width:300px;overflow:auto;'>Loading...Please Wait</div>" data-html="true" data-toggle="popover2" class="btn btn-primary" data-original-title="A Title">Tags</button>

$('#popover2').popover({ 
    html : true,
    title: null,
    trigger: "click",
    placement:"right"
});

$("#popover2").on('shown.bs.popover', function(){
    $('#my_popover').html("dynamic content loaded");

});

$("a[rel=popover]").each(function(){
        var thisPopover=$(this);
                var thisPopoverContent ='';
                if('you want a data inside an html div tag') {
                thisPopoverContent = $(thisPopover.attr('data-content-id')).html();
                }elseif('you want ajax content') {
                    $.get(thisPopover.attr('href'),function(e){
                        thisPopoverContent = e;
                    });
            }
        $(this).attr(   'data-original-title',$(this).attr('title') );
        thisPopover.popover({
            content: thisPopoverContent
        })
        .click(function(e) {
            e.preventDefault()
        });

    });

noter que j'ai utilisé le même href de la balise et fait en sorte qu'il n'a pas changer de page quand on clique dessus, c'est une bonne chose pour le RÉFÉRENCEMENT et également si l'utilisateur n'a pas javascript!

J'ai utilisé la solution d'origine, mais fait quelques changements:

Tout d'abord, j'ai utilisé getJSON() au lieu de get() parce que j'était en train de charger un script json. Ensuite, j'ai ajouté le déclencheur du comportement de pointer pour fixer le collant pop plus de problème.

$('*[data-poload]').on('mouseover',function() {
    var e=$(this);
    $.getJSON(e.data('poload'), function(data){
        var tip;
        $.each(data, function (index, value) {
           tip = this.tip;
           e.popover({content: tip, html: true, container: 'body', trigger: 'hover'}).popover('show');
        });
    });
});

Affichage ajax liste statique de l'élément avec hover déclencheur:

$('.hover-ajax').popover({
    "html": true,
    trigger: 'hover',
    "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>';
}

Html :

<span class="hover-ajax" href="http://domain.tld/file.php"> Hey , hoover me ! </span>

Je l'ai fait et c'est un travail parfait avec ajax et le chargement sur la liste du contenu.

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
var container, timeout;
originalLeave.call(this, obj);
if(obj.currentTarget) {
container = $(obj.currentTarget).siblings('.popover')
timeout = self.timeout;
container.one('mouseenter', function(){
//We entered the actual popover – call off the dogs
clearTimeout(timeout);
//Let's monitor popover content instead
container.one('mouseleave', function(){
$.fn.popover.Constructor.prototype.leave.call(self, self);
});
})
}
};
var attr = 'tooltip-user-id';
if ($('a['+ attr +']').length)
$('a['+ attr +']').popover({
html: true,
trigger: 'click hover',
placement: 'auto',
content: function () {
var this_ = $(this);
var userId = $(this).attr(attr);
var idLoaded = 'tooltip-user-id-loaded-' + userId;
var $loaded = $('.' + idLoaded);
if (!$loaded.length) {
$('body').append('<div class="'+ idLoaded +'"></div>');
} else if ($loaded.html().length) {
return $loaded.html();
}
$.get('http://example.com', function(data) {
$loaded.html(data);
$('.popover .popover-content').html(data);
this_.popover('show');
});
return '<img src="' + base_url + 'assets/images/bg/loading.gif"/>';
},
delay: {show: 500, hide: 1000},
animation: true
});

Vous pouvez le vérifier http://kienthuchoidap.com. Aller et passez de nom d'utilisateur de l'utilisateur.

Cela fonctionne pour moi, ce correctif de code possibles problèmes d'alignement:

<a class="ajax-popover" data-container="body" data-content="Loading..." data-html="data-html" data-placement="bottom" data-title="Title" data-toggle="popover" data-trigger="focus" data-url="your_url" role="button" tabindex="0" data-original-title="" title="">
<i class="fa fa-info-circle"></i>
</a>
$('.ajax-popover').click(function() {
var e = $(this);
if (e.data('loaded') !== true) {
$.ajax({
url: e.data('url'),
dataType: 'html',
success: function(data) {
e.data('loaded', true);
e.attr('data-content', data);
var popover = e.data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
var calculated_offset = popover.getCalculatedOffset(popover.options.placement, popover.getPosition(), popover.$tip[0].offsetWidth, popover.$tip[0].offsetHeight);
popover.applyPlacement(calculated_offset, popover.options.placement);
},
error: function(jqXHR, textStatus, errorThrown) {
return instance.content('Failed to load data');
}
});
}
});

Juste au cas où, le point que je suis en utilisant retourne html (rails partielle)

J'ai pris une partie du code à partir d'ici https://stackoverflow.com/a/13565154/3984542