This project is archived and is in readonly mode.

#180 ✓resolved
Harold

Unable to use Element.set('html', html) on tbody tags on ie

Reported by Harold | June 30th, 2008 @ 07:01 PM | in 2.0 (closed)

I whant use Element.set('html', html) on tbody, tr and select element so i build this little patch.

I think it can be usefull to merge it on trunk.

Issue from prototype, no other issue found. 

Element.Properties.html = {

    set: function(){
        var tagName = this.get('tag'), html = Array.flatten(arguments).join('');
        if (Browser.Engine.trident && Element.Properties.insertionTranslations[tagName]) {
            if (tagName in Element.Properties.insertionTranslations) {
                $A(this.childNodes).each(function(node) { element.removeChild(node) });
                this._getContentFromAnonymousElement(tagName, html).each(function(node) {
                       this.appendChild(node)
                }, this);
            }
            return this;
        } else {
            return this.innerHTML = html;
        }
    }
};

Element.implement({

    _getContentFromAnonymousElement: function(tagName, html) {
      var div = new Element('div'), t = Element.Properties.insertionTranslations[tagName];
      if (t) {
        div.innerHTML = t[0] + html + t[1];
        t[2].times(function() { div = div.firstChild });
      } else div.innerHTML = html;
      return $A(div.childNodes);
    }

});

Element.Properties.insertionTranslations = {
    table:  ['<table>',                '</table>',                   1],
    tbody:  ['<table><tbody>',         '</tbody></table>',           2],
    tr:     ['<table><tbody><tr>',     '</tr></tbody></table>',      3],
    td:     ['<table><tbody><tr><td>', '</td></tr></tbody></table>', 4],
    select: ['<select>',               '</select>',                  1]
};

Comments and changes to this ticket

  • Guilherme Dupont

    Guilherme Dupont August 2nd, 2008 @ 02:21 AM

    • Tag changed from “core, enhancement, ie, patch” to “core, enhancement, ie, patch, table, tbody”

    I do this in mootools way 

    Element.Properties.html = {set: function(){
	var tagName = this.get('tag'), html = Array.flatten(arguments).join('');
	if (Browser.Engine.trident && Element.Properties.insertionTranslations[tagName]) {
		var node = new Element('div', {html: Element.Properties.insertionTranslations[tagName].replace('*', html) }).getElement(tagName);
		node.replaces(this);
	} else {
		return this.innerHTML = html;
	}
	
}};

Element.Properties.insertionTranslations = {
    table: '<table>*</table>',
    tbody: '<table><tbody>*</tbody></table>',
    tr: '<table><tbody><tr>*</tr></tbody></table>',
    td: '<table><tbody><tr><td>*</td></tr></tbody></table>',
    select: '<select>*</select>'
};

    Here is a example

  • Guilherme Dupont

    Guilherme Dupont August 2nd, 2008 @ 03:27 AM

    sorry, i missed to return the element.

    here is the new code: 

    Element.Properties.html = {set: function(){
	var tagName = this.get('tag'), html = Array.flatten(arguments).join('');
	if (Browser.Engine.trident && Element.Properties.insertionTranslations[tagName]) {
		var node = new Element('div', {html: Element.Properties.insertionTranslations[tagName].replace('*', html) });
		return node.getElement(tagName).replaces(this);
	} else {
		return this.innerHTML = html;
	}
}};
  • Tom Occhino

    Tom Occhino October 3rd, 2008 @ 05:14 AM

    • State changed from “new” to “resolved”
    • Tag changed from “core, enhancement, ie, patch, table, tbody” to “enhancement, ie, patch, table, tbody”

    fixed in master

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

People watching this ticket

Tags

Pages