4

I been browsing SO for solutions on how to load an ajax content on bootstrap popover but can't find any decent solutions.

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.

Any clean solutions?

4

3 に答える 3

10

はい。可能です。そして、それはすでに答えられています。

次のように、属性を使用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() は新しいホバー イベントをバインドします。ホバー イベントごとにデータを更新する場合は、これを少し変更する必要があります。

于 2013-02-06T18:57:26.280 に答える
0

このようなあなたの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"};
于 2014-09-05T14:27:46.520 に答える
0

次のように、ポップオーバー オプション データに直接アクセスできます。

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

したがって、一度設定すると変更できないため、ポップオーバーのコンテンツを変更するためにこれを行うことができます。

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

$('.myPopover').popover({ content: newContent, html:true, trigger:'hover' }).popover("show");
于 2013-08-03T12:27:04.287 に答える