AJAX로 부트스트랩 팝업 콘텐츠를 로드합니다.이것이 가능합니까?
제가 시도한 적절한 부분은 다음과 같습니다.
<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')
})
클릭하면 요청이 작성된 것으로 나타나지만 팝업이 채워지지 않습니다.DOM에 추가된 팝업에 대한 HTML도 보이지 않지만 방화벽일 수 있습니다.
이거 먹어본 사람?
잘 작동합니다.
$('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>';
}
해결 방법은 블로그 게시물을 참조하십시오. https://medium.com/cagataygurturk/load-a-bootstrap-popover-content-with-ajax-8a95cd34f6a4
먼저 팝업을 추가할 요소에 데이터 폴로드 속성을 추가해야 합니다.이 특성의 내용은 로드할 URL(절대 또는 상대)이어야 합니다.
<a href="#" title="blabla" data-poload="/test.php">blabla</a>
그리고 자바스크립트에서는 $(문서)로 하는 것이 좋습니다.ready(준비);
$('*[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()새 호버 이벤트를 바인딩합니다.호버 이벤트가 발생할 때마다 데이터를 새로 고치려면 꺼짐을 제거해야 합니다.예제의 작동 중인 JSFidle을 참조하십시오.
이 모든 해결책을 읽어보니, 동기식 아약스 호출을 사용하면 해결책이 훨씬 간단해진다고 생각합니다.그런 다음 다음과 같은 방법을 사용할 수 있습니다.
$('#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');
});
가장 인기 있는 답변을 업데이트했습니다.그러나 변경사항이 승인되지 않을 경우를 대비하여 별도의 답변을 여기에 추가합니다.
차이점은 다음과 같습니다.
- 내용을 로드하는 동안 텍스트를 로드하는 중입니다.느린 연결에 매우 좋습니다.
- 마우스 잎이 처음으로 튀어나올 때 발생하는 깜박임을 제거했습니다.
먼저 팝업을 추가할 요소에 데이터 폴로드 속성을 추가해야 합니다.이 특성의 내용은 로드할 URL(절대 또는 상대)이어야 합니다.
<a href="#" data-poload="/test.php">HOVER ME</a>
그리고 자바스크립트에서는 $(문서)로 하는 것이 좋습니다.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')데이터를 두 번 이상 로드하지 못하도록 합니다.popover()새 호버 이벤트를 바인딩합니다.호버 이벤트가 발생할 때마다 데이터를 새로 고치려면 꺼짐을 제거해야 합니다.
예제의 작동 중인 JSFidle을 참조하십시오.
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')
});
Chağ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');
}
});
차이타이 귀르튀르크의 해결책은 좋지만 루크 디 언블러드가 묘사한 것과 같은 이상함을 경험했습니다.
아약스 로딩이 너무 오래 지속되거나(또는 마우스 이벤트가 너무 빠르면) 주어진 요소에 .popover('show')와 no.popover('hide')가 있어 팝오버가 열린 상태로 유지됩니다.
저는 이 대규모 사전 로드 솔루션을 선호했습니다. 모든 팝오버 컨텐츠가 로드되고 일반(정적) 팝오버에서와 같이 부트스트랩에 의해 이벤트가 처리됩니다.
$('.popover-ajax').each(function(index){
var el=$(this);
$.get(el.attr('data-load'),function(d){
el.popover({content: d});
});
});
다른 솔루션:
$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');
});
여기서는 마우스 입력 및 마우스 탈퇴 이벤트로 PopOver 표시를 수동으로 트리거하는 것이 좋습니다.
마우스 입력 시 항목에 대해 PopOver가 생성되지 않은 경우("this(this).data("popover') == null) 해당 항목을 생성합니다.흥미로운 점은 PopOver() 함수에 인수(템플릿)로 전달하여 자체 PopOver 콘텐츠를 정의할 수 있다는 것입니다.html 매개 변수도 true로 설정하는 것을 잊지 마십시오.
여기서는 popovertemplate라는 숨겨진 템플릿을 만들고 JQuery로 복제합니다.id 특성을 복제한 후에는 삭제하는 것을 잊지 마십시오. 그렇지 않으면 DOM에서 중복된 ID가 발생하게 됩니다.또한 style="display: none"은 페이지에서 템플릿을 숨깁니다.
<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를 표시합니다.popover "show";
그리고 나서 고전적인 아약스 콜.성공하면 서버에서 새 데이터를 넣기 전에 이전 팝업 콘텐츠를 정리해야 합니다.현재 팝오버 콘텐츠를 얻으려면 어떻게 해야 합니까?.popover.in 선택기와 함께!클래스의 .in은 팝업이 현재 표시되어 있음을 나타냅니다. 이것이 바로 여기서의 요령입니다!
마지막으로 마우스 탈퇴 이벤트에서는 팝업을 숨기기만 하면 됩니다.
여기에 너무 많은 답이 있지만 저는 또한 그 중 어느 것도 제가 원하는 답이 아니라는 것을 발견했습니다.Ivan Class의 답변을 부트스트랩 4가 적절하고 지능적으로 캐시되도록 확장했습니다.
스택 오버플로의 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>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';
}
팝업의 내용이 변경되지 않을 경우 한 번만 검색하는 것이 좋습니다.또한 여기에 있는 솔루션 중 일부는 여러 "미리보기"를 빠르게 이동하면 여러 개의 팝업이 열린다는 문제가 있습니다.이 솔루션은 이러한 두 가지 문제를 모두 해결합니다.
$('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>이 스레드에서 이와 유사한 답변이 제공되었습니다.데이터 컨텐츠를 설정하고 팝업을 표시하는 것이 원하는 작업을 수행하는 더 나은 방법입니다.그렇지 않으면 Popover 메서드의 옵션에서 Live:true 옵션을 사용해야 합니다.이것이 도움이 되기를 바랍니다.
저는 샤타이 귀르튀르크의 해결책을 시도했지만 루크 더 무명과 같은 이상함을 얻었습니다.그런 다음 아사 쿠스마의 해결책을 시도했습니다.이것은 작동하지만, 팝업이 표시될 때마다 Ajax가 읽는다고 생각합니다.바인딩 해제('호버') 호출은 효과가 없습니다.이는 딜러가 특정 클래스의 이벤트를 모니터링하고 있지만 해당 클래스는 변경되지 않기 때문입니다.
아사 쿠수마의 솔루션을 기반으로 한 해결책이 있습니다.변경 사항:
- 교체된
delegate와 함께on새 JQuery 라이브러리와 일치합니다. - 바인딩되지 않은 호버 이벤트 대신 'withjax popover' 클래스 제거
- 두 번째 사용부터 부트스트랩이 완전히 처리할 수 있도록 팝업에 "트리거: 호버"를 추가합니다.
- 제 데이터 로딩 기능은 JSon을 반환하므로, 제목과 내용을 쉽게 지정할 수 있습니다.
목표: 콘텐츠를 가져올 위치 위에 도구 설명/팝업을 표시합니다.처음에만 적용됩니다.
방법: 적절한 컨텐츠를 가져와 처음으로 툴팁/팝업을 등록합니다.마우스가 클래스 "withjax popover"로 DOM 요소에 들어갑니다.제거합니다.요소에서 클래스를 지정하여 다음 번에 마우스가 들어갈 때 클래스를 지정하지 않습니다.
그러나 처음에는 툴팁/팝오버가 표시되지 않습니다.(도구 팁을 등록할 때 마우스가 이미 입력되어 있기 때문입니다.)
그래서 저희가 직접 보여드리고 숨겨야 돼요.
*/$(함수: {}$('body'). on(으)로, '.ax popover와 함께', 함수(이벤트){if (event.type === 'continueenter') {varel=$(이);$.get(el.attrr('data-load'), 함수(d){el.class 제거('ax popover 포함')el.popover(트리거): '트리거',제목: d.d.d.d.d.d.d.d.d,내용: d.content}).popover "show";});그렇지 않으면 {$(이것)popover(숨김);}});});저는 여기서 몇 가지 제안을 시도했고 저는 제 제안을 발표하고 싶습니다 (조금 다릅니다) - 저는 그것이 누군가에게 도움이 되기를 바랍니다.첫 번째 클릭 시 팝업을 표시하고 두 번째 클릭 시 숨깁니다(물론 매번 데이터 업데이트와 함께).추가 변수를 사용했습니다.visable팝업이 표시되는지 여부를 확인합니다.코드는 과 같습니다 HTML: httml: 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);
});
}
});
건배!
다음은 몇 가지 문제를 해결하는 방법입니다.
- 내용이 업데이트된 후, 특히 배치가 "맨 위"인 경우 정렬 문제가 발생합니다.열쇠는 부르는 것입니다.
._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");
});
});
$("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에게도 좋은 일이고 사용자가 Javascript를 가지고 있지 않은 경우에도 좋은 일입니다!
저는 Chağatay의 솔루션을 좋아하지만, 팝업이 마우스 아웃에 숨어 있지는 않았습니다.다음과 같이 추가 기능을 추가했습니다.
// hides the popup
$('*[data-poload]').bind('mouseout',function(){
var e=$(this);
e.popover('hide');
});
원래 솔루션을 사용했지만 몇 가지 변경 사항을 적용했습니다.
저는 제단가일을 사용했습니다.getJSON()에 get()script.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');
});
});
});
html: true를 추가하여 결과를 포맷할 경우 원시 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', {
});
});
});
호버 트리거를 사용하여 정적 요소에 Ajax 팝업 표시:
$('.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>';
}
는 한 번 됩니다! Ajax 파일 참조!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 에서 확인할 수 있습니다.이 페이지로 이동하여 사용자의 사용자 이름으로 이동합니다.
<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");
});
나의 작업은 로드 팝업 전에 데이터 내용을 변경합니다.
$('.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');
}
});
}
});
만약을 위해, 내가 사용하는 엔드포인트는 html을 반환합니다(레일 부분).
https://stackoverflow.com/a/13565154/3984542 에서 코드의 일부를 가져왔습니다.
언급URL : https://stackoverflow.com/questions/8130069/load-a-bootstrap-popover-content-with-ajax-is-this-possible
'source' 카테고리의 다른 글
| 현재 날짜보다 30일 전에 얻는 방법은? (0) | 2023.09.17 |
|---|---|
| Excel에서 프로그래밍 방식으로 활성 워크북 숨기기 (0) | 2023.09.17 |
| ASP에서 긴 폴링 AJAX 요청을 수행하는 방법.NET MVC? (0) | 2023.08.28 |
| Azure Powershell 세션이 만료되었는지 탐지하는 방법은 무엇입니까? (0) | 2023.08.28 |
| DOM에 아직 추가되지 않은 JQuery 개체에 클릭 이벤트 첨부 (0) | 2023.08.28 |