使用Ajax获取Bootstrap弹出式内容的最佳方法是什么?

时间:2019-12-23 14:22:31

标签: jquery ajax wordpress twitter-bootstrap plugins

我正在开发一个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();
    } );

} );

1 个答案:

答案 0 :(得分:0)

这是一个简单的 AJAX 请求的摘要,该请求在 Bootstrap Popover 中显示了 result 。它应作为您要实现的目标的样本。顺便说一句,我不知道谁会说异步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>");
            }
        });
    });
});

在此代码段中,弹出窗口主体内部的初始内容是 preloader (预加载器),这是一个动画图标,指示正在加载数据(这是始终向用户提供一些反馈的好习惯) ,但这不是必须。您可以将其留空。 建议您检查Popper.js Documentation中可以附加功能的不同事件