Walt Gordon Jones

If you’re using the Prototype javascript framework and Scriptaculous UI libraries to enhance your front end, the Scriptaculous InPlaceCollectionEditor is a great AJAX select control. The one problem for me was getting it to work on IE7. Looking around the web, the solutions posted here and here didn’t work for the latest version of Scriptaculous. After some debugging, here’s what did work.

There are several places in the InPlaceCollectionEditor code (controls.js) where document.createElement() is used to add an element to the DOM. In all other browsers, the new elements is implicitly extended with Prototype goodness. In IE7 you have to explicitly extend it.

(Line numbers from controls.js version 1.8.2)

Line 518:

var btn = document.createElement('input'); Element.extend(btn);

Line 527:

var link = document.createElement('a'); Element.extend(link);

Line 542:

fld = document.createElement('input'); Element.extend(fld);

Line 547:

fld = document.createElement('textarea'); Element.extend(fld);

Line 763:

var list = document.createElement('select'); Element.extend(list);

Line 798:

tempOption = document.createElement('option'); Element.extend(tempOption);

Line 841:

option = document.createElement('option'); Element.extend(option);

After these changes, InPlaceCollectionEditor worked flawlessly for me in all major browsers including IE7+.