What's the best way to get Bootstrap popover content using Ajax?
I'm developing a WordPress plugin that displays a "special button" on the front end via a WordPress shortcode. I'm using Bootstrap 4, the buttons use Bootstrap popovers, I need to retrieve/get the popover title and content from the database without refreshing the page, so I need to use Ajax. I read that using async Ajax calls is deprecated (it slows down the page) So what is the best way to use Ajax with Bootstrap popups?
Edit: After Alex_89's reply, I wrote:
$( document ).ready( function() {
// read EDIT 2 for working version...
} );
EDIT 2: ...after several tests it seems to work now!
$( 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();
} );
} );
Here is a snippet of a simple AJAX request that displays the result in a Bootstrap Popover . It should serve as an example of what you want to achieve. By the way, I don't know who would say that asynchronous AJAX requests are a bad practice, let alone deprecated. As @Damocles told you, this is completely wrong.
query code:
$(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>");
}
});
});
});
In this snippet, the initial content in the popover body is a preloader , which is an animated icon to indicate that data is being loaded (it's always a good practice to provide some feedback to the user), but it 's not required . You can leave it blank. I recommend checking out the Popper.js documentation for the different events you can attach functions to .