Załaduj zawartość wyskakującą Bootstrap za pomocą AJAX. Czy to możliwe?

U mnie Działa ok:

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

Po przeczytaniu wszystkich tych rozwiązań, myślę, że rozwiązanie stanie się znacznie prostsze, jeśli użyjesz synchronicznego wywołania ajax. Możesz wtedy użyć czegoś w stylu:

  $('#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');
  });

Odmiana kodu z Çağatay Gürtürk, można użyć funkcji delegate zamiast i wymusić ukrywanie popover na hoverout.

$('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');
    }
});

Inne rozwiązanie:

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

Chodzi o to, aby ręcznie uruchomić wyświetlanie PopOver za pomocą mouseenter & mouseleave wydarzenia.

On mouseenter, if there is no PopOver created for your item ( if($(this).data ('popover') = = null) ), utwórz go. Interesujące jest to, że możesz zdefiniować własną zawartość PopOver, przekazując ją jako argument (szablon) do funkcji popover () . Nie zapomnij ustawić html parametr true również.

Tutaj po prostu utworzyć Ukryty szablon o nazwie popovertemplate i sklonować go z JQuery. nie zapomnij usunąć atrybutu id po sklonowaniu go w przeciwnym razie skończysz z duplikowanymi identyfikatorami w DOM. Zwróć również uwagę, że style="display: none" aby ukryć szablon na stronie.

<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>

Po kroku tworzenia (lub jeśli został już utworzony), po prostu wyświetla się wyskakujące z $(to).popover ('show');

Następnie Klasyczne wywołanie Ajax. Przy sukcesie musisz wyczyścić starą zawartość popover przed umieszczeniem nowych świeżych danych z serwera . Jak możemy uzyskać bieżącą zawartość popover ? Z . popover.in selektor! Klasa . in wskazuje, że popover jest aktualnie wyświetlany, oto sztuczka!

Aby zakończyć, na wydarzeniu mouseleave , po prostu ukryj okienko.

Rozwiązanie Çağatay Gürtürk jest ładne, ale doświadczyłem tej samej dziwności opisanej przez Łukasza niejasnego:

Gdy ładowanie ajax trwa zbyt długo (lub zdarzenia myszy są zbyt szybkie) mamy .popover ('show') i nie .wyskakiwanie ('Ukryj') na danym elemencie powoduje, że wyskakiwanie pozostaje otwarte.

Wolałem To rozwiązanie massive-pre-load, wszystkie wyskakujące treści są ładowane, a zdarzenia są obsługiwane przez bootstrap, jak w normalnych (statycznych) wyskakujących.

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

    var el=$(this);

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

});

W 2015 roku, jest to najlepsza odpowiedź

$('.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')
});

Zaktualizowałem najpopularniejszą odpowiedź. Ale w przypadku, gdy moje zmiany nie zostaną zatwierdzone, umieszczam tutaj osobną odpowiedź.

Różnice to:

• wczytywanie tekstu wyświetlanego podczas wczytywania zawartości. Bardzo dobry do powolnego połączenia.
• usunięto migotanie, które występuje, gdy mysz opuszcza popover po raz pierwszy.

Najpierw powinniśmy dodać atrybut data-poload do elementów, które lubię dodawać pop do. Zawartość tego atrybutu powinna być url to be załadowany (bezwzględny lub względny):

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

I w JavaScript, najlepiej w $(document).ready ();

 // 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') zapobiega wczytywaniu danych więcej niż jeden raz i popover() wiąże nowe wydarzenie hover. Jeśli chcesz, aby dane były odświeżane przy każdym najechaniu kursorem zdarzenie, należy usunąć off.

Zobacz działające JSFiddle przykładu.

Jeśli zawartość w wyskakującym oknie prawdopodobnie się nie zmieni, sensowne byłoby odzyskanie jej tylko raz. Ponadto, niektóre z rozwiązań tutaj mają problem, że jeśli przeniesiesz się nad wieloma "podglądami" szybko, otrzymasz wiele otwartych wyskakujących okienek. To rozwiązanie odnosi się do obu tych rzeczy.

$('body').on('mouseover', '.preview', function() 
{
    var e = $(this);
    if (e.data('title') == undefined)
    {
        // set the title, so we don't get here again.
        e.data('title', e.text());

        // set a loader image, so the user knows we're doing something
        e.data('content', '<img src="/images/ajax-loader.gif" />');
        e.popover({ html : true, trigger : 'hover'}).popover('show');

        // retrieve the real content for this popover, from location set in data-href
        $.get(e.data('href'), function(response)
        {
            // set the ajax-content as content for the popover
            e.data('content', response.html);

            // replace the popover
            e.popover('destroy').popover({ html : true, trigger : 'hover'});

            // check that we're still hovering over the preview, and if so show the popover
            if (e.is(':hover'))
            {
                e.popover('show');
            }
        });
    }
});

