As I'm working on the new interface of MyOwnDB based on YUI, I have discovered 2 subtle differences between IE and FF when creating nodes with YUI 3.
1. You can't change attribute values of INPUT nodes created from a template using the long closing node syntax
Update: IE is actually doing the right thing, as the input tag does not accept a closing tag as defined by the W3C .
By long syntax, I mean closing a tag with an explicit closing tag:
1 | <input name="answer"></input> |
as opposed to the short syntax:
1 | <input name="answer" /> |
If you create an input node with YUI3 based on the long syntax with IE, you won't be able to set attribute values:
1 | template = '<input name="myfile" type="file"></input>'; |
2 | var fileField = Y.Node.create(template); |
3 | fileField.setAttrs({id: 'id453'}); fileField.getAttribute('id'); // => "" |
The solution is to use the short syntax to close your tag:
1 | template = '<input name="myfile" type="file"/>'; |
Note that this is only for input nodes. Divs are workling fine with the long syntax:
1 | template = '<div name="divname"></div>'; |
2 | var div = Y.Node.create(template); |
3 | div.setAttrs({id: 'id453'}); div.getAttribute('id'); // => "id453" |
2. With IE, you can't set the type of an input node to "file"
This code will generate a file field with FF, but a text field with IE:
1 | template = '<input name="myfile"/>' |
2 | var fileField = Y.Node.create(template); fileField.setAttrs({type: 'file'}); |
If you want to make it work with IE, you have to make your template include the type attribute:
1 | template = '<input type="file" name="myfile"/>' |
I've put a demo page for those interesting in the code, with a YUI console.
Add comment