Question

我已经开始使用twitters bootstrap的popover功能，我有一个问题。

我有一个按钮，上面有弹出窗口，然后点击它会激活一个javascript函数。此函数执行ajax调用，因此需要一些时间才能完成（它不是即时的）。

此调用的结果定义了弹出框的标题和正文的内部html。

现在这个效果很好，除了弹出窗口首先显示默认属性的事实，然后在我的javascript告诉它时也会改变（在完成ajax调用之后）。

如何在完成ajax调用时才显示popover？

目前我在文档加载时加载弹出窗口（带有几秒后隐藏它的功能）

   <script type="text/javascript">
        $(document).ready(function () {
            $('#Popup').popover().click(function () {
                setTimeout(function () {
                    $('#Popup').popover('hide');
                }, 5000);
            });
        });
    </script>

这是按钮

<button onclick="submitContent()" class="btn btn-lg btn-primary btn-block" type="submit" id="Popup" data-toggle="popover" data-placement="top" title="title goes here" data-content="body content goes here" role="button">Post</button>

最后这是我的带有ajax调用的javascript函数

    function submitContent() {

    var txtbox = document.getElementById("TextContent");

    var message = { 'like': txtbox.value };

    $.ajax({
        type: 'GET',
        url: '/Home/Post',
        data: message,
        dataType: 'json',
        success: function (data) {
            if (!data.error) {
                document.getElementsByClassName("popover-title")[0].innerHTML = "Success!";
                document.getElementsByClassName("popover-content")[0].innerHTML = "Your Like has been posted!";

UPDATE 我为这个例子制作了一个JSFiddle

JSFiddle Example

很快就能看到，因为AJAX调用的响应没有太多等待时间。但是你仍然可以看到它。想象一下，互联网连接缓慢增加

更新2

我现在对Modal控件有同样的问题。模态显示然后在一秒钟后显示内容。在这种情况下更加紧迫，因为如果互联网连接在页面上已经死亡，弹出窗口将显示为空白但从不加载内容

Answer 1

如何在ajax完成后将元素定义为弹出框，然后删除。

<input id="TextContent" name="TextContent" type="text"  value=""><button onclick="submitContent()" class="btn btn-lg btn-primary btn-block" type="submit" id="Popup" data-placement="bottom" role="button">Post</button>

function submitContent（）{ var txtbox = document.getElementById（“TextContent”）;

var message = { 'like': txtbox.value };

$.ajax({
    type: 'GET',
    url: '/echo/json',
    data: message,
    dataType: 'json',
    success: function(data) {
        if (!data.error) {
            $('#Popup').attr('data-toggle', 'popover').attr('data-original-title', 'Success!').attr('data-content', 'This post was successful');
            $('#Popup').popover('show');
        } else {
            $('#Popup').attr('data-toggle', 'popover').attr('data-original-title', 'Also Successful!').attr('data-content', 'This post is Different');
            $('#Popup').popover('show');
        }
    },
    error: function(data, error) {
        $('#Popup').attr('data-toggle', 'popover').attr('data-original-title', 'Error!').attr('data-content', 'This post encountered an Error');
        $('#Popup').popover('show');

    }
});
$(document).ready(function () {
$('#Popup').popover().click(function() {
    setTimeout(function() {
        $('#Popup').popover('hide').removeAttr('data-toggle').removeAttr('data-original-title').removeAttr('data-content');
    }, 1000);
});})

隐藏的Bootstrap Popover直到javascript函数完成

1 个答案: