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

Posted 2023-05-08

【中文标题】将引导工具提示设置为 AJAX 调用结果

【英文标题】：Set bootstrap tooltip to AJAX call results

【发布时间】：2013-10-22 13:19:15

【问题描述】：

我有一个 bootstrap 工具提示，我想从 AJAX 请求加载数据，请求中的文本是工具提示的 titleproperty。我的 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'
        );



    );

我很确定我在某个地方需要一个回调函数，但我不确定在哪里。任何未来的指针也将不胜感激。谢谢。

【问题讨论】：

您使用的是哪个版本的 BS？

我使用的是 boostrap 3.0

【参考方案1】：

首先，对 bootstrap 的 tooltip 插件做一点说明。如果存在，则显示的工具提示将从元素 title 属性中提取，否则它将使用传递的标题参数。

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

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

您会在“yay”之前在控制台中看到“woohoo”。因此，目前，您在 ajax 查询更改 ttManager 的状态之前调用 $('#btnSubmit').tooltip。

另一个问题是您目前没有对 ttManager 进行与引导相关的任何操作。我觉得我还应该提到 ttManager 对象在这里似乎没有意义。

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

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

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

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

【讨论】：

完美。我知道 AJAX 由于是异步的而未定义，所以我尝试创建一个闭包并立即执行 ajaxCall，但没有成功。所以，假设我想跟踪工具提示的状态，那么使用对象文字会是一个坏主意吗？还是因为在这个小例子中我无法充分展示它的用途。效果很好，顺便说一句。谢谢:)

在这种特定情况下，它只会增加开销；拥有一个状态对象并不是一个坏习惯，这对 IMO 来说只是一个糟糕的用例。

我明白了。那么，这里的click 是什么？我尝试使用 () 而不是 click 来执行该函数，但出现错误。

click 不带参数将使 jQuery 模拟单击​​按钮并触发任何相关事件。通过模拟单击，我们可以确保用户只需单击一次按钮即可查看工具提示。