2

I'm interested in extending the behavior of jqueryUI's dialog widget. In the past I've overridden functions like this:

//Custom dragging
$.ui.dialog.prototype._makeDraggable = function () {}

But I think I should change to using the widget factory to create a new widget instead that inherits from dialog.

I believe the code should look like this:

(function($, undefined) {
  $.widget('cs.dialog', $.ui.dialog, {
    // definition of the widget goes here
  });
}(jQuery));

My question is will this cause a conflict even though my dialog widget is in the cs namespace and jquery's is in the ui namespace? I believe jquery attaches the widget method to $.fn so I think it would.

If so, what's the purpose of the namespace if you still get conflicts? DO I need to name my widget "cs.csDialog" to keep it unique? I feel like there's something missing in my understanding of this.

Thanks for any help or clarification.

1 Answer 1

2

$.widget() calls $.widget.bridge() internally to add the widget method to the $ object:

$.widget.bridge(name, $[namespace][name]);

As you can see, it only passes the widget's name and the creation function. The namespace is only used to access the creation function and is not made part of the method's name.

So, in your case, calling your widget dialog will indeed replace $.dialog(). The original $.dialog() method will, however, remain available as $.ui.dialog() and, in the same way, yours will always be available as $.cs.dialog().

3
  • OK, that clears up a lot, thank you. Assuming I did wish to refer to the widget method as $.cs.dialog() what is the syntax to apply it to an element?
    – C.J.
    Oct 8, 2011 at 14:28
  • You should pass the widget options first, then the element, e.g. $.cs.dialog({autoOpen: false}, yourElement);. Oct 8, 2011 at 14:31
  • @FrédéricHamidi This is nice to know. And how can we call a method using this approach i.e. using $.cs.dialog. Is the syntax same in that case as well. i.e. $.cs.dialog('refresh', yourElement) where refresh is the method? Also, is there any place where details of widget.bridge are documented? I am using this but when I update my jQuery and jQuery UI I am facing issues here. Link to documentation can be a good start I guess. Aug 3, 2013 at 6:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.