1

次のコードを使用して、製品に「ポップオーバー」効果を表示しています。ポップオーバーのコンテンツは Ajax から取得されます。これはTwitter Bootstrap popoversを使用しています。Ajax 呼び出しを 1 回だけ行うことは可能ですか? 現在、製品にマウスを合わせるたびに、リクエストが再度送信されます。このコードを微調整して、コンテンツが既に取得されている場合はそれを使用し、別のリクエストを行わないようにしたいと思います。

ありがとう

$(document).ready(function(){
    //Quick view boxes
    var overPopup = false;

    $("a[rel=popover]", '.favorites').popover({
        trigger: 'manual',
        placement: 'bottom',
        html: true,
        content: function(){
            var div_id =  "div-id-" + $.now();
            return details_in_popup(div_id, $(this).data('product-id'));
        }

    }).mouseover(function (e) {
        // when hovering over an element which has a popover, hide
        // them all except the current one being hovered upon
        $('[rel=popover]').not('[data-unique="' + $(this).data('unique') + '"]').popover('hide');
        var $popover = $(this);
        $popover.popover('show');

        $popover.data('popover').tip().mouseenter(function () {
            overPopup = true;
        }).mouseleave(function () {
            overPopup = false;
            $popover.popover('hide');
        });

    }).mouseout(function (e) {
        // on mouse out of button, close the related popover
        // in 200 milliseconds if you're not hovering over the popover
        var $popover = $(this);
        setTimeout(function () {
            if (!overPopup) {
                $popover.popover('hide');
            }
        }, 200);
    });
});

function details_in_popup(div_id, product_id){
    $.ajax({
        url: 'index.php?route=product/product/get_product_ajax',
        type: 'post',
        data: 'product_id=' + product_id,
        dataType: 'json',
        success: function(json){
            if (json['success']) {
                $('#' + div_id).html(json['success']);
            }

        }
    });
    return '<div id="'+ div_id +'">Loading...</div>';
}

私のhtml構造は次のようになります。

<div class="image">
    <a data-unique="unique-3" data-product-id="39" rel="popover" href="link to product">
        <img src="path to image" />
    </a>
</div>

アップデート：

皆様のご協力とご意見に感謝いたします。これが私がそれを修正した方法です：

function details_in_popup(div_id, product_id){

    //I added this block
    if ( $("#popover_content_for_prod_" + product_id).length ) {
        return $("#popover_content_for_prod_" + product_id).html();
    }

    $.ajax({
        url: 'index.php?route=product/product/get_product_ajax',
        type: 'post',
        data: 'product_id=' + product_id,
        dataType: 'json',
        success: function(json){
            if (json['success']) {
                $('#' + div_id).html(json['success']);

                //Also added this line
                $('body').append('<div style="display:none;" id="popover_content_for_prod_' + product_id + '">' + json['success'] + '</div>');
            }

        }
    });

    return '<div id="'+ div_id +'">Loading...</div>';
}
4

3 に答える 3

1

取得したデータを要素に保存するように ajax 関数をいつでも変更できdata()、ajax 呼び出しなどを行う前にそのようなデータが保存されているかどうかを確認できます。「キャッシュ」関数のようなものです。

function details_in_popup(div_id, product_id){
    var data = $('#' + div_id).data(product_id);
    if ( data ) {
        $('#' + div_id).html(data);
    }else{
        $.ajax({
            url: 'index.php?route=product/product/get_product_ajax',
            type: 'post',
            data: 'product_id=' + product_id,
            dataType: 'json',
            success: function(json){
                if (json['success']) {
                    $('#' + div_id).html(json['success'])
                                   .data(product_id, json['success']);
                }

            }
        });
        return '<div id="'+ div_id +'">Loading...</div>';
    }
}
于 2013-02-19T15:37:34.353 に答える
0

グローバルブール変数を使用するだけですisFetched。Ajaxリクエストの前に確認し、がfalseisFetchedの場合にのみリクエストを実行します。isFetched

var overPopup = false;
var isFetched = false;
var data = '';
$("a[rel=popover]", '.favorites').popover({
    trigger: 'manual',
    placement: 'bottom',
    html: true,
    content: function(){
        var div_id =  "div-id-" + $.now();
        if(!isFetched){
            data = details_in_popup(div_id, $(this).data('product-id'));
        }
        isFetched = true;
        return data;
    }

})
于 2013-02-19T15:38:19.547 に答える
0

非表示の要素を使用しての値を格納しboolean、AJAX呼び出しの前に取得して、完了したら設定します。

HTML：

<div id="hiddenElement" value="true" style="display:none; visibility:hidden;"></div>

JS：

var once = $("hiddenElement").val();

if (once) {
    $.ajax({
        type: "POST", 
        url: "ajax.php?action=add_driver", 
        dataType: "json",
        date:  $("form#addDriver").serializeArray(),
        beforeSend: function() {
            $('.error, .success, .notice').remove();
        }
    }).done(function() {
        $("#hiddenElement").val("false");
    });
}
于 2013-02-19T15:41:55.307 に答える