views:

25

answers:

1

Hi

I have the following piece of code:

<form action="/fake" >
    <div id="root">
    </div>
</form>

<script type="text/javascript">
    var root = Element.extend($("root"));

    function addTextControl()
    {
      var textCtl = new Element('div', { 'contenteditable': 'true'}).update("Next page");
      root.appendChild(textCtl);
    };

    addTextControl();
</script>

It works perfectly in FF and Chrome, but not in IE8 :-(. What is the problem with it?

Thank you in advance

+2  A: 

Would you believe it's a casing issue?

Try this instead:

new Element('div', { 'contentEditable': 'true'})...

Note the capital E in contentEditable.

InvisibleBacon
+1. This is due to IE not understanding the difference between an attribute and a property. In general you should avoid `setAttribute` and use properties instead (where the capital `E` is unequivocally required) due to this sort of IE bug. Unfortunately, Prototype (like jQuery) attempts to blur the distinction, trying to allow you to set both properties and attributes through the `new Element` interface. IMO this feature is best avoided as it only makes the bugs more subtle and difficult to understand.
bobince
Good explanation.
InvisibleBacon