3

Fancybox 内の入力フィールドとリストを使用して、クライアントを検索およびフェッチし、2 つのカスタム Ajax 関数を使用しています。

すべてが機能しますが、同じ Fancybox を再度開くと、Ajax 関数が複数回トリガーされます。

  • 最初の ajax 関数: searchClient()、クライアントの新しいリストを取得します

  • 2 番目の ajax 関数: selectClient()、クライアント情報を取得し、Fancybox を閉じます

ファンシーボックスを再度開くのではなく、リセットする方法はありますか? または、機能構造を再考する必要がありますか? もしそうなら、どのように？

更新： DOMがロードされたときに最初にコンテンツを変数に割り当て、Fancyboxが閉じたときにこの変数のコンテンツをDOMに戻すことにより、Fancyboxのコンテンツをリセットする必要がありました。これにより、Fancybox は、すべての変更を加えることなく、同じコンテンツを何度も開くことができます。

功績はNick Tomlinにあります。

修理：

// on DOM ready
var popup = $('#popup-contacts').html();

// Fancybox
$.fancybox.open({
    href: '#popup-contacts',
    padding: 0,
    autoWidth: true,
    arrows: false,
    closeBtn: false,
    scrollOutside: true,
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(0, 0, 0, 0.5)'
            },
            locked: false
        }
    },
    afterShow: function() {
        selectClient();
        searchClient();
    },
    afterClose: function() {
        $('#popup-contacts').html(popup);   // Reset popup content
    }
});

元のコード:

function searchClient() {
    $('.popup .search').keyup(function(k) {
        if ((k.keyCode >= 48 && k.keyCode <= 90) || (k.keyCode >= 96 && k.keyCode <= 105) || k.keyCode == 8 || k.keyCode == 46 || k.keyCode == 109 || k.keyCode == 189)
        {
            var search = $.trim($(this).val());

            var dataString = 'ajax=true&action=searchClient&search='+encodeURIComponent(search);

            $.ajax({
                type: 'POST',
                url: $(this).attr('rel'),
                cache: false,
                data: dataString,
                dataType: 'json',
                success: function(response) {
                    if (response.status == 'match') {
                        $('.popup-contacts').find('ul').html(response.clients);
                        selectClient();
                    }
                    if (response.status == 'error') {
                        $('.popup-contacts').find('ul').html('<li>'+response.message+'</li>');
                    }
                },
                error: function() {

                }
            });
        }
    });
}


function selectClient() {
    $('.popup ul li').click(function() {
        var contactNumber = $(this).attr('rel');
        var dataString = 'ajax=true&action=selectClient&contactNumber='+contactNumber;

        $.ajax({
            type: 'POST',
            url: $(this).parent().attr('rel'),
            cache: false,
            data: dataString,
            dataType: 'json',
            success: function(response) {
                if (response.status == 'success') {
                    $('textarea[name="infoTo"]').focus().val(response.clientInfo);
                    $.fancybox.close();
                }
                if (response.status == 'error') {

                }
            },
            error: function() {

            }
        });
    });
}


// Open Fancybox

$('textarea[name="infoTo"]').focus(function() {
    if ($.trim($(this).val()) == '')
    {
        $.fancybox.open({
            href: '#popup-contacts',
            padding: 0,
            autoWidth: true,
            arrows: false,
            closeBtn: false,
            scrollOutside: true,
            helpers: {
                overlay: {
                    css: {
                        'background': 'rgba(0, 0, 0, 0.5)'
                    },
                    locked: false
                }
            },
            afterShow: function() {
                selectClient();
                searchClient();
            }
        });
    }
});
4

1 に答える 1

0

解決策: DOM がロードされたときに最初にコンテンツを変数に割り当て、Fancybox が閉じたときにこの変数のコンテンツを DOM に戻すことで、Fancybox コンテンツをリセットする必要がありました。これにより、Fancybox は、すべての変更を加えることなく、同じコンテンツを何度も開くことができます。

功績はNick Tomlinにあります。

修理：

// on DOM ready
var popup = $('#popup-contacts').html();

// Fancybox
$.fancybox.open({
    href: '#popup-contacts',
    padding: 0,
    autoWidth: true,
    arrows: false,
    closeBtn: false,
    scrollOutside: true,
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(0, 0, 0, 0.5)'
            },
            locked: false
        }
    },
    afterShow: function() {
        selectClient();
        searchClient();
    },
    afterClose: function() {
        $('#popup-contacts').html(popup);   // Reset popup content
    }
});
于 2013-11-05T19:41:00.680 に答える