4

I am using jQuery's UI dialogs and I want to add a custom method.

Basically when my dialog has a class of 'working', it has a loading overlay in it. I am trying to write some global application jQuery so that when any dialog closes, it removes the class 'working'.

I'm not really sure what I'm doing but this is what I have so far:

(function ($) {

    // BIND TO DIALOG CLOSE EVENT
    $('.ui-dialog').live('dialogclose', function() {
        $(this).dialog('cancelWorking');
    });

    // CUSTOM METHOD
    $.fn.dialog.cancelWorking = function() {
        $(this).removeClass('working');
    };

}(jQuery));

As you can see I'm not really sure how to call the cancelWorking method of a dialog, and I'm not sure if I've even defined the method properly.

BadHorsie
  • 14,135
  • 30
  • 117
  • 191
  • you could try to make your own plugin that inherits from the dialog and load it with your own methods. `$.widget('ui.myDialog','ui.dialog',{...});` – jyore Aug 30 '11 at 18:45
  • 1
    Sorry the `'ui.dialog'` string above should be the actual widget `$.ui.dialog`. See post below for example. – jyore Aug 30 '11 at 19:05

2 Answers2

6

As mentioned in my comment, you can inherit from a plugin and extend its methods. 

(function($,undefined) {

    $.widget('ui.mydialog', $.ui.dialog,{
        test : function() { alert('works') },
    });

    $.extend($.ui.mydialog,{version:'v0.1'});
 })(jQuery);

To use it simply:

$('.selector').mydialog({modal:true}); //Create (same as a dialog)

$('.selector').mydialog('test');  //Call extended method

This pattern allows you to add additional input options, methods, events, etc. as well as overload or extend the functions supplied in the parent plugin.

Should also mention that this is nice because you can still use the regular plugin without modifications elsewhere in your UI.

jyore
  • 4,715
  • 2
  • 21
  • 26
  • So is there no simple way to just add a custom method to a plugin without making an entire inherited custom plugin? – BadHorsie Aug 31 '11 at 09:31
  • I'll do a little research and try to find out...this is the way that I would personally do it though. I don't think changing the general form of a plugin is necessarily best. To me that is virtually the same as editing the source code, which you are also welcome to do. I'll edit my post if i find something else. – jyore Aug 31 '11 at 13:35
  • @BadHorsie, I have not been able to find another way of doing it without completely wrecking the dialog namespace, which is bad...is there a reason why you would be against an inherited plugin with custom methods? You mentioned a simple way, but how is the extension not simple...you can take my code sample and add your method and you are good to go..a total of probably 20 lines of code or less when you are done. Plus you can use the "this" property inside the function which gives you access to all of the options, methods, events, and the actual element directly. – jyore Aug 31 '11 at 22:30
  • where do I place the above code ? on another external javascript file or within the plugin js-file. I did the above on another file but my browser cannot see the file. Kind regards. – Faiyet Sep 19 '12 at 15:27
  • @Binaryrespawn sorry for the delayed response as I have not been on Stack Overflow as much as of late. I hope that you have found your solution, but if not. You would create a separate js file and then include it via a – jyore Dec 18 '12 at 13:44
4

I wanted to do the same thing, but wasn't satisfied with the accepted answer. I looked a little further into it and found that you can new methods as such:

$.ui.dialog.prototype.toggleProcessing = function(enable) {
    alert(((enable) ? 'en' : 'dis') + 'able processing');
}

And then you can call it as you'd call any other jQuery UI method:

$('#myDialog').dialog('toggleProcessing', true);
$('#myDialog').dialog('toggleProcessing', false);
Langdon
  • 19,875
  • 18
  • 88
  • 107
  • The answer by jyore is the preferred way to do it, but I need this way. I had a lot of legacy code that depended on using the normal autocomplete. The preferred way would have me change all references from 'autocomplete' to 'myAutocomplete'. Or I'd have to change the source but this makes updating jQuery UI more difficult. That's why this route does make sense in some cases. – Peter Feb 25 '14 at 09:59