AJAX के साथ बूटस्ट्रैप पॉपओवर सामग्री लोड करें। क्या यह संभव है?

Question 1

जो मैंने कोशिश की, उसके उपयुक्त बिट्स यहाँ हैं:

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

जब मैं क्लिक करता हूं, तो मैं अनुरोध करता हूं कि अनुरोध किया जाए, लेकिन यह आबादी को आबाद नहीं करता है। मैं भी डोम के लिए जोड़ा गया पॉपओवर के लिए HTML नहीं देखता, लेकिन वह फायरबग हो सकता है।

क्या किसी ने यह कोशिश की है?

Question 2

कार्य समाधान के लिए मेरा ब्लॉग पोस्ट देखें: https://medium.com/cagataygurturk/load-a-bootstrap-popover-content-with-ajax-8a95cd34f6a4

सबसे पहले हमें उन तत्वों के लिए एक डेटा-पोलोड विशेषता जोड़ना चाहिए जिन्हें आप पॉप ओवर जोड़ना चाहते हैं। इस विशेषता की सामग्री लोड होने के लिए url होनी चाहिए (पूर्ण या सापेक्ष):

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

और जावास्क्रिप्ट में, अधिमानतः एक $ (दस्तावेज़) में। पहले से ही ();

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

off('hover')डेटा popover()को एक से अधिक बार लोड करने से रोकता है और एक नई होवर ईवेंट को बांधता है। यदि आप चाहते हैं कि डेटा को हर होवर ईवेंट में ताज़ा किया जाए, तो आपको हटा देना चाहिए।

कृपया उदाहरण के काम करने वाले JSFiddle को देखें ।

Question 3

मेरे लिए ठीक काम करता है:

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

Question 4

इन सभी समाधानों को पढ़ने के बाद, मुझे लगता है कि यदि आप एक तुल्यकालिक अजाक्स कॉल का उपयोग करते हैं तो समाधान बहुत सरल हो जाता है । आप तब कुछ का उपयोग कर सकते हैं जैसे:

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

Question 5

मैंने सबसे लोकप्रिय जवाब अपडेट किया है। लेकिन अगर मेरे बदलावों को मंजूरी नहीं दी जाएगी तो मैं यहां एक अलग जवाब दूंगा।

अंतर हैं:

सामग्री लोड करते समय प्रदर्शित होने वाला LOADING टेक्स्ट। धीमे कनेक्शन के लिए बहुत अच्छा है।
चंचलता को हटा दिया जाता है, जो जब माउस पहली बार पॉपओवर छोड़ता है।

सबसे पहले हमें उन तत्वों के लिए एक डेटा-पोलोड विशेषता जोड़ना चाहिए जिन्हें आप पॉप ओवर जोड़ना चाहते हैं। इस विशेषता की सामग्री लोड होने के लिए url होनी चाहिए (पूर्ण या सापेक्ष):

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

और जावास्क्रिप्ट में, अधिमानतः एक $ (दस्तावेज़) में। पहले से ही ();

 // 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')डेटा popover()को एक से अधिक बार लोड करने से रोकता है और एक नई होवर ईवेंट को बांधता है। यदि आप चाहते हैं कि डेटा को हर होवर ईवेंट में ताज़ा किया जाए, तो आपको हटा देना चाहिए।

कृपया उदाहरण के काम करने वाले JSFiddle को देखें ।

Question 6

Atağatay Gürtürk से कोड की एक भिन्नता, आप इसके बजाय प्रतिनिधि प्रतिनिधि का उपयोग कर सकते हैं और हॉवरआउट पर पॉपओवर को छिपाने के लिए मजबूर कर सकते हैं।

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

Question 7

Atağatay Gürtürk का समाधान अच्छा है लेकिन मुझे ल्यूक द ऑब्सच्योर द्वारा वर्णित एक ही अजीबता का अनुभव हुआ:

जब अजाक्स लोडिंग बहुत अधिक हो जाती है (या माउस इवेंट बहुत जल्दी होते हैं) हमारे पास एक .popover ('शो') और no .popover ('छिपाने') पर दिए गए तत्व के कारण पॉपओवर खुला रहता है।

