আমি যা চেষ্টা করেছি তার যথাযথ বিটগুলি এখানে:
<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')
})
আমি যখন ক্লিক করি তখন আমি অনুরোধটি করতে দেখি, তবে পপওভারটি পপআপ করে না। এমনকি পপওভারের জন্য ডিওএমে যোগ করার জন্য এইচটিএমএলও দেখছি না, তবে এটি ফায়ারব্যাগ হতে পারে।
কেউ কি এই চেষ্টা করেছে?
'shown.bs.popover'হ্যান্ডলারে সেগুলি পড়ুন : স্ট্যাকওভারফ্লো.com
উত্তর:
কার্যকারী সমাধানের জন্য আমার ব্লগ পোস্টটি দেখুন: https://medium.com/cagataygurturk/load-a-bootstrap-popover-content-with-ajax-8a95cd34f6a4
প্রথমে আমাদের যে উপাদানগুলিতে একটি পপ যোগ করতে চান তাতে ডেটা-পোলাড বৈশিষ্ট্য যুক্ত করা উচিত। এই বৈশিষ্ট্যের বিষয়বস্তুটি লোড হওয়ার url হওয়া উচিত (পরম বা আপেক্ষিক):
<a href="#" title="blabla" data-poload="/test.php">blabla</a>
এবং জাভাস্ক্রিপ্টে, অগ্রাধিকার হিসাবে একটি document (নথি) .ডিডি ();
$('*[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()একটি নতুন হোভার ইভেন্টকে আবদ্ধ করে। আপনি যদি প্রতিটি হোভার ইভেন্টে ডেটা রিফ্রেশ করতে চান তবে আপনার অফটি সরিয়ে দেওয়া উচিত।দয়া করে উদাহরণের কার্যকরী জেএসফিডেলটি দেখুন ।
htmlসম্পত্তি সেট করতে পারেন true, তারপরে contentসম্পত্তিটিকে একটি আইফ্রেমে এইচটিএমএল ট্যাগে সেট করুন , পছন্দ করুন content: '<iframe src="http://www.google.com"></iframe>'। আপনাকে max-widthসিএসএস ব্যবহার করে আপনার পপওভারের সম্পত্তি ওভাররাইড করতে হবে এবং সম্ভবত সিএসএস ব্যবহার করে ইফ্রেমের স্টাইলিংও সরিয়ে ফেলতে হবে।
e.off('hover')পদ্ধতি
আমার জন্য ঠিক কাজ করে:
$('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>';
}
এই সমস্ত সমাধানগুলি পড়ে, আমি মনে করি আপনি যদি একটি সিঙ্ক্রোনাস অজ্যাক্স কল ব্যবহার করেন তবে সমাধানটি আরও সহজ হয়ে যায় । তারপরে আপনি এর মতো কিছু ব্যবহার করতে পারেন:
$('#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');
});
async: falseআমার জন্য এটি মেরে
আমি সর্বাধিক জনপ্রিয় উত্তর আপডেট করেছি। তবে আমার পরিবর্তনগুলি অনুমোদিত না হলে আমি একটি পৃথক উত্তর এখানে রেখেছি।
পার্থক্যগুলি হ'ল:
প্রথমে আমাদের যে উপাদানগুলিতে একটি পপ যোগ করতে চান তাতে ডেটা-পোলাড বৈশিষ্ট্য যুক্ত করা উচিত। এই বৈশিষ্ট্যের বিষয়বস্তুটি লোড হওয়ার url হওয়া উচিত (পরম বা আপেক্ষিক):
<a href="#" data-poload="/test.php">HOVER ME</a>
এবং জাভাস্ক্রিপ্টে, অগ্রাধিকার হিসাবে একটি document (নথি) .ডিডি ();
// 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()একটি নতুন হোভার ইভেন্টকে আবদ্ধ করে। আপনি যদি প্রতিটি হোভার ইভেন্টে ডেটা রিফ্রেশ করতে চান তবে আপনার অফটি সরিয়ে দেওয়া উচিত।
দয়া করে উদাহরণের কার্যকরী জেএসফিডেলটি দেখুন ।
Ğaatay Gertü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');
}
});
আকাটায়ে গার্তিকের সমাধানটি দুর্দান্ত তবে আমি লুক দ্য অস্কার দ্বারা বর্ণিত একই অদ্ভুততার অভিজ্ঞতা পেয়েছি:
যখন এজাক্স লোডিং খুব বেশি স্থায়ী হয় (বা মাউস ইভেন্টগুলি খুব দ্রুত হয়) তখন পপওভার উন্মুক্ত থাকার কারণে আমাদের একটি নির্দিষ্ট উপাদানটিতে একটি পপওভার ('প্রদর্শন') এবং কোনও পপওভার ('লুকান') থাকে না।
আমি এই বৃহত-প্রাক-লোড সমাধানটিকে পছন্দ করেছি, সমস্ত পপওভার-সামগ্রীগুলি লোড হয় এবং ইভেন্টগুলি স্বাভাবিক (স্ট্যাটিক) পপওভারের মতো বুটস্ট্র্যাপ দ্বারা পরিচালিত হয়।
$('.popover-ajax').each(function(index){
var el=$(this);
$.get(el.attr('data-load'),function(d){
el.popover({content: d});
});
});
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')
});
আরেকটি সমাধান:
$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 , যদি কোন PopOver আপনার আইটেমের জন্য তৈরী করেছি (হয় যদি ($ (এই) .data ( 'popover') == নাল) ), এটা তৈরি করুন। মজার বিষয় হ'ল আপনি নিজের পপওভার সামগ্রীটি পপওভার () ফাংশনে আর্গুমেন্ট ( টেমপ্লেট ) হিসাবে পাস করে সংজ্ঞায়িত করতে পারেন । সেট করতে ভুলবেন না এইচটিএমএল থেকে প্যারামিটার সত্য এছাড়াও।
এখানে আমি কেবল পপওভারটেম্পলেট নামে একটি লুকানো টেম্পলেট তৈরি করেছি এবং এটি জিকুয়েরির সাথে ক্লোন করেছি। আপনি একবার এটি ক্লোন করে নিলে আইডি বৈশিষ্ট্যটি মুছে ফেলতে ভুলবেন না অন্যথায় আপনি ডওমে ডুপ্লিকেটড আইডি দিয়ে শেষ করবেন। পৃষ্ঠায় টেমপ্লেটটি আড়াল করতে সেই শৈলীটি = "প্রদর্শন: কিছুই নয়" লক্ষ্য করুন।
<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 নির্বাচক! .In বর্গ নির্দেশ করে যে popover বর্তমানে প্রদর্শিত হয়, যে কৌতুক এখানে!
শেষ করতে, মাউসলেভ ইভেন্টে, কেবল পপওভারটি লুকান।
এখানে আমার সমাধানটি যা অজেক্স লোডযুক্ত সামগ্রীর সাথেও সূক্ষ্মভাবে কাজ করে।
/*
* 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';
}
যদি পপওভারে সামগ্রীটি পরিবর্তিত না হওয়ার সম্ভাবনা থাকে তবে এটি একবারে পুনরুদ্ধার করার অর্থ হবে। এছাড়াও, কয়েকটি সমাধানের ক্ষেত্রে এই সমস্যাটি রয়েছে যে আপনি যদি একাধিক "প্রাকদর্শন" দ্রুত এগিয়ে যান তবে আপনি একাধিক উন্মুক্ত পপআপ পান। এই সমাধান এই দুটি বিষয়ই সম্বোধন করে।
$('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');
}
});
}
});
আমি মনে করি ডিফল্ট কার্যকারিতা সহ আমার সমাধান আরও সহজ।
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>এখানে অনেকগুলি উত্তর রয়েছে তবে আমি তাদের কোনটিই আমার কাছে চাইনি তেমন পাইনি। Ivan Klass এর উত্তর বুটস্ট্র্যাপ 4 যথাযথ এবং বুদ্ধিমানভাবে ক্যাশে উভয় হিসাবে প্রসারিত করেছি।
নোট করুন যে স্নিপেট স্ট্যাকওভারফ্লোয়ের সিওআরএস নীতির কারণে রিমোট ঠিকানাটি আসলে লোড করবে না।
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>এর অনুরূপ একটি উত্তর এই থ্রেডে দেওয়া হয়েছে: ডেটা-সামগ্রী নির্ধারণ করা এবং পপওভার প্রদর্শন করা - এটি আপনি যা অর্জন করবেন বলে আশা করছেন তা করার এটি একটি সর্বোত্তম উপায়। অন্যথায় আপনাকে পপওভার পদ্ধতির বিকল্পগুলিতে সরাসরি: সত্য বিকল্পটি ব্যবহার করতে হবে। আশা করি এটি সাহায্য করবে
আমি সমাধানটি আরাটায় গার্তিকের দ্বারা চেষ্টা করেছিলাম কিন্তু লুক অব্পুস্করের মতোই অদ্ভুততা পেয়েছি। তারপরে আসা কুসুমার মাধ্যমে সমাধানটি চেষ্টা করলেন। এটি কাজ করে, তবে আমি বিশ্বাস করি এটি প্রতিবার পপওভার প্রদর্শিত হওয়ার পরে এটি অ্যাজাক্স পড়ে । আনবাইন্ড করার কল ('হোভার') এর কোনও প্রভাব নেই। এর কারণ প্রতিনিধি একটি নির্দিষ্ট শ্রেণির ইভেন্টগুলির জন্য নিরীক্ষণ করছেন - তবে সেই শ্রেণিটি অপরিবর্তিত।
আসা কুসুমার উপর ভিত্তি করে আমার সমাধানটি এখানে। পরিবর্তনগুলি:
delegateসাথে onমেলে প্রতিস্থাপন করা হয়েছে। / * লক্ষ্য: একটি সরঞ্জামদণ্ড / পপওভার প্রদর্শন করুন যেখানে লিখিত সামগ্রীটি আনা হয়েছে
শুধুমাত্র প্রথমবার প্রয়োগ।
কীভাবে: উপযুক্ত সামগ্রী আনুন এবং প্রথমবারটি টুলটিপ / পপওভারটি নিবন্ধ করুন
মাউস ক্লাস "উইথজ্যাক্সপোভার" সহ একটি ডোম উপাদান প্রবেশ করে। অপসারণ
উপাদান থেকে ক্লাস তাই আমরা পরের বার মাউস প্রবেশ করে না যে।
তবে, এটি প্রথমবারের জন্য সরঞ্জামদণ্ড / পপওভারটি দেখায় না
(কারণ সরঞ্জামটিপটি নিবন্ধিত হওয়ার পরে মাউসটি ইতিমধ্যে প্রবেশ করা হয়েছে)।
সুতরাং আমাদের এটি নিজেরাই প্রদর্শন / আড়াল করতে হবে।
* /
$ (ফাংশন () {
'(' বডি ')। অন (' হোভার ','। উইথজ্যাক্সপোভার ', ফাংশন (ইভেন্ট) {
যদি (ইভেন্ট.type === 'মাউসেন্টার') {
var el = $ (এটি);
get .get (el.attr ('ডেটা-লোড')), ফাংশন (d)
el.removeClass ('উইথজ্যাক্সপোভার')
el.popover ({ট্রিগার: 'হোভার',
শিরোনাম: d.title,
সামগ্রী: d.content on) পপওভার ('প্রদর্শন');
});
} অন্য {
this (এটি)। পপওভার ('লুকান');
}
});
});
আমি এখানে কিছু পরামর্শ চেষ্টা করেছিলাম এবং আমার নিজের (যা কিছুটা আলাদা) উপস্থাপন করতে চাই - আশা করি এটি কাউকে সহায়তা করবে। আমি প্রথম ক্লিকে পপআপটি দেখাতে এবং দ্বিতীয় ক্লিকে এটি আড়াল করতে চেয়েছিলাম (অবশ্যই প্রতিটি সময় ডেটা আপডেট করার সাথে)। visableপপওভার দৃশ্যমান কিনা তা জানতে আমি একটি অতিরিক্ত পরিবর্তনশীল ব্যবহার করেছি । এখানে আমার কোড: এইচটিএমএল:
<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);
});
}
});
চিয়ার্স!
<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");
});
এখানে কয়েকটি বিষয় সম্বোধন করার একটি উপায় রয়েছে:
._popper.update(), যা পপওভারের অবস্থান পুনঃসংযোগ করে।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");
});
});
popover._popper.update()এবং নিশ্চিত করুন যে করা popover, _popperএবং updateসব প্রত্যাশিত মান আছে। এগুলি সম্ভবত পরিবর্তিত হয়েছে possible
$("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 এর পক্ষে এটি ভাল জিনিস এবং যদি ব্যবহারকারীদের জাভাস্ক্রিপ্ট না থাকে!
আমি মূল সমাধানটি ব্যবহার করেছি তবে বেশ কয়েকটি পরিবর্তন করেছি:
প্রথমত, আমি এর getJSON()পরিবর্তে ব্যবহার করেছি get()কারণ আমি একটি জেসন স্ক্রিপ্ট লোড করছি। পরবর্তী আমি ইস্যুটির স্টিকি পপ ঠিক করতে হোভারের ট্রিগার আচরণটি যুক্ত করেছি।
$('*[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');
});
});
});
আমি এইচটিএমএল যুক্ত করেছি: সত্য, সুতরাং যদি আপনি ফলাফলগুলি ফর্ম্যাট করতে চান তবে এটি কোনও কাঁচা এইচটিএমএল আউটপুট প্রদর্শন করে না। আপনি আরও নিয়ন্ত্রণে যুক্ত করতে পারেন।
$('*[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', {
});
});
});
হোভার ট্রিগার সহ স্থির উপাদানগুলিতে এজাক্স পপওভার প্রদর্শন করুন:
$('.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>
$('[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;
আমি করেছি এবং এটি অ্যাজাক্স এবং পপওভার সামগ্রীতে লোড করে নিখুঁত কাজ করেছি।
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.com পরীক্ষা করে দেখতে পারেন । এটি পেয়ে যান এবং ব্যবহারকারীর ব্যবহারকারীর নামতে যান।
আমার জন্য ডেফো-কনটেন্ট বেফোরা লোড পপওভারের কাজ করে:
$('.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')
}})
})
এটি আমার পক্ষে কাজ করে, এই কোডটি প্রান্তিককরণের সমস্যাগুলি সম্ভব করে:
<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');
}
});
}
});
কেবলমাত্র ক্ষেত্রে, শেষের দিকটি আমি এইচটিএমএল রিটার্ন ব্যবহার করছি (একটি রেল আংশিক)
আমি এখান থেকে কোডের কিছু অংশ নিয়েছি https://stackoverflow.com/a/13565154/3984542