Myślę, że moje rozwiązanie jest prostsze z domyślną funkcjonalnością.

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

$("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"
		 });
});

<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>

Oto moje rozwiązanie, które działa dobrze z zawartością Ajax załadowany zbyt.

/*
 * popover handler assigned document (or 'body') 
 * triggered on hover, show content from data-content or 
 * ajax loaded from url by using data-remotecontent attribute
 */
$(document).popover({
    selector: 'a.preview',
    placement: get_popover_placement,
    content: get_popover_content,
    html: true,
    trigger: 'hover'
});

function get_popover_content() {
    if ($(this).attr('data-remotecontent')) {
        // using remote content, url in $(this).attr('data-remotecontent')
        $(this).addClass("loading");
        var content = $.ajax({
            url: $(this).attr('data-remotecontent'),
            type: "GET",
            data: $(this).serialize(),
            dataType: "html",
            async: false,
            success: function() {
                // just get the response
            },
            error: function() {
                // nothing
            }
        }).responseText;
        var container = $(this).attr('data-rel');
        $(this).removeClass("loading");
        if (typeof container !== 'undefined') {
            // show a specific element such as "#mydetails"
            return $(content).find(container);
        }
        // show the whole page
        return content;
    }
    // show standard popover content
    return $(this).attr('data-content');
}

function get_popover_placement(pop, el) {
    if ($(el).attr('data-placement')) {
        return $(el).attr('data-placement');
    }
    // find out the best placement
    // ... cut ...
    return 'left';
}

Próbowałem rozwiązania Çağatay Gürtürk, ale dostałem tę samą dziwność, co Luke The Obscure. Następnie wypróbował rozwiązanie Asa Kusuma. To działa, ale wierzę, że to robi Ajax read co raz wyskakujące jest wyświetlany. Wywołanie unbind ('hover') nie ma żadnego efektu. To dlatego, że delegat monitoruje zdarzenia w określonej klasie - ale ta klasa jest bez zmian.

Oto moje rozwiązanie, ściśle oparte na Asa Kusuma. zmiany:

• zastąpione delegate przez on na dopasuj nowe biblioteki JQuery.
• Usuń klasę 'withajaxpopover' zamiast zdarzenia unbinding hover (które nigdy nie było związane)
• Dodaj "trigger: hover" do wyskakującego, aby Bootstrap obsłużył go całkowicie, począwszy od drugiego użycia.
• Moja funkcja wczytywania danych zwraca JSon, co ułatwia określenie zarówno tytułu, jak i zawartości wyskakującego okienka.

    /*  Goal: Display a tooltip/popover where the content is fetched from the
              application the first time only.

        How:  Fetch the appropriate content and register the tooltip/popover the first time 
              the mouse enters a DOM element with class "withajaxpopover".  Remove the 
              class from the element so we don't do that the next time the mouse enters.
              However, that doesn't show the tooltip/popover for the first time
              (because the mouse is already entered when the tooltip is registered).
              So we have to show/hide it ourselves.
    */
    $(function() {
      $('body').on('hover', '.withajaxpopover', function(event){
          if (event.type === 'mouseenter') {
              var el=$(this);
              $.get(el.attr('data-load'),function(d){
                  el.removeClass('withajaxpopover')
                  el.popover({trigger: 'hover', 
                              title: d.title, 
                              content: d.content}).popover('show');
              });
          }  else {
              $(this).popover('hide');
          }
      });
    });

Wypróbowałem kilka propozycji tutaj i chciałbym przedstawić moją (która jest nieco inna) - mam nadzieję, że komuś pomoże. Chciałem pokazać wyskakujące okienko przy pierwszym kliknięciu i ukryć je przy drugim kliknięciu (oczywiście z aktualizacją danych za każdym razem). Użyłem dodatkowej zmiennej visable, aby wiedzieć, czy popover jest widoczny, czy nie. Oto Mój kod: HTML:

<button type="button" id="votingTableButton" class="btn btn-info btn-xs" data-container="body" data-toggle="popover" data-placement="left" >Last Votes</button>

Javascript:

$('#votingTableButton').data("visible",false);

$('#votingTableButton').click(function() {  
if ($('#votingTableButton').data("visible")) {
    $('#votingTableButton').popover("hide");
    $('#votingTableButton').data("visible",false);          
}
else {
    $.get('votingTable.json', function(data) {
        var content = generateTableContent(data);
        $('#votingTableButton').popover('destroy');
        $('#votingTableButton').popover({title: 'Last Votes', 
                                content: content, 
                                trigger: 'manual',
                                html:true});
        $('#votingTableButton').popover("show");
        $('#votingTableButton').data("visible",true);   
    });
}   
});

<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");

});

Odpowiedź podobna do tej została udzielona w tym wątku: ustawianie danych-treści i wyświetlanie wyskakującego - jest to o wiele lepszy sposób robienia tego, co chcesz osiągnąć. W przeciwnym razie będziesz musiał użyć opcji live: true w opcjach metody popover. Mam nadzieję, że to pomoże

$("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()
        });

    });

Zauważ, że użyłem tego samego tagu href i zrobiłem go tak, aby nie zmieniał stron po kliknięciu, jest to dobra rzecz dla SEO, a także jeśli użytkownik nie ma javascript!

Podoba mi się rozwiązanie, ale wyskakujące okienka nie ukrywały się na mouseout. Dodałem tę dodatkową funkcjonalność z tym:

// hides the popup
$('*[data-poload]').bind('mouseout',function(){
   var e=$(this);
   e.popover('hide'); 
});

Użyłem oryginalnego rozwiązania, ale wprowadziłem kilka zmian:

Najpierw użyłem {[1] } zamiast get(), ponieważ ładowałem skrypt json. Następnie dodałem zachowanie wyzwalacza hover, aby naprawić lepki pop nad problemem.

$('*[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');
        });
    });
});

Dodałem html: true, więc nie wyświetla surowego wyjścia html, w przypadku, gdy chcesz sformatować swoje wyniki. Możesz również dodać więcej kontrolek.

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

            });
        });
    });

Wyświetlanie wyskakującego elementu ajax na elemencie statycznym z wyzwalaczem najazdu:

$('.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>

  $('[data-poload]').popover({
    content: function(){
      var div_id =  "tmp-id-" + $.now();
      return details_in_popup($(this).data('poload'), div_id, $(this));
    },
    delay: 500,

    trigger: 'hover',
    html:true
  });

  function details_in_popup(link, div_id, el){
      $.ajax({
          url: link,
          cache:true,
          success: function(response){
              $('#'+div_id).html(response);
              el.data('bs.popover').options.content = response;
          }
      });
      return '<div id="'+ div_id +'"><i class="fa fa-spinner fa-spin"></i></div>';
  }   

Zawartość Ajax jest ładowana raz! zobacz el.data('bs.popover').options.content = response;

Zrobiłem i działa idealnie z Ajaxem i ładowaniem treści popover.

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

Możesz to sprawdzić http://kienthuchoidap.com. Goto to i najedź kursorem na nazwę użytkownika.

Dla mnie działa zmiana danych-treści przed załadowaniem popover:

$('.popup-ajax').data('content', function () {
    var element = this;
    $.ajax({
        url: url,
        success: function (data) {

            $(element).attr('data-content', data)

            $(element).popover({
                html: true,
                trigger: 'manual',
                placement: 'left'
            });
            $(element).popover('show')
        }})
})

To działa dla mnie, ten kod naprawia możliwe problemy z wyrównaniem:

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

Na wszelki wypadek, punkt końcowy, którego używam zwraca html (część rails)

Wziąłem część kodu stąd https://stackoverflow.com/a/13565154/3984542

Oto sposób, który rozwiązuje kilka problemów:

1. problemy z wyrównaniem po zaktualizowaniu zawartości, zwłaszcza jeśli umieszczenie jest "top". Kluczem jest wywołanie ._popper.update(), Które ponownie oblicza pozycję popover.
2. Zmiana szerokości po zaktualizowaniu zawartości. Nic nie psuje, po prostu wygląda drażniąco dla użytkownika. Aby to zmniejszyć, ustawiam szerokość wyskakującego okienka na 100% (która jest następnie ograniczona przez max-width).

var e = $("#whatever");
e.popover({
    placement: "top",
    trigger: "hover",
    title: "Test Popover",
    content: "<span class='content'>Loading...</span>",
    html: true
}).on("inserted.bs.popover", function() {
    var popover = e.data('bs.popover');
    var tip = $(popover.tip);
    tip.css("width", "100%");
    $.ajax("/whatever")
        .done(function(data) {
            tip.find(".content").text(data);
            popover._popper.update();
        }).fail(function() {
            tip.find(".content").text("Sorry, something went wrong");
        });
});