Executing Javascripts within Content Loaded via Ajax.Updater

I spent an on-and-off 5 hours today searching for what ended up being a very simple solution. Hopefully this might save someone else the trouble if you stumble upon it.

The Goal: I needed certain pieces of text from a dynamically loaded section of a webpage to turn into editable form elements when clicked.

The Problem: After a little searching, I eventually found this could be done with a call to Scriptaculous’s Ajax.InPlaceEditor. However, when dynamically loading part of the page via a call to Prototype’s Ajax.Updater, the javascript for the InPlaceEditor didn’t execute. It wasn’t just a syntax error, a simple alert() didn’t work either.

The Solution: Literally hours later, after many searches and many experiments (through which I learned the InPlaceEditor worked fine when placed on the original page, just not when put into the dynamically loaded portion), I discovered the answer was unbelievably simple. If I had simply RTFM’d, I would have seen in Prototype’s documentation (http://prototypejs.org/api/ajax/updater) that Ajax.Updater has an option called evalScripts, which defaults to false. Passing that parameter as true made everything work perfectly.


<div class="row" id="someID" onclick="new Ajax.Updater('someID', 'callbackpage.php', {
method: 'post',
evalScripts: true
});”>Content</div>