1

「表示」を処理するたびに2つのAJAXリクエストを作成するBootstrapのポップオーバーに問題があります。

それを念頭に置いて、私はAJAXを使用してポップオーバーにデータを入力することに取り組んでおり、毎回2つのリクエストを持つことは私の良い考えではありません.

これを1つのリクエストに落とすアイデアはありますか? これは、ツールチップ（ポップオーバーが拡張する）と同じ問題を示すjsFiddleです。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

問題は、タイトルとコンテンツの両方にタイトルを使用していたことです。ポップオーバーには、コンテンツ用の別のメソッドがあります。

そのため、それらを正しく使用し始めると、サーバーへのリクエストは 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 に答える