twitter-bootstrap 将引导工具提示设置为 AJAX 调用结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19369323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set bootstrap tooltip to AJAX call results
提问by wootscootinboogie
I have a bootstraptooltip that I want to load data from an AJAX requestion, with the text from the request being the titleproperty of the tooltip. My AJAX request works fine, but I have two problems:
我有一个引导工具提示，我想从 AJAX 请求加载数据，请求中的文本title是工具提示的属性。我的 AJAX 请求工作正常，但我有两个问题：
- Why isn't the data from the AJAX call making its way into the tooltip?
- How can I use my
ttManagerobject to encapsulate the tooltip's state?
- 为什么来自 AJAX 调用的数据没有进入工具提示？
- 如何使用我的
ttManager对象封装工具提示的状态？
Currently, when the page first loads and I click on #btnSubmitin the console I see
successand the correct data from the console.log(ttManager) line
目前，当页面第一次加载并单击#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'
});
});
I'm pretty sure that I need a callback function somewhere, but I'm not sure where. Any future pointers would be appreciated, too. Thanks.
我很确定我在某处需要一个回调函数，但我不确定在哪里。任何未来的指针也将不胜感激。谢谢。
回答by Snuffleupagus
First, a little explanation of bootstrap's tooltip plugin. The tooltip displayed will pull from the elements titleattribute if there's one present, otherwise it will use the title argument passed.
首先，对 bootstrap 的工具提示插件做一点解释。title如果存在，则显示的工具提示将从元素属性中提取，否则将使用传递的标题参数。
The next thing you need to understand is that ajax calls are asynchronous. This means code will continue to run while it's waiting for a response. So, for example, if I do something like this
接下来您需要了解的是 ajax 调用是异步的。这意味着代码将在等待响应时继续运行。所以，例如，如果我做这样的事情
$.ajax({
URL: 'google.com',
success: function(){
console.log('yay');
}
});
console.log('woohoo');
you'd see "woohoo" in the console before "yay". So, currently, you're calling $('#btnSubmit').tooltipbefore your ajax query has altered the state of ttManager.
在“yay”之前，您会在控制台中看到“woohoo”。因此，目前，您是$('#btnSubmit').tooltip在 ajax 查询更改 ttManager 的状态之前调用的。
The other issue is that you're currently not doing anything with ttManager in relation to bootstrap. I feel like I should also mention that the ttManager object seems meaningless here.
另一个问题是您目前没有对 ttManager 做任何与引导程序相关的事情。我觉得我还应该提到 ttManager 对象在这里似乎毫无意义。
Personally, I would change my ajax success function to this (sets the title attribute, calls tooltip, then produces another click to make the tooltip appear)
就我个人而言，我会将我的 ajax 成功函数更改为此（设置标题属性，调用工具提示，然后再次单击以显示工具提示）
success: function(data) {
$('#btnSubmit').attr('title', data.d)
.tooltip({
trigger: 'click',
placement: 'right'
}).click();
}
remove the current $('#btnSubmit').tooltip...code currently there, and add in a one time click handler to call your ajax.
删除$('#btnSubmit').tooltip...当前存在的当前代码，并添加一次单击处理程序来调用您的 ajax。
$('#btnSubmit').one('click', function() {
ajaxCall();
});
