Twitter Bootstrap 弹出框和 AJAX答案

【问题标题】：Twitter Bootstrap Popover and AJAXTwitter Bootstrap 弹出框和 AJAX
【发布时间】：2013-01-22 02:18:08
【问题描述】：

我一直在浏览 SO 以获取有关如何在引导弹出窗口上加载 ajax 内容的解决方案，但找不到任何合适的解决方案。

这是我目前所拥有的：

$(".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'
});

如何将 ajax 响应添加到弹出框内容？我尝试了“返回”，但不起作用。

有什么干净的解决方案吗？

【问题讨论】：

标签： javascript asp.net ajax twitter-bootstrap popover

【解决方案1】：

是的。有可能的。而且已经是answered了。

使用data- 属性可以提供 URL，如下所示：

<a href="#" title="blabla" data-ajaxload="/test.php">blabla</a>

现在处理程序：

$('*[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') 防止多次加载数据，并且 popover() 绑定了一个新的悬停事件。如果您希望在每次悬停事件时刷新数据，您应该稍微修改一下。

【讨论】：

参数怎么样？我需要通过 ajax 调用传递父 ID
你在说哪些参数？
正如我所说，data-ajaxload 是参数。你没看答案吗？
这不是通话路径吗？不必粗鲁:)
嘿，只需将$.get( 到第一个}); 的行替换为您的代码，$.ajax( 直到它的});。：）简单的。明白了吗？

【解决方案2】：

您可以像这样直接访问弹出框选项数据：

popoverData = $('.myPopover').data('popover')

因此，您可以这样做来更改弹出框内容，因为它一旦设置就无法更改。

if (popoverData = $('.myPopover').data('popover'))
{
    popoverData.options.content = newContent;
}

$('.myPopover').popover({ content: newContent, html:true, trigger:'hover' }).popover("show");

【讨论】：

【解决方案3】：

你的 HTML 是这样的...

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>

在您的 viewModel 中，您有一个变量 - 这个变量最初是空的。

 var contentData = ko.observable();

添加自定义绑定处理程序，例如：

> 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');
>         });
>     } };

在您的 viewModel 之外，您将有一个进行 ajax 调用的函数：

 var GetAdditionalDataFromAjax = function (id) {
      return { "content": "some content returned by id"};

【讨论】：