Thread Javascript und CGI wollen nicht miteinander (13 answers)
Opened by gmafx at 2011-05-06 15:51

gmafx
 2011-05-06 15:51
#148295 #148295
User since
2009-11-19
47 Artikel
BenutzerIn
[default_avatar]
Hallo,

ich möchte ein Tab-separiertes Dokument mittels eines Perlskripts einlesen und als Tabelle ausgeben. Das funktioniert soweit. Jetzt möchte ich aber auch, dass die Tabellenspalten sortierbar sind! Dafür habe ich mir aus einem online-Tutorial etwas Javascript geborgt, und in einem HTML-Dokument mit Tabelle getestet -> funktioniert.

Wenn ich jetzt eine dynamische Seite mittels CGI erstelle, funktioniert die Sortierfunktion nicht mehr (der Mauszeiger reagiert auch nicht entsprechend, wenn man ihn über die "headings" bewegt) - ich folgere, dass die notwendigen Informationen nicht beim Browser ankommen! Irgendwas in meinen CGI-Anweisungen wird wohl nicht stimmen, nur was?

Code: (dl )
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;


Irgendwas geht da durcheinander, in der originalen HTML-Datei, die eine sortierbare Tabelle erzeugte, sah der Header-Bereich so aus:


Code: (dl )
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>



Meine Adaption dessen in CGI habe ich versucht, nach der Perldoc-Referenz entsprechend anzupassen, wahrscheinlich nicht ganz richtig!?

Wie man dann noch die Daten, die ich eingelesen habe, mittels CGI in eine Tabelle schreibt, muss ich mir dann überlegen!

gma

View full thread Javascript und CGI wollen nicht miteinander