1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
#!/usr/bin/perl -wT
use CGI qw(:standard);
use CGI::Carp qw(warningsToBrowser fatalsToBrowser);
print header;
print start_html(
-title => 'generate dynamic sortable tables',
-style => 'js/sample.css', ## das Stylesheet wird verarbeitet!
-script => {
-language => 'javascript',
-src => 'js/TSorter_1.js', ## das Skript zum sortieren der Spalten
}
);
### init sortable tables
$JSCRIPT=<<END;
function init()
{
var TableSorter1 = new TSorter;
var TableSorter2 = new TSorter;
TableSorter1.init('housing_table_1');
TableSorter2.init('housing_table_2');
}
window.onload = init;
END
### einlesen der Daten
$input="/Library/WebServer/Documents/test/test.tab";
open(INP,$input);
$i=0;
while (<INP>)
{
@line = split(/\t/,$_);
if ($i==0)
{
@headings=@line;
@rows = th(\@headings);$i++;
}
else
{
push (@rows,td([@line]));
$i++;
}
}
### ausgeben der Tabelle aus gelesenen Daten
print table( {-border=>undef},
caption(b('your data!')),
Tr(\@rows)
);
## hier noch die Tabelle aus meinem ersten Gehversuch mit sortierbaren Spalten, im original HTML-Dokument hat das funktioniert!
print <<HTML;
<table id="housing_table_1" class="sortable">
<thead>
<tr>
<th abbr="link">ID</th>
<th abbr="input_text">NAME</th>
<th abbr="image_number">PRICE</th>
<th>LATITUDE</th>
<th>LONGITUDE</th>
<th abbr="link">ADDRESS</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href='http://peanut.uwaterloo.ca/ochousing2/dresults.asp?rid=12941'>12941</a></td>
<td class='in_cell'><input type='text' value='Mike' /></td>
<td><img src='../images/sorting/nav_step_2.png' />375</td>
<td>43.446885</td>
<td>-80.476264</td>
<td><a href='http://peanut.uwaterloo.ca/ochousing2/dresults.asp?rid=12941'>205 Weber St. East, Kitchener, ON</a></td>
</tr>
<tr>
<td><a href='http://peanut.uwaterloo.ca/ochousing2/dresults.asp?rid=12946'>12946</a></td>
<td class='in_cell'><input type='text' value='Teresa' /></td>
<td><img src='../images/sorting/nav_step_3.png' />400</td>
<td>43.424225</td>
<td>-80.539549</td>
<td><a href='http://peanut.uwaterloo.ca/ochousing2/dresults.asp?rid=12946'>53 High Acres Cr., Kitchener, ON</a></td>
</tr>
</tbody>
</table>
HTML
exit;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Grid3 Example</title>
<link rel="stylesheet" type="text/css" href="js/sample.css" />
<script src="js/TSorter_1.js" type="text/javascript"></script>
<script type="text/javascript">
function init()
{
var TableSorter1 = new TSorter;
var TableSorter2 = new TSorter;
TableSorter1.init('housing_table_1');
TableSorter2.init('housing_table_2');
}
window.onload = init;
</script>
</head>
2011-05-06T14:03:30 GwenDragon-language => 'javascript', -type => 'text/javascript',
2011-05-06T14:49:09 GwenDragonKann wegfallen oder auch nicht. Kommt darauf an, zu welchen Uraltbrowsern er kompatibel sein will. ;)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#!/usr/bin/perl -wT
use CGI qw(:standard);
use CGI::Carp qw(warningsToBrowser fatalsToBrowser);
$JSCRIPT=<<END;
function init()
{
var TableSorter1 = new TSorter;
var TableSorter2 = new TSorter;
TableSorter1.init('housing_table_1');
TableSorter2.init('housing_table_2');
}
window.onload = init;
END
print header;
print start_html(
-title => 'sortable table?',
-style => '/js/sample.css',
-script => {
-language => 'javascript',
-type => 'text/javascript',
-src => '/js/TSorter_1.js',
},
-script=>"$JSCRIPT"
);
perldoc CGI...
The <script> tag, has several attributes including "type", "charset" and "src". "src" allows you to keep JavaScript code in an external file. To use these attributes pass a HASH reference in the -script parameter containing one or more of -type, -src, or -code:
Code: (dl )1
2
3
4
5
6
7
8
9print $q->start_html(-title=>'The Riddle of the Sphinx',
-script=>{-type=>'JAVASCRIPT',
-src=>'/javascript/sphinx.js'}
);
print $q->(-title=>'The Riddle of the Sphinx',
-script=>{-type=>'PERLSCRIPT',
-code=>'print "hello world!\n;"'}
);
A final feature allows you to incorporate multiple <script> sections into the header. Just pass the list of script sections as an array reference. this allows you to specify different source files for different dialects of JavaScript. Example:
Code: (dl )1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16print $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'
}
]
);
The option "-language" is a synonym for -type, and is supported for backwards compatibility.
The old-style positional parameters are as follows:
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
perl -MCGI -wle '$q = CGI->new; print $q->start_html( -script => [ { -language => "javascript", type => "text/javascript", -src => "js/js.js" }, { -code => "bliblablubb" } ] )'
<!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>Untitled Document</title>
<script src="js/js.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
bliblablubb
//]]></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
1
2
3
4
5
6
7
8
9
10
11
12
13
print start_html(
-title => 'My CGI.pm Web Page',
-style => '/js/sample.css',
-script => [
{
-type => 'text/javascript',
-src => '/js/TSorter_1.js',
},
{
-type => 'text/javascript',
-src => '/js/TSorter_1ext.js', ### habe hier den im Original im CGI-Skript enthaltenenJS-Code abgelegt
}
]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
my $js_code = 'alert("bin da");'; my $cgi = CGI->new; print $cgi->start_html( -title => 'test', -style => '/css/sample.css', -script => [ { -type => 'text/javascript', -src => '/js/sorter.js', }, { -type => 'text/javascript', -code => $js_code, }, ], );