Defining multiple instances of a jquery ui widget on a single page

Question

I am developing a website where I use a custom build jQuery widget to load data into multiple divs.

This is the code for the widget:

(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);

I load data using the widget like this:

$('#targetdiv').contentloader ({

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

 target_area: '#popup_box',

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

});

I am having problems loading multiple instances on the same page. Is there a way to not instantiate the widget on a specific div like this?

$('#targetdiv').contentloader

does that sample code make sense?

Ringo
– Ringo

2012-06-01 06:27:28 +00:00
Commented Jun 1, 2012 at 6:27 — Ringo
– Ringo, Commented Jun 1, 2012 at 6:27

Ringo · Accepted Answer · 2012-05-30 22:29:33Z

1

I think you need to assign each instance to a variable. That way, you can control each instance, or write a function that iterates over an array of instances.

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

So then you should be able to operate on each loader independently, like:

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

Also, you're using the DOM ID $('#loading') for multiple instances of the widget. This is wrong. You need to either use separate loaders for each widget, or else check to see if the ID exists and only insert the new node if it doesn't exist. And same for removing it.

** I've added this example block, hope it helps: **

//
// 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

edited May 30, 2012 at 22:29

answered May 28, 2012 at 21:59

Ringo

5,5333 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jonathan Clark Over a year ago

Do I need to use .each and for loop or can I just use: contentLoaders[1] = $.widget("my.contentloader", { ... });

Jonathan Clark Over a year ago

I get this error: Uncaught TypeError: Cannot set property '0' of undefined

Ringo Over a year ago

oy, if you put it in a jsfiddle, i can help troubleshoot

Ringo Over a year ago

yeah, you can use 'contentLoaders[1] = ....' if you want. the loop i gave would work for doing a bunch of divs at once, but you could certainly do one at a time.

Jonathan Clark Over a year ago

Is this code going into the widget itself or in the calling page? Is it possible that you could merge your code with mine?

|

Collectives™ on Stack Overflow

Defining multiple instances of a jquery ui widget on a single page

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related