[jquery] تحميل محتوى popstrap popover مع AJAX. هل هذا ممكن؟



Answers

يعمل حسنا بالنسبة لي:

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

الأجزاء المناسبة من ما حاولت هو هنا:

<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 لإضفاء المزيد من popover على DOM ، ولكن هذا يمكن أن يكون firebug.

هل هناك اي احد جرب هذة؟




حل Çağatay Gürtürk هو لطيف ولكني واجهت نفس الغرابة التي وصفها Luke The Obscure:

عندما يستمر تحميل ajax أكثر من اللازم (أو تكون أحداث الماوس سريعة جدًا) لدينا popover ('show') ولا أي .popover ('hide') على عنصر معين مما يؤدي إلى بقاء popover مفتوحًا.

لقد فضّلت هذا الحل الهائل للتحميل المسبق ، حيث يتم تحميل جميع محتويات popover ويتم التعامل مع الأحداث بواسطة bootstrap كما هو الحال في المظاهر العادية (الثابتة).

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

    var el=$(this);

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

});



<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ğatay Gürtürk ولكن حصلت على نفس الغرابة مثل لوقا الغامض. ثم حاول الحل من قبل آسا كوسوما. هذا يعمل ، لكنني أعتقد أنه لا يقرأ أياكس في كل مرة يتم عرض popover. لا يكون للمكالمة إلى unbind ('hover') أي تأثير. ويرجع ذلك إلى أن المندوب يراقب الأحداث في فصل دراسي معين - ولكن هذا الفصل لم يتغير.

هنا حلّي ، مستندًا بشكل وثيق إلى Asa Kusuma. التغييرات:

  • استبدال delegate بالتشغيل لمطابقة مكتبات JQuery الجديدة.
  • إزالة فئة "withajaxpopover" بدلاً من حدث hover unbinding (الذي لم يتم ربطه)
  • إضافة "trigger: hover" إلى popover بحيث يعالج Bootstrap تمامًا بدءًا من الاستخدام الثاني.
  • تقوم وظيفة تحميل البيانات الخاصة بي بإرجاع JSon ، مما يجعل من السهل تحديد كل من العنوان والمحتوى الخاص بالشريحة.
    /*  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');
          }
      });
    });



$("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 وجعلتها بحيث لا تغير الصفحات عند النقر عليها ، وهذا أمر جيد لكبار المسئولين الاقتصاديين وكذلك إذا لم يكن لدى المستخدم جافا سكريبت!




استخدمت الحل الأصلي ولكن قمت بإجراء بعض التغييرات:

أولاً ، لقد استخدمت 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');
        });
    });
});



هناك اختلاف في الشفرة من Çağ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');
    }
});



أعتقد أن حلّي أكثر بساطة مع الوظائف الافتراضية.

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>




لقد فعلت ذلك وهي مثالية للعمل مع ajax وتحميلها على محتوى 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
            });

يمكنك التحقق من ذلك http://kienthuchoidap.com . انتقل إلى هذا وقم بتمرير اسم مستخدم المستخدم.




عرض ajax popover على عنصر ثابت مع مشغل تحويم:

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

هتمل:

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



في عام 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')
});



هذا يعمل بالنسبة لي ، هذا الإصلاح رمز المشاكل المحتملة المحاذاة:

<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://.com/a/13565154/3984542






Links