Defining multiple instances of a jquery ui widget on a single page
<p>I am developing a website where I use a custom build jQuery widget to load data into multiple divs.</p>

<p><strong>This is the code for the widget:</strong></p>

<pre><code>(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 ("&lt;div id='loading'&gt;Loading&lt;/div&gt;");

                    }

                },

                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);
</code></pre>

<p><strong>I load data using the widget like this:</strong></p>

<pre><code>$('#targetdiv').contentloader ({

 url: '&lt;?php echo $action_url; ?&gt;',

 target_area: '#popup_box',

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

});
</code></pre>

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

<pre><code>$('#targetdiv').contentloader
</code></pre>
