CODEWITHSUNDEEP
javascriptperlrefactoring
jkeuhlen
jkeuhlen

Reputation: 4517

Including separate javascript file in perl script

I have set of perl CGI webpages that I am attempting to do some refactoring on but have run into a wall.

Each of these scripts has some javascript and CSS currently written in the form:

my $JSCRIPT = << CODE;
function doStuff() {
  // Stuff
}
CODE;

my $CSS = <<BLOCK;
.css-stuff{}
BLOCK

The javascript and CSS is later loaded to the page using CGI

print $cgi->start_html( -script => [{-type => "javascript", -code => $JSCRIPT}],
                        -style => {-code => $CSS} );

Is there a good way to refactor this code so that instead of having copies of that $JSCRIPT in multiple files, I can have a single common.js or similar file? How do I include a file to accomplish this?

Upvotes: 0

Views: 1609

Answers (2)

ThisSuitIsBlackNot
ThisSuitIsBlackNot

Reputation: 24063

You can use the following HTML to load a script from a file:

<script src="/path/to/file.js"></script>

Note that /path/to/file.js is relative to the document root of your webserver, and is not an absolute path on your filesystem.

As you may have noticed, embedding HTML/CSS/JavaScript in your Perl scripts is not very maintainable. I would recommend keeping your CSS and JavaScript in separate, static files and using a template library like Template Toolkit to generate your HTML. Using templates helps you separate your presentation logic from your business logic, and saves you from having to use CGI.pm's arcane methods of generating complex HTML.

Here's an example using Template Toolkit to populate the path to your JavaScript file at runtime:

foo.cgi

use strict;
use warnings;

use CGI;
use Template;

my $tt = Template->new or die Template->error;

my $q = CGI->new;
print $q->header;

my $js_file = '/path/to/file.js';
$tt->process('foo.tt', { js_file => $js_file }) or die $tt->error;

foo.tt

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello, Template Toolkit!</title>

    <script src="[% js_file %]"></script>
  </head>
  <body>
    <h1>Hello, Template Toolkit!</h1>
  </body>
</html>

Output

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello, Template Toolkit!</title>

    <script src="/path/to/file.js"></script>
  </head>
  <body>
    <h1>Hello, Template Toolkit!</h1>
  </body>
</html>

Upvotes: 1

Ron Bergin
Ron Bergin

Reputation: 1068

Instead of -code use -src as shown in the CGI documentation.

print $q->start_html(-title=>'The Riddle of the Sphinx',
                     -script=>{-type=>'JAVASCRIPT',
                               -src=>'/javascript/sphinx.js'}
                     );

print $q->start_html(-title=>'The Riddle of the Sphinx',
                          -script=>[
                                    { -type => 'text/javascript',
                                      -src      => '/javascript/utilities10.js'
                                    },
                                    { -type => 'text/javascript',
                                      -src      => '/javascript/utilities11.js'
                                    },
                                    { -type => 'text/jscript',
                                      -src      => '/javascript/utilities12.js'
                                    },
                                    { -type => 'text/ecmascript',
                                      -src      => '/javascript/utilities219.js'
                                    }
                                 ]
                             );

Upvotes: 1

Related Questions