twitter-bootstrap Twitter Bootstrap Popover 和 AJAX
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14736604/
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
Twitter Bootstrap Popover and AJAX
提问by Alexandre
I been browsing SO for solutions on how to load an ajax content on bootstrap popover but can't find any decent solutions.
我一直在浏览 SO 以获取有关如何在 bootstrap popover 上加载 ajax 内容的解决方案，但找不到任何像样的解决方案。
Here's what I have so far:
这是我到目前为止所拥有的：
$(".btnCharge").click(function () {
$("#boxPayment").fadeIn();
})
.popover({
title: 'Advantages',
html: 'true',
content: function () {
$.ajax({
type: "POST",
url: "Index.aspx/FindAdvantagesByCCID",
data: '{"id": "' + 1 + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var json = jQuery.parseJSON(data.d);
var html = '';
$.each(json, function (i, item) {
html = html + '<a href="#"><i class="icon-ok"></i>' + item.Advantage + '</a><br />';
});
}
});
},
placement: 'bottom',
trigger: 'hover'
});
How can i add the ajax response to popover content? I tried "return" and doesnt work.
如何将 ajax 响应添加到 popover 内容？我试过“返回”但不起作用。
Any clean solutions?
任何干净的解决方案？
回答by Praveen Kumar Purushothaman
Yes. it is possible. And it has been answeredalready.
是的。有可能的。它已经得到了回答。
Using data-attributes you can provide the URL, like here:
使用data-属性，您可以提供 URL，如下所示：
<a href="#" title="blabla" data-ajaxload="/test.php">blabla</a>
Now the handler:
现在处理程序：
$('*[data-ajaxload]').bind('hover',function(){
var e=$(this);
e.unbind('hover');
$.get(e.data('ajaxload'),function(d){
e.popover({content: d}).popover('show');
});
});
unbind('hover')prevents loading data more than once and popover() binds a new hover event. If you want the data to be refreshed at every hover event, you should modify this a bit.
unbind('hover')防止多次加载数据，popover() 绑定一个新的悬停事件。如果您希望在每个悬停事件时刷新数据，您应该稍微修改一下。
回答by Djuki
You can directly access to popover option data like this:
您可以像这样直接访问弹出选项数据：
popoverData = $('.myPopover').data('popover')
So, you can do this to change popover content since it cant be changed once it is set.
因此，您可以执行此操作来更改弹出窗口内容，因为一旦设置就无法更改。
if (popoverData = $('.myPopover').data('popover'))
{
popoverData.options.content = newContent;
}
$('.myPopover').popover({ content: newContent, html:true, trigger:'hover' }).popover("show");
回答by JeppePepp
Your Html like this...
你的HTML像这样...
Id is present in your loop. You will use this value to retrieve additional information (ajax).
Id 存在于您的循环中。您将使用此值来检索附加信息 (ajax)。
<tbody data-bind="foreach:persons">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: name"></td>
<td ><span data-bind="popOver: {content : $root.contentData, id: id}"</td>
</tr>
</tbody>
In your viewModel you have a variable - this variable is initially empty.
在您的 viewModel 中，您有一个变量 - 该变量最初为空。
var contentData = ko.observable();
Add a custom binding handler like:
添加一个自定义绑定处理程序，如：
> ko.bindingHandlers.popOver = {
> init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
> var value = ko.utils.unwrapObservable(valueAccessor());
>
> var options = {
> placement: 'top',
> title: "Title",
> html: true,
> trigger: 'manual',
> content: value.content
> };
>
> $(element).popover(options);
>
>
>
>
> $(element).click(function () {
> var id = value.id();
> var response = myApp.GetAdditionalData(id);
> value.content(response.content);
>
> $(this).popover('toggle');
> });
> } };
Outside your viewModel you will have a function making the ajax call:
在您的 viewModel 之外，您将有一个进行 ajax 调用的函数：
var GetAdditionalDataFromAjax = function (id) {
return { "content": "some content returned by id"};
