Avoiding errors extending existing widgets
I am wondering why when extending a jquery dialog widget I get an error for tabbable elements. Am I missing something in how I'm overriding the default functions?
I am just starting to look into how to extend existing jquery ui widgets. First off I need to modify the jquery dialog open method to only append the dialog to the body when it's adjacent to another dialog AND the modal option is set to true, otherwise the dialog would stay in whatever container I've assigned it.
My problem here is that as soon as I override the open method I get an error related to the :tabbable elements in the dialog. (See commented code below).
- $.widget("ui.myDialog", $.extend({}, $.ui.dialog.prototype, {
open: function(){
if (this._isOpen) {
return
}
var d = this, e = d.options, c = d.uiDialog;
d.overlay = e.modal ? new b.ui.dialog.overlay(d) : null;
if (c.next().length && e.modal) {
c.appendTo("body")
}
d._size();
d._position(e.position);
c.show(e.show);
d.moveToTop(true);
if (e.modal) {
c.bind("keypress.ui-dialog", function(h){
if (h.keyCode !== b.ui.keyCode.TAB) {
return
}
var g = b(":tabbable", this), i = g.filter(":first"), f = g.filter(":last");
if (h.target === f[0] && !h.shiftKey) {
i.focus(1);
return false
}
else {
if (h.target === i[0] && h.shiftKey) {
f.focus(1);
return false
}
}
})
}
/* Fails at the next line because :tabbable:first is null */
b([]).add(c.find(".ui-dialog-content :tabbable:first")).add(c.find(".ui-dialog-buttonpane :tabbable:first")).add(c).filter(":first").focus();
d._trigger("open");
d._isOpen = true;
return d
}
}));
This override method is identical to the open in the existing code except that it adds a test for e.modal before appending to body.
FYI I'm developing against IE6.