Question

我想用AJAX调用的web服务填充popover（来自bootstrap）。

我试过了：

$.ajax({
    type: "POST",
    url: "myURL?action=fetchData&ID=123",
    success: function(msg) {
        $('.key_cal').popover({
            title:"User Profile",
            placement:'right',
            content:"<h5>Name: "+msg[0].firstName+"</h5>",
            html: true
        });
    }
});

但我需要在popover中调用AJAX来填充内容，但我不知道;你能帮帮我吗？

现在我不想使用123在我的网址（AJAX）中对ID进行硬编码，而是使用单击的元素的id来进行弹出。（我已将每个元素的id作为键传递）

非常感谢提前。

Answer 1

你需要给每个key-cal或你使用popover的任何类，而不是在AJAX上触发popover。

$(document).ready() {
    $(".key-cal").hover(setPopover);
}

function setPopover() {
        var myTitle = "";
        var myContent = "";
        var myHtml = true;
        $.ajax({
            //  Go grab your data
            data: 'id=' + $(this).prop('id'),
            success: //Set your variables
        });
        $(this).popover({
            title: myTitle,
            content: myContent,
            html: true
        }).popover('show');
    }, function () {
        $(this).popover('hide');
    });
}

这不是最好或最有效的方式，但它应该对你有好感并允许你从那里开始。在悬停时触发popover ajax调用，设置数据，然后显示弹出窗口。

Answer 2

$('.key_cal').on('click', function (e) {
    e.preventDefault();

    var id = this.id;
    var $this = $(this);

    $.ajax({
        type: "POST",
        url: "myURL?action=fetchData&ID=" + id
    }).done(function (msg) {
        $this.popover({
            title: 'myTitle',
            content: function () {
                return "<h5>Name: " + msg[0].firstName + "</h5>";
            },
            html: true
        }).popover('show');
    });
});

希望这会有所帮助，但我不确定您为什么要通过URL POST请求通过URL（查询字符串）发送数据？相反，您可以将其指定为ajax调用的data对象。

通过调用webservice填充popover引导程序

2 个答案: