By default, when you use the Ajax.Updater to update parts of pages, the javascript contained inside the response does not get evaluated automatically. Thus, the needed scripts can not be included with the response.

This problem can be easily solved by asking the prototype to evaluate the javascript included in the ajax response. A sample updater request.

var ajax = new Ajax.Updater ("main" , "ajax.php" , {method: "GET" , evalScripts: true } );

The above script tells the prototype to make an AJAX request to the "ajax.php" and assign the response to the innerHTML of the element with the id "main". The important part is the "evalScripts:true" parameter. Which instructs the prototype engine to evaluate the java script included in the response.

The script will be evaluated/executed when the response comes back to the client. However, if you want to include functions in the script and hope to be able to call it later, then just declaring them as normal functions would not do.

A sample script block containing a function which can be called like any other function.

<script type="text/javascript" language="javascript">self.SayHi = function(){alert( "Hello! I am a dynamically loaded javascript function!");}</script>

The important thing is the function has been declared as a member of self rather than a stand alone function. This makes sure that the function is callable by other part of the script just like any other javascript function. A sample call.

<a href="javascript:SayHi();">Sayy hi<a>

Note: also don't enclose the script inside a <!-- and --> as this will get you an error.

Happy AJAXING!