使用 Ajax 获取 Bootstrap 弹出框内容的最佳方法是啥?
Posted
技术标签:
【中文标题】使用 Ajax 获取 Bootstrap 弹出框内容的最佳方法是啥?【英文标题】:What's the best way to fetch Bootstrap popover content with Ajax?使用 Ajax 获取 Bootstrap 弹出框内容的最佳方法是什么? 【发布时间】:2020-04-14 20:02:57 【问题描述】:我正在开发一个 WordPress 插件,它通过 WordPress 短代码在前端显示“特殊按钮”。 我正在使用 Bootstrap 4,这些按钮使用 Bootstrap 弹出框,我需要在不刷新页面的情况下从数据库中检索/获取弹出框标题和内容,因此我需要使用 Ajax。 我读到不推荐使用异步 Ajax 调用(它会减慢页面速度),那么将 Ajax 与 Bootstrap 弹出框一起使用的最佳方法是什么?
编辑:在 Alex_89 回复之后,我写道:
$( document ).ready( function()
// read EDIT 2 for working version...
);
编辑 2: ...经过多次测试,现在似乎工作了!
$( document ).ready( function()
let buttons_with_popover = $( 'button[data-gdpr-popover="true"]' );
buttons_with_popover.popover(
container: 'div.my-container',
html: true,
placement: 'top',
title: '<div class="d-flex justify-content-between font-weight-bolder"><span class="header-text">Please wait...</span><span class="close-popover float-right ml-3"><i class="fas fa-times"></i></span></div>',
content: '<div class="d-flex justify-content-center"><div class="spinner-border text-success" role="status"><span class="sr-only">Loading...</span></div></div>',
trigger: 'click'
);
buttons_with_popover.on( 'shown.bs.popover', function ()
$( '.close-popover' ).on( 'click', function ()
buttons_with_popover.popover( 'hide' );
);
let this_button = $( this );
this_button.data( 'popover_id', this_button.attr( 'aria-describedby' ) );
let popover_id = this_button.data( 'popover_id' );
let popover_header_text = $( '#' + popover_id + ' h3.popover-header span.header-text' );
let popover_body = $( '#' + popover_id + ' div.popover-body' );
$.ajax(
type: 'post',
url: ajax.url,
data:
action: 'queries_database',
_nonce: ajax.nonce,
,
success: function ( queried_data )
let options = $.parseJSON( queried_data ).options;
popover_header_text.html( options.popover_title );
popover_body.html( '<div><p class="text-justify">' + options.popover_body + '</p></div>' );
this_button.popover( 'update' );
,
error: function ()
popover_body.html( '<p class="text-warning">Ops! Something is wrong... <i class="far fa-tired"></i></p>' );
);
);
buttons_with_popover.on( 'hidden.bs.popover', function ()
$( 'div.ccwhatsapp-container .popover' ).remove();
);
);
【问题讨论】:
不确定你在哪里读到了关于(异步)AJAX 调用的文章,但这是完全错误的。它既不被弃用,也不气馁。也许有人想建议不要使用同步 AJAX 调用来中断脚本并弄错了。 【参考方案1】:这是一个简单的 AJAX 请求的 sn-p,它在 Bootstrap Popover 中显示 结果。它应该作为您想要实现的目标的示例。顺便说一句,我不知道谁会说异步 AJAX 请求是一种不好的做法,更不用说不推荐使用了。正如@Damocles 告诉你的那样,这完全是错误的。
JQuery 代码:
$(document).ready(function()
let popoverBtn = $("#popover-button");
let dataProviderURL = "url-to-your-wp-data-provider-function";
popoverBtn.popover(
title: "your-popover-title",
placement: "top",
html: true,
content: "<div id='popover-body'><img src='path-to-your-preloader' alt='Loading...'></div>"
);
popoverBtn.on("shown.bs.popover", function ()
$(".popover-close-btn").click(function ()
popoverBtn.popover("hide");
);
let popoverTitle = $(".popover-header");
let popoverBody = $(".popover-body");
$.ajax(
url: dataProviderURL,
type: "GET",
data: id: "some-identifier-for-the-data-you-want-to-retrieve",
success: function (result)
popoverTitle.html(result.title);
popoverBody.html(result.content);
popoverBtn.popover("update");
,
error: function ()
popoverBody.html("<em class='text-danger'>some-error-message.</em>");
);
);
);
在这个 sn-p 中,弹出框主体内的初始内容是一个 preloader,这是一个动画图标,表示正在加载数据(最好总是向用户),但这不是必须。你可以把它留空。 我建议您查看Popper.js Documentation 以了解您可以将函数附加到的不同事件。
【讨论】:
我会试试这个 sn-p,如果它适合我,我会告诉你,谢谢! 我编辑了我的问题,你能帮我吗? 为什么不使用“GET”而不是“POST”来执行 AJAX 请求?另外,您是否检查了浏览器中的控制台输出?它会抛出任何错误吗? 我认为问题可能是您使用了错误的选择器来获取对弹出框“header”和“body”标签的引用。我编辑了我的答案。使用弹出框的类来获取对它们的引用而不是 id。 我尝试了多种方式(id、class、ecc...)我没有错误但弹出框内容在显示初始“正在加载...”内容后没有更新以上是关于使用 Ajax 获取 Bootstrap 弹出框内容的最佳方法是啥?的主要内容,如果未能解决你的问题,请参考以下文章