views:

528

answers:

1

It seems I've installed Scriptaculous incorrectly, but I can't figure out what's wrong. Here's a sample to show the problem:

<html>
<body>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>

<p id="hello">Hello, World!</p>
<a href="javascript:void(0)" onclick="Effect.Shrink('hello');">Shrink effect</a>
<a href="javascript:void(0)" onclick="$('hello').shrink();">Shrink method</a>

</body>
</html>

When I click on the "Shrink effect" link, I get a Javascript error, "Effect is not defined." When I click on the "Shrink method" link, I get a different error, "$("hello").shrink is not a function."

The problem goes away if I explicitly link to the effects script:

<html>
<body>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script> <!-- Added -->

<p id="hello">Hello, World!</p>
<a href="javascript:void(0)" onclick="Effect.Shrink('hello');">Shrink effect</a>
<a href="javascript:void(0)" onclick="$('hello').shrink();">Shrink method</a>

</body>
</html>

This workaround is acceptable, but can't Scriptaculous load all its helper scripts automatically? It seems like the installation instructions say that it should.

My html file and the js folder are not in the web server's root folder, they're both under an application folder. I see the same behaviour in Firefox 3.5.7 and Internet Explorer 8.0.

+2  A: 

You need to put the <script> definitions in the <head> of your HTML document like this:

<html>

<head>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
</head>

<body>

<p id="hello">Hello, World!</p>
<a href="javascript:void(0)" onclick="Effect.Shrink('hello');">Shrink effect</a>
<a href="javascript:void(0)" onclick="$('hello').shrink();">Shrink method</a>

</body>
</html>

That should do the trick.

Shane Bell
Now that I read the instructions again, I see "This is done by linking to the scripts *in the head* of your document."
Don Kirkby