Question

我有一个bootstrap工具提示，我想从AJAX请求加载数据，请求中的文本是工具提示的title属性。我的AJAX请求工作正常，但我有两个问题：

为什么来自AJAX调用的数据不会进入工具提示？
如何使用我的ttManager对象封装工具提示的状态？

目前，当页面首次加载并且我在控制台中单击#btnSubmit时，我看到了 success以及来自console.log（ttManager）行的正确数据

 $(document).ready(function () {
        //this object's title attribute will be the value of ttManager.title seen below
        var ttManager = {
            title: '',
            setTitle: function (data) {
                this.title = data;
            }
        }
        var ajaxCall = function () {
            //this returns the top five results of text from a query
            $.ajax({
                type: "POST",
                contentType: "application/json",
                url: "Service.asmx/GetDrugs",
                dataType: "json",
                success: function (data) {
                    console.log('success');
                    ttManager.title = data.d;
                    //inside this function I want to set ttManager.title equal to the data.d
                    console.log(ttManager);




                },
                error: function (xhr) {
                    console.log('failed: ' + xhr.status);
                }

            });


        }

        $('#btnSubmit').tooltip({
            //reference to ajax call
            //title is the attribute responsible for displaying text in the tooltip
            //I need to use a reusable object to set the text property instead of referencing ajaxCall
            //would it be better if there below were title: ttManager.title?
            title: ajaxCall,
            trigger: 'click',
            placement: 'right'
        });



    });

我很确定我需要一个回调函数，但我不知道在哪里。任何未来的指针也将受到赞赏。感谢。

Answer 1

首先，对bootstrap的工具提示插件进行一些解释。显示的工具提示将从元素title属性中拉出（如果存在），否则将使用传递的title参数。

您需要了解的下一件事是ajax调用是异步的。这意味着代码将在等待响应时继续运行。所以，例如，如果我做这样的事情

$.ajax({
    URL: 'google.com',
    success: function(){
        console.log('yay');
    }
});
console.log('woohoo');

你会在“yay”之前在控制台中看到“woohoo”。所以，目前，在你的ajax查询改变了ttManager的状态之前，你正在调用$('#btnSubmit').tooltip。

另一个问题是你目前没有对ttManager做任何关于bootstrap的事情。我觉得我还应该提一下ttManager对象在这里似乎毫无意义。

就个人而言，我会将我的ajax成功函数更改为此（设置title属性，调用工具提示，然后再生成一次点击以显示工具提示）

success: function(data) {
    $('#btnSubmit').attr('title', data.d)
    .tooltip({
        trigger: 'click',
        placement: 'right'
    }).click();
}

删除当前存在的当前$('#btnSubmit').tooltip...代码，并添加一次点击处理程序以调用您的ajax。

$('#btnSubmit').one('click', function() {
    ajaxCall();
});

将bootstrap工具提示设置为AJAX调用结果

1 个答案: