JQuery UI: How to call a widget function with its namespace

Question

I created two custom JQuery UI widgets with same name but with different namespaces as given below: First widget:

$.widget('finance.dialog',{....}); // this was created in the file jquery.finance.dialog.js

Second widget:

$.widget('hr.dialog',{.....}); // this was created in the file jquery.hr.dialog.js

Apart from these two, JQuery UI has its own dialog widget (ui.dialog) in the namespace ui.

My question is: Which dialog widget will be called when i call the following in a web page as given below?

$('div#something').dialog();

Please note I include all the three widget variants in the web page.

I understand there are conflicts in the above scenario. How can we invoke a widget function with its namespace so that there will not be any conflicts?

gary · Accepted Answer · 2011-11-17 15:59:05Z

19

I had the same question, but I don't think it's possible to invoke a jquery ui widget with the namespace.

If I understand correctly from this: http://bugs.jqueryui.com/ticket/7489 By defining widgets with the same name, it's by design to overwrite earlier definitions. Because regardless of namespace, the widgets are mapped with their name to $.fn.

As suggested in the bug ticket you can use the bridge function to create a unique mapping to the specific namespaced widget and call it using the unique name.

In your case, it can be like this:

$.widget.bridge( "finance_dialog", $.finance.dialog );
$.widget.bridge( "hr_dialog", $.hr.dialog );

// then call it with...
$( "div#something" ).hr_dialog();

I suppose another way would be to create unique widget names in the first place.

answered Nov 17, 2011 at 15:59

gary

1,55612 silver badges8 bronze badges

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

Comments

Grigur · Accepted Answer · 2014-01-15 08:53:52Z

14

You can invoke a jQuery UI widget by its namespace like this:

$.ui.dialog(null, $('div#something'));  // Default jQ UI dialog
$.finance.dialog(null, $('div#something'));  // Your first custom dialog
$.hr.dialog(null, $('div#something'));  // Your second custom dialog

Use the first parameter, which is null in the example above, to send any options to the widget.

edited Jan 15, 2014 at 8:53

answered Jan 15, 2014 at 8:42

Grigur

4653 silver badges6 bronze badges

1 Comment

Victor Aguilar Over a year ago

This method have a issue. After you have initialize the plugin you cannot call methods. If you try it you will receive a the messages cannot call methods on dialog prior to initialization. I think to be caused because the bridge method is not called when the widget is initialized in this way.

Gilad · Accepted Answer · 2014-12-23 14:42:04Z

I think these two functions can help in such case. The first load a widget by pointing to the function created by JQ on the namespace object. The second use the name directly which I think will not be conflict as long as name is unique.

        /**
         * Apply the JQuery UI widget on an element with the given selector
         * @param {String} emSelector selector
         * @param {String} namespace widget namespace
         * @param {String} widgetName widget name
         * @param {Object}[options] options options object or null
         */
        jqUIWidgetByNSAndName:function(emSelector, namespace, widgetName, options) {
            var em = $(emSelector);
            $[namespace][widgetName].call(em, options, em);
        },


        /**
         * Apply the JQuery UI widget on an element with the given selector
         * @param {String} emSelector selector
         * @param {String} widgetName widget name
         * @param {Object}[options] options options object or null
         */
        jqUIWidgetByName:function (emSelector, widgetName, options) {
            var em = $(emSelector);
            $.fn[widgetName].call(em, options);
        }

        //Example1 - with namespace
        this.jqUIWidgetByNSAndName("#abc", "cg", "WebsiteGlass", options);

        //Example2 - without namespace
        this.jqUIWidgetByName("#abc",  "WebsiteGlass", options);

Collectives™ on Stack Overflow

JQuery UI: How to call a widget function with its namespace

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related