1

我遇到了 Bootstrap 的弹出窗口问题,它每次处理“显示”时都会发出 2 个 AJAX 请求。

考虑到这一点,我正在努力使用 AJAX 来填充弹出框,并且每次有 2 个请求并不是我认为的好东西。

有没有人有任何想法将其减少为 1 个请求?这是 jsFiddle,它显示了与工具提示(popover 扩展)相同的问题。http://jsfiddle.net/Handyman/NBkKE/1/

html:

<div class="container">
<div class="row">
    <div class="span12" id="content">
        <div class="span6">
            <span class="btn btn-primary">item1</span>
        </div>
        <div class="span6">
            <span class="btn btn-primary">item2</span>
        </div>
        <div class="span6">
            <span class="btn btn-primary">item3</span>
        </div>
        <div class="span6">
            <span class="btn btn-primary">item4</span>
        </div>
    </div>
</div>
</div>
<div id="container"></div> 

JS:

var $counter = 0;
$('#content').tooltip({
html: true,
trigger: 'hover',
placement: 'bottom',
container: '#container',
title: function()
{
    $.ajax({
        type: 'GET',
        url: '/echo/json/',
        data: {
            item1data: 'some data for item 1',
            item2data: 'some data for item 2'
        },
        success: function($response)
        {
            console.log($response);
        }
    });

    return 'testing' + ($counter++);
}
});
4

1 回答 1

0

所以问题是我对标题和内容都使用了标题。Popover 有一个单独的内容方法。

因此,一旦我开始正确使用它们,我现在只向服务器发出 1 个请求。

新JS:

var $counter = 0;
$('#content').popover({
html: true,
trigger: 'hover',
placement: 'bottom',
container: '#container',
title: function()
{
    return $(this).text();
},
content: function()
{
    $.ajax({
        type: 'GET',
        url: '/echo/json/',
        data: {
            item1data: 'some data for item 1',
            item2data: 'some data for item 2'
        },
        success: function($response)
        {
            console.log($response);
        }
    });

    return 'testing' + ($counter++);
}
});
于 2013-07-25T19:37:45.540 回答