Question

I have created a jQuery plugin that grabs a JSON feed (in this case YouTube). It then displays the results in a DIV – everything is fine until: I want to show the results (with different settings: i.e. more videos, other channel) in two or more containers – how can I achieve this?

btw… Is this the right title for my question? I’m by far not a jQuery/JS expert 🙂

Here is my code so far – I shortened it to the fundamental actions and a rudimentary output:

(function($){
    // Default settings
    var settings = {
        author:     'ARD',
        results:    3
    };

    // Append to Container
    var append_to_container;

    // The Methods
    var methods = {
        // Initate
        init: function(options){
            append_to_container = $(this);

            $.extend(settings, options);
            methods.grabFeed();
        },

        // Grab feed
        grabFeed: function(){
            $.ajax({
                url: 'http://gdata.youtube.com/feeds/api/videos',
                data: {
                    author: settings.author,
                    v: '2',
                    alt: 'jsonc',
                    'max-results': settings.results
                },
                dataType: 'jsonp',
                success: function(data){
                    methods.gotResults(data);
                }
            });
        },

        // Placeholder for results
        gotResults: function(data){
            console.log(data);
            $("<h1>Success!</h1>").appendTo(append_to_container);
        }
    };


    $.fn.youtubeVideos = function(method){
        // Method calling logic
        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.youtubeVideos' );
        }
    }

})(jQuery);

Now when I call $('#main').youtubeVideos(); it works as expected.

But now I want to show the results in more than one DOM element. So when I call for example:

$('#main').youtubeVideos();
$('#same_videos').youtubeVideos();

it show the Success! message two times in the container used in the second call.

I tried with several answers from stackoveflow and the web – but I can’t find a way to use my function more than one time. How can I use my plugin more than only one time on several containers?

---

EDIT / Solution

Here is my solution after the tip from Codemonkey:

(function($){

    $.fn.youtubeVideos = function(method){

        // Default settings
        var settings = {
            author:     'ARD',
            results:    3
        };

        // Append to Container
        var append_to_container;

        // The Methods
        var methods = {
            // Initate
            init: function(options){
                append_to_container = $(this);

                $.extend(settings, options);
                methods.grabFeed();
            },

            // Grab feed
            grabFeed: function(){
                $.ajax({
                    url: 'http://gdata.youtube.com/feeds/api/videos',
                    data: {
                        author: settings.author,
                        v: '2',
                        alt: 'jsonc',
                        'max-results': settings.results
                    },
                    dataType: 'jsonp',
                    success: function(data){
                        methods.gotResults(data);
                    }
                });
            },

            // Placeholder for results
            gotResults: function(data){
                console.log(data);
                $("<h1>Success!</h1>").appendTo(append_to_container);
            }
        };


        // Method calling logic
        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.youtubeVideos' );
        }
    }

})(jQuery);

$('#main').youtubeVideos();
$('#same_videos').youtubeVideos();

Answer 1

By putting all your functionality into:

$.fn.youtubeVideos = function(method){ ...

That’s it. The context of that function will be unique for every time you run the plugin function. If you need data to persist in a jQuery object over multiple calls of the plugin function then use jQuery.data. Other than that you’re good to go.

You should check out some jQuery plugin examples (Pick and choose) to see how they work.