0

カスタムビルドのjQueryウィジェットを使用してデータを複数のdivにロードするWebサイトを開発しています。

ウィジェットのコードは次のとおりです。

(function ($, window, document, undefined) {

    $.widget ("my.contentloader", {

        options: {

            loading_message: true

        },

        _create: function () {

            var that = this;

            $.ajax ({

                type: "POST", 

                url: that.options.url, 

                data: {data: that.options.formdata, limit: that.options.limit, offset: that.options.offset},

                beforeSend: function (html) {

                    if (that.options.loading_message) {

                        $(that.options.target_area).html ("<div id='loading'>Loading</div>");

                    }

                },

                success: function (html) {

                    if (that.options.loading_message) {

                        $('#loading').remove ();

                    }

                    $(that.options.target_area).html (html);

                },

                error: function (html) {

                    $(that.options.error_area).html (html);

                }

            });

        },

        _setOption: function (key, value) {

            this.options[key] = value;

            $.Widget.prototype._setOption.apply (this, arguments);

    }

    });

})(jQuery, window, document);

次のようなウィジェットを使用してデータをロードします。

$('#targetdiv').contentloader ({

 url: '<?php echo $action_url; ?>',

 target_area: '#popup_box',

 formdata: {'username' : username_email, 'password' : password}

});

同じページに複数のインスタンスをロードする際に問題が発生します。このように特定のdivでウィジェットをインスタンス化しない方法はありますか？

$('#targetdiv').contentloader
4

1 に答える 1

1

各インスタンスを変数に割り当てる必要があると思います。そうすれば、各インスタンスを制御したり、インスタンスの配列を反復処理する関数を記述したりできます。

var contentLoaders = [];
$('.target-div').each(function(i, data) {
    contentLoaders[i] = $.widget("my.contentloader", { ... });
});

したがって、次のように、各ローダーを個別に操作できるはずです。

for (var i in contentLoaders) {
    var contentLoader = contentLoaders[i];
    contentLoader.option( ... );
}

また、ウィジェットの複数のインスタンスに DOM ID $('#loading') を使用しています。これは間違っています。ウィジェットごとに個別のローダーを使用するか、ID が存在するかどうかを確認し、存在しない場合にのみ新しいノードを挿入する必要があります。そして、それを削除する場合も同じです。

** この例のブロックを追加しました。役に立てば幸いです: **

//
// This is a way to do it if you want to explicitly define each contentloader.
// Below that, I'll write out a way to define the contentloaders in a loop.
//


var contentLoader1 = $('#targetdiv1').contentloader ({
 url: '<?php echo $action_url; ?>',
 target_area: '#popup_box',
 formdata: {'username' : username_email, 'password' : password}
});
contentLoader1.option('url', 'http://google.com');

var contentLoader2 = $('#targetdiv2').contentloader ({
 url: '<?php echo $action_url; ?>',
 target_area: '#popup_box',
 formdata: {'username' : username_email, 'password' : password}
});
contentLoader2.option('url', 'http:/apple.com');

// Push each widget instance into an array of widget objects
var contentLoaders = [];
contentLoaders.push(contentLoader1);
contentLoaders.push(contentLoader2);
for (var i in contentLoaders) {
    console.log(i, contentLoaders[i].option('url'));
}
// Should print:
// 0 http://google.com
// 1 http://apple.com



//
//
// How to set a bunch of widgets at once from an array of content loader data
//
//

var contentLoaderData = [
    {
        divid: '#targetDiv1',
        url: 'google.com',
        formdata: {
            username: 'joeshmo',
            password: 'joeshmo1'
        }
    },
    {
        divid: '#targetDiv2',
        url: 'apple.com',
        formdata: {
            username: 'plainjane',
            password: 'plainjane1'
        }
    }
];

// Array of widget instances
var contentLoaders = [];
$.each(contentLoaderData, function(index, value) {
    var contentLoader = $(this.divid).contentloader({
        url: this.url,
        target_area: '#popup_box',
        formdata: {'username' : this.formdata.username, 'password' : this.formdata.password}
    });
    // Push each contentLoader instance into the contentLoaders array
    contentLoaders.push(contentLoader);
});
for (var i in contentLoaders) {
    console.log(i, contentLoaders[i].option('url'));
}
// Should print:
// 0 http://google.com
// 1 http://apple.com
于 2012-05-28T21:59:53.017 に答える