Friday, 10 June 2011

JQuery: Dynamically Add/Remove jquery.ui button from dialog

When using the dialog widget within the jquery.ui library, it may become necessary to add or remove buttons dynamically.
Invoking the extension methods below will allow you to achieve the desired result.


Code Snippet
Code Snippet
  1. // Example:
  2. //            $('#IDDialogDiv').dialog('addbutton', 'Name of button');
  3. //            $('#IDDialogDiv').dialog('removebutton', 'Name of button');
  4. //
  5. //
  6. // Allows simple button addition to a ui dialog
  7. $.extend($.ui.dialog.prototype, {
  8.     'addbutton': function (buttonName, func) {
  9.         var buttons = this.element.dialog('option', 'buttons');
  10.         buttons[buttonName] = func;
  11.         this.element.dialog('option', 'buttons', buttons);
  12.     }
  13. });
  14.  
  15. // Allows simple button removal from a ui dialog
  16. $.extend($.ui.dialog.prototype, {
  17.     'removebutton': function (buttonName) {
  18.         var buttons = this.element.dialog('option', 'buttons');
  19.         delete buttons[buttonName];
  20.         this.element.dialog('option', 'buttons', buttons);
  21.     }
  22. });
End of Code Snippet

No comments: