View Full Version : How to properly subclass BasicDialog?

16 Feb 2007, 7:13 AM

I've been having some trouble subclassing BasicDialog. It's probably my fault, but who knows. I have been using the function below to create dialogs:

_showFormDialog: function(dialogId,url,userConfig) {

var config = {};
autoCreate: true,
modal: true,
width: "550px",
height: "300px",
resizable: false,
draggable: false,
shim: true,
shadow: true

var dialog = new YAHOO.wbd.ext.FormDialog(dialogId,config);


It's not perfect, actually it's just a starting point. I decided that I wanted to add a bunch of functionality, so I decided to encapsulate it all in a FormDialog class. So I did the following:

YAHOO.wbd.ext.FormDialog = function(el,config) {


Then I tried to instantiate this in the function above, rather than BasicDialog, simply as a proof of concept. This seems to work fine the first time I fire up a dialog, but if I then invoke the same dialog again, I get the following error:

The container of an boundary-point of a range is being set to either a node of an invalid type or a node with an ancestor of an invalid type." code: "2

Does anyone see something wrong on the face of this? I thought it might have to do with what I am doing to destory the dialog each time it is hidden (inoptimal, I know; it was just a stop-gap for a prototype), but I verified that I'm not creating duplicate ID's or anything.

Anyway, thanks for any help you can provide

16 Feb 2007, 9:00 AM
Part of your problem may be that width and height should be numbers, not strings. It's possible that some parts of the code are handling it, but it's failing somewhere further on.

16 Feb 2007, 9:20 AM
Thanks for the reply. I actually did it like that because in Jack's example in the API docs it reads: "width: (css)", which I assumed meant I should use native CSS syntax.

Anyway I changed them to numbers, but still no dice.

Thanks again

16 Feb 2007, 10:22 AM
I looked a little further, and css entries are ok - there's some other places in the doc that need to be updated to indicate that they can take more than numbers.

When you create this the dialog are you using an existing div or are you creating it from scratch?

16 Feb 2007, 11:14 AM
I'm creating it from scratch, actually I'm pretty sure that's where the problem is. Also notice that I have an event listener, so that the dialog is destroyed - and also destroys the DOM node - when it is hidden. It is only on the second invocation of the dialog that the error occurs, and only when I'm using my subclass - not when I use BasicDialog itself.

I pulled in the debug js file so I could see exactly where the problem was, and it's in YAHOO.ext.DomHelper.insertHtml. In yahoo-core-debug.js, the line is 607.

16 Feb 2007, 11:15 AM
sorry, I meant yui-ext-core-debug.js (not yahoo-core-debug.js)

16 Feb 2007, 11:50 AM
OK, after delving deeper in order to give you more info, I was able to fix the problem. But I still don't understand the core of the issue, so if you've got it figured out, I'd love to hear about it.

As soon as I removed the event listener which destroys the dialog (and it's DOM node) on "hide", the problem went away. I had some other issues at that point, but a little refactoring fixed those.

Thank you for your help!