मैंने इस बड़े पैमाने पर पूर्व-लोड समाधान को प्राथमिकता दी, सभी पॉपओवर-सामग्री लोड की जाती हैं और सामान्य (स्थिर) पॉपओवर की तरह बूटस्ट्रैप द्वारा घटनाओं को नियंत्रित किया जाता है।

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

    var el=$(this);

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

});

Question 8

2015 में, यह सबसे अच्छा जवाब है

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

Question 9

एक और समाधान:

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

विचार यहाँ से मैन्युअल पॉपओवर के प्रदर्शन को गति प्रदान करने के लिए है mouseenter और mouseleave घटनाओं।

पर mouseenter , अगर वहाँ कोई पॉपओवर अपने मद के लिए बनाई गई (है अगर ($ (this) .data ( 'पॉपओवर') == नल) ), यह पैदा करते हैं। मजे की बात यह है कि आप अपने स्वयं के पॉपओवर कंटेंट को पॉपओवर () फ़ंक्शन में तर्क ( टेम्पलेट ) के रूप में पास करके परिभाषित कर सकते हैं । Html पैरामीटर को सही पर सेट करने के लिए मत भूलना ।

यहाँ मैं सिर्फ एक छिपा हुआ टेम्पलेट बनाता हूँ जिसे popovertemplate कहा जाता है और इसे JQuery के साथ क्लोन करता है। एक बार इसे क्लोन करने के बाद आईडी विशेषता को हटाना न भूलें अन्यथा आप DOM में डुप्लिकेट आईडी के साथ समाप्त हो जाएंगे। उस शैली को भी देखें = पृष्ठ में टेम्पलेट को छिपाने के लिए "प्रदर्शन: कोई नहीं" ।

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

निर्माण के चरण के बाद (या यदि यह पहले से ही बनाया गया है), आप बस $ (इस)। पॉपॉप ('शो') के साथ पॉपओवर प्रदर्शित करते हैं ;

फिर शास्त्रीय अजाक्स कॉल। सफलता पर आपको सर्वर से नया ताज़ा डेटा डालने से पहले पुरानी पॉपओवर सामग्री को साफ़ करना होगा । हम वर्तमान पॉपओवर सामग्री कैसे प्राप्त कर सकते हैं? साथ .popover.in चयनकर्ता! .इन वर्ग इंगित करता है कि पॉपओवर वर्तमान में प्रदर्शित किया जाता है, यह है कि चाल यहाँ!

समाप्त करने के लिए, मूसलीव इवेंट पर, बस पॉपओवर छिपाएं।

Question 10

यहाँ मेरा समाधान है जो ajax भरी हुई सामग्री के साथ भी ठीक काम करता है।

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

Question 11

यदि पॉपओवर में सामग्री को बदलने की संभावना नहीं है, तो यह केवल एक बार प्राप्त करने के लिए समझ में आएगा। साथ ही, यहां के कुछ समाधानों में यह समस्या है कि यदि आप कई "पूर्वावलोकन" से अधिक तेजी से आगे बढ़ते हैं, तो आपको कई खुले पॉपअप मिलते हैं। यह समाधान उन दोनों चीजों को संबोधित करता है।

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

Question 12

मुझे लगता है कि डिफ़ॉल्ट कार्यक्षमता के साथ मेरा समाधान अधिक सरल है।

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>

स्निपेट का विस्तार करें

Question 13

यहाँ बहुत सारे उत्तर हैं लेकिन मुझे भी उनमें से कोई नहीं मिला जो मैं चाहता था। मैंने इवान क्लास के जवाब को बूटस्ट्रैप 4 दोनों के लिए उपयुक्त और समझदारी से कैश किया है।

ध्यान दें कि स्निपेट वास्तव में Stackoverflow की CORS नीति के कारण दूरस्थ पते को लोड नहीं करेगा।

var popoverRemoteContents = function(element) {
  if ($(element).data('loaded') !== true) {
    var div_id = 'tmp-id-' + $.now();
    $.ajax({
      url: $(element).data('popover-remote'),
      success: function(response) {
        $('#' + div_id).html(response);
        $(element).attr("data-loaded", true);
        $(element).attr("data-content", response);
        return $(element).popover('update');
      }
    });
    return '<div id="' + div_id + '">Loading...</div>';
  } else {
    return $(element).data('content');
  }
};

$('[data-popover-remote]').popover({
  html: true,
  trigger: 'hover',
  content: function() {
    return popoverRemoteContents(this);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<span data-popover-remote="http://example.com/">Remote Popover test with caching</span>

स्निपेट का विस्तार करें

Question 14

इसके समान एक उत्तर इस थ्रेड में दिया गया है: डेटा-सामग्री सेट करना और पॉपओवर प्रदर्शित करना - यह एक ऐसा बेहतर तरीका है जिसे आप प्राप्त करने की उम्मीद करते हैं। अन्यथा आपको लाइव का उपयोग करना होगा: पॉपओवर विधि के विकल्पों में सही विकल्प। उम्मीद है कि यह मदद करता है

Question 15

मैंने atağatay Gürtürk द्वारा समाधान की कोशिश की, लेकिन ल्यूक द ऑबस्क्योर के समान अजीबता मिली। फिर आसा कुसुमा द्वारा समाधान की कोशिश की। यह काम करता है, लेकिन मेरा मानना है कि यह अजाक्स हर बार पॉपओवर प्रदर्शित होने पर पढ़ता है। अनबाइंड ('होवर') कॉल का कोई प्रभाव नहीं है। ऐसा इसलिए है क्योंकि प्रतिनिधि एक विशिष्ट वर्ग की घटनाओं की निगरानी कर रहा है - लेकिन वह वर्ग अपरिवर्तित है।

यहाँ मेरा समाधान है, आसा कुसुमा पर आधारित है। परिवर्तन:

नए JQuery पुस्तकालयों के delegateसाथ onमिलान करने के लिए प्रतिस्थापित ।
हटिंग हॉवर इवेंट (जो कभी बाउंड नहीं था) के बजाय 'विटहाजैक्सपॉपओवर' क्लास निकालें
पॉपओवर में "ट्रिगर: होवर" जोड़ें ताकि बूटस्ट्रैप इसे दूसरे उपयोग के साथ पूरी तरह से शुरुआत से संभाल ले।
मेरा डेटा लोडिंग फ़ंक्शन JSon लौटाता है, जो पॉपओवर के लिए शीर्षक और सामग्री दोनों को निर्दिष्ट करना आसान बनाता है।

    / * लक्ष्य: एक टूलटिप / पॉपओवर प्रदर्शित करें जहाँ से सामग्री प्राप्त होती है
              केवल पहली बार आवेदन करें।

        कैसे: उपयुक्त सामग्री प्राप्त करें और टूलटिप / पॉपओवर को पहली बार पंजीकृत करें 
              माउस कक्षा के साथ "withajaxpopover" में डोम तत्व में प्रवेश करता है। हटाए
              तत्व से वर्ग ताकि हम अगली बार माउस में प्रवेश न करें।
              हालाँकि, यह टूलटिप / पॉपओवर को पहली बार नहीं दिखाता है
              (क्योंकि टूलटिप पंजीकृत होने पर माउस पहले से ही दर्ज है)।
              इसलिए हमें इसे स्वयं दिखाना / छिपाना होगा।
    * /
    $ (फ़ंक्शन () {
      $ ('शरीर')। ('होवर', '.withajaxpopover', फंक्शन (ईवेंट) {
          अगर (Event.type === 'mouseenter') {
              var el = $ (यह);
              $ .Get (el.attr ( 'डेटा लोड'), समारोह (घ) {
                  el.removeClass ( 'withajaxpopover')
                  el.popover ({ट्रिगर: 'होवर') 
                              शीर्षक: d.title, 
                              सामग्री: d.content})। पॉपओवर ('शो');
              });
          } अन्य {
              $ (This) .popover ( 'छिपाएं');
          }
      });
    });

Question 16

मैंने यहां कुछ सुझावों की कोशिश की और मैं अपना (जो थोड़ा अलग है) प्रस्तुत करना चाहूंगा - मुझे उम्मीद है कि यह किसी की मदद करेगा। मैं पहले क्लिक पर पॉपअप दिखाना चाहता था और इसे दूसरे क्लिक पर छिपा देता था (बेशक हर बार डेटा अपडेट करने के साथ)। मैंने visableयह जानने के लिए एक अतिरिक्त चर का उपयोग किया कि क्या पॉप्युलर देखने योग्य है या नहीं। यहाँ मेरा कोड है: HTML:

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

जावास्क्रिप्ट:

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

चीयर्स!

Question 17

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

});

Question 18

यहाँ एक तरीका है जो कुछ मुद्दों को संबोधित करता है:

सामग्री अपडेट होने के बाद संरेखण मुद्दे, खासकर अगर प्लेसमेंट "शीर्ष" है। कुंजी कॉल कर रही है ._popper.update(), जो पॉपओवर की स्थिति को पुनर्गणना करती है।
सामग्री अपडेट होने के बाद चौड़ाई में परिवर्तन। यह कुछ भी नहीं तोड़ता है, यह सिर्फ उपयोगकर्ता को परेशान करता है। इसे कम करने के लिए, मैंने पॉपओवर की चौड़ाई 100% निर्धारित की है (जो कि तब छाया हुआ है 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");
        });
});

Question 19

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

    });

ध्यान दें कि मैंने उसी href टैग का उपयोग किया है और इसे इसलिए बनाया है ताकि क्लिक करने पर यह पृष्ठ न बदले, यह SEO के लिए एक अच्छी बात है और यह भी कि उपयोगकर्ता के पास जावास्क्रिप्ट नहीं है!

Question 20

मुझे likeağatay का समाधान पसंद है, लेकिन मैं पॉपअप माउसआउट पर नहीं छुपा रहा था। मैंने इसके साथ इस अतिरिक्त कार्यक्षमता को जोड़ा:

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

Question 21

मैंने मूल समाधान का उपयोग किया लेकिन कुछ बदलाव किए:

सबसे पहले, मैं प्रयोग किया जाता है getJSON()के बजाय get(), क्योंकि मैं एक json स्क्रिप्ट लोड किया गया था। इसके बाद मैंने इस मुद्दे पर चिपचिपा पॉप को ठीक करने के लिए हॉवर के ट्रिगर व्यवहार को जोड़ा।

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

Question 22

मैंने html जोड़ा: सच है, इसलिए यह कच्चा HTML आउटपुट नहीं दिखाता है, यदि आप अपने परिणामों को प्रारूपित करना चाहते हैं। आप अधिक नियंत्रणों में भी जोड़ सकते हैं।

    $('*[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', {

            });
        });
    });

Question 23

होवर ट्रिगर के साथ स्थिर तत्व पर अजाक्स पॉपओवर प्रदर्शित करें:

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

Question 24

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

अजाक्स सामग्री एक बार भरी हुई है! देखel.data('bs.popover').options.content = response;

Question 25

मैंने किया और यह अजाक्स और पॉपओवर सामग्री पर लोड करने के साथ एकदम सही काम करता है।

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

आप इसे http://kienthuchoidap.com देख सकते हैं । इसे प्राप्त करें और उपयोगकर्ता के उपयोगकर्ता नाम पर होवर करें।

Question 26

मेरे लिए डेटा-सामग्री befora लोड पॉपओवर को बदलने का काम करता है:

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

Question 27

यह मेरे लिए काम करता है, यह कोड संरेखण समस्याओं को हल करता है:

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

बस के मामले में, समापन बिंदु जो मैं रिटर्न html (आंशिक रूप से एक रेल) का उपयोग कर रहा हूं

मैंने यहाँ से कोड का कुछ हिस्सा https://stackoverflow.com/a/13565154/3984542 लिया