I have been using trhe Prototype.js library to perform AJAX functions on a new website I am developing. This library is a robust and widely used framework for the rapid development of rich websites.
I had a situation where a tab control was using AJAX to dynamically request and load new content into the tab content area. This was working fine until started to develop a piece of tab content that worked as an image gallery.
The server would return a dynamically generated list of thumbnail images which could then be clicked to display a larger version in a pane to the left (still within the tab content area) This would have been ok and was working when I simply coded the script into each thumbnail but I wanted to extend it.
By adding a previous and next button below that large image I needed to create an array of avaialble thumbnails and then be able to call an item in the array by clicking the thumbnail or by increasing or decreasing a position indiccator with the next and previous buttons.
This is where the issue comes in
Because the page snippet being brought back with AJAX now had a <script> tag and funtion declaration in the body the desired actions would not work. I guessed this was because the browser didn't know about the new scripts and so couldn't execute them.
The fix
After searching for a bit and reading through the prototype wiki I located this page which detailed the solution I needed:
If your server logic returns JavaScript code along with HTML markup, the Ajax.Updater object can evaluate that JavaScript code. To get the object to treat the response as JavaScript, you simply add evalScripts: true; to the list of properties in the last argument of the object constructor. But there's a caveat. Those script blocks will not be added to the page's script. As the option name evalScripts suggests, the scripts will be evaluated. What's the difference, you may ask? Lets assume the requested URL returns something like this:
<script language="javascript" type="text/javascript">
function sayHi(){
alert('Hi');
}
</script>
<input type="button" value="Click Me" onclick="sayHi()"/>
In case you've tried it before, you know it doesn't work. The reason is that the script block will be evaluated, and evaluating a script like the above will not create a function named sayHi. It will do nothing. To create this function we need to change our script to create the function. See below.
<script language="javascript" type="text/javascript">
sayHi = function(){
alert('Hi');
};
</script>
<input type="button" value="Click Me" onclick="sayHi()"/>
Note that in the previous example we did not use the var keyword to declare the variable. Doing so would have created a function object that would be local to the script block (at least in IE). Without the var keyword the function object is scoped to the window, which is our intent.
For more complete explanations, see the Ajax.Updater reference and the options reference.
