October 12, 2007 2

#include for JavaScript Source Files Using Prototype

By Levi Senft in Web

I’ve seen many posts over the years asking if there is a javascript equivalent to the cc++ #include command, or Java’s import command for including source files. Today I decided to whip one up using Prototype. Check out the demo here.

Here is my HTML page. The code for the include statement is embedded at the top of the page. The code using the statement is in a block at the bottom of the page.

    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3 <html xmlns="http://www.w3.org/1999/xhtml">
    4     <head>
    5         <title>
    6             #include statement for prototype/scriptaculous
    7         </title>
    8         <script type="text/javascript" src="prototype.js"></script>
    9         <script type="text/javascript">
   10 //<![CDATA[
   11
   12         function include (jsFile) {
   13             new Ajax.Request(jsFile, {
   14                 method: 'get',
   15                 asynchronous  : false,
   16                 onSuccess: function(transport) {
   17                     // Evaluate the javascript
   18                     eval(transport.responseText);
   19                 },
   20
   21                 onFailure : function() {
   22                     alert("Failure including file: " + jsFile);
   23                 }
   24
   25             });
   26
   27         }
   28
   29         //]]>
   30         </script>
   31     </head>
   32     <body>
   33         <h1>
   34             #include statement for javascript
   35         </h1>
   36         <h2>
   37             The Prototype #include statement:
   38         </h2>
   39         <pre>
   40             function include (jsFile) {
   41                 new Ajax.Request(jsFile, {
   42                     method: 'get',
   43                     asynchronous  : false,
   44                     onSuccess: function(transport) {
   45                         // Evaluate the javascript
   46                         eval(transport.responseText);
   47                     },
   48
   49                     onFailure : function() {
   50                         alert("Failure including file: " + jsFile);
   51                     }
   52
   53                 });
   54
   55             }
   56 </pre>
   57         <h2>
   58             The javascript file I'm including:
   59         </h2>
   60         <p>
   61             hello.js
   62         </p>
   63         <pre>
   64
   65             sayhello = function () {
   66                 alert("I'm saying hello!");
   67             }
   68
   69 </pre>
   70         <h2>
   71             Using the include statement:
   72         </h2>
   73         <pre>
   74
   75 include('hello.js');
   76
   77 sayhello();
   78
   79 </pre>
   80 <script type="text/javascript">
   81 //<![CDATA[
   82
   83         include('hello.js');
   84
   85         sayhello();
   86
   87         //]]>
   88         </script>
   89     </body>
   90 </html>
   91

The var command takes the function out of the global scope for some reason. Here is a demo with the non-working code.

2 Responses to “#include for JavaScript Source Files Using Prototype”

  1. Seant23 says:
    June 30, 2008 at 9:11 am

    For windows IE you need to add the evalScript() instead of eval()….

    Check it out
    http://www.exit12.org/archives/12

  2. Alberta says:
    February 10, 2009 at 4:21 am

    It’s so amazing for us! Thanks!

Leave a Reply