I also got your jquery to work by putting the jquery inline in the file--so there is no reason that the jquery can't be put in an external file as well. I think you must have a path problem to your external js file.
I use apache for my server, and here is my directory structure:
apache2/
cgi-bin/
perl4.pl
htdocs/
page.html
js/
datepicker_installer.js
I can request perl4.pl with this url:
http://localhost:8080/cgi-bin/perl4.pl
My apache server is configured to listen on port 8080.
I can request pages in the htdocs directory like this:
http://localhost:8080/page.html
Note how I don't have to specify the htdocs directory in the url. At first glance, a relative path from the cgi-bin directory to the htdocs/js directory looks like it would be:
../htdocs/js/datepicker_installer.js
But, in fact my browser will fail to load the js file with that path:
Failed to load resource: the server responded with a status of 404
(Not Found) http://localhost:8080/htdocs/js/datepicker_installer.js
The correct relative path does not include the htdocs directory:
../js/datepicker_installer.js
With that path, I can put your js in the external file datepicker_installer.js, and here is what the perl cgi looks like:
#!/usr/bin/env perl
use strict;
use warnings;
use CGI qw(:all);
use CGI::Carp qw(fatalsToBrowser);
my $q = new CGI;
my $JSCRIPT = q-
$( function() {
$( "#datepick" ).datepicker({
minDate: 0, maxDate: "+1M +10D"
});
} )
-;
print(
$q->header,
$q->start_html(
-title=>'Baseline Automation Input',
-style=>[
{-src=>'https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'}
],
-script=>[
{-src=>'http://code.jquery.com/jquery-3.3.1.js',
-integrity=>'sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=',
-crossorigin=>'anonymous'
},
{-src=>'https://code.jquery.com/ui/1.12.1/jquery-ui.js',
-integrity=>'sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=',
-crossorigin=>'anonymous'
},
#{-code=>$JSCRIPT} #This works too!
{-src=>'../js/datepicker_installer.js'} #<===HERE
],
),
$q->div(
{-id=>"divtop"},
$q->p("Here's a paragraph")
),
$q->start_form(
-method=>'post'
),
$q->div(
"Reservation Date:",
$q->textfield(
-name=>'reservation', #<==Don't forget a comma here!
-size=>50,
-maxlength=>80,
-id=>'datepick'
)
),
$q->end_form(),
$q->end_html()
);
datepicker_installer.js:
$( function() {
$( "#datepick" ).datepicker({
minDate: 0, maxDate: "+1M +10D"
});
} );
And here is the output produced by that script:
/usr/local/apache2/cgi-bin$ perl perl4.pl
Content-Type: text/html; charset=ISO-8859-1
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>Baseline Automation Input</title>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
<script src="../js/datepicker_installer.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="divtop"><p>Here's a paragraph</p></div><form method="post" action="http://localhost" enctype="multipart/form-data"><div>Reservation Date: <input type="text" name="reservation" size="50" maxlength="80" id="datepick" /></div></form>
</body>
</html>
Note in the output that CGI.pm does not accept arbitrary attributes for the -script hashes. Therefore, you cannot follow best practices by including the integrity and crossorigin attributes.
