You are not logged in.

  • Login

Javascript in HTML Einbinden - Problem

EmpeRooR

Trainee

  • "EmpeRooR" started this thread

Posts: 12

  • Send private message

1

Wednesday, April 21st 2010, 12:46pm

Javascript in HTML Einbinden - Problem

Hallo @ all,

ich habe im head eines html scripts ein paar Javascripte eingebunden die jeweils für eine lightbox und ein dropdown zuständig sind.

HTML Code

 
1
2
3
4
5
6
7

<!-- lightbox -->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<!-- dropdown menu -->
<script type="text/javascript" src="js/dd/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/dd/jquery.dd.js"></script>


in diesem fall funktioniert das dropdown menu, die lightbox aber nicht.
wenn ich die scripte des dropdown menu's vor der lightbox einbinde, also

HTML Code

 
1
2
3
4
5
6
7

<!-- dropdown menu -->
<script type="text/javascript" src="js/dd/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/dd/jquery.dd.js"></script>
<!-- lightbox -->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>


funktioniert die lightbox, das dropdown jedoch nicht... außerdem habe ich festgestellt, das das problem in den beiden skripte prototype.js und jquery-1.3.2.min.js liegt.. ich denke ja, das in dem einen Skript variablen definiert werden, die in dem anderen skript auch verwendet werden, weil jquery-1.3.2.min.js auch solche variablennamen wie A, B, C verwendet die teilweise auch in prototype.js genutzt werden.. jetzt habe ich diese variablen schon umbenannt sodass man diesen fehler ausschließen könnte.. woran könnte das noch liegen das lightbox und dropdown nicht zusammen in einer html datei funktionieren?

achja.. hab diesen beitrag auch bei entwickler-forum.de gepostet..

Deadman44

Professional

Posts: 415

  • Send private message

2

Wednesday, April 21st 2010, 4:27pm

Normalerweise sollten sich die Variablen nicht in die Quere kommen, AFAIK unterstützt JS Namespaces, wodurch nur explizit als global deklarierte Variablen überall verfügbar sind. Doch werden globale Variablen mit großer Vorsicht verwendet, weswegen ich denke, dass weder jquery, scriptaculous noch prototype massiven Gebrauch davon machen.

Hast du dir mal Firebug im Firefox installiert? Dieser zeigt dir sehr übersichtlich die JS-Fehler und du kannst die Skripte der Seite debuggen lassen. Wäre zumindest mal einen Versuch wert. Ansonsten mal alle Fehlermldungen aus der JS-Konsole deines Browsers posten.


Quoted from "EmpeRooR"

<script type="text/javascript" src="js/scriptaculous.js load=effects,builder"></script>

Hier müsste noch ein "?" hinter scriptaculous.js.

Der komplette Quellcode (HTML) wäre auch einen Blick wert, vielleicht steckt auch dort der Fehler.

EmpeRooR

Trainee

  • "EmpeRooR" started this thread

Posts: 12

  • Send private message

3

Thursday, April 22nd 2010, 6:47pm

Quoted from "Deadman44"

Normalerweise sollten sich die Variablen nicht in die Quere kommen, AFAIK unterstützt JS Namespaces, wodurch nur explizit als global deklarierte Variablen überall verfügbar sind. Doch werden globale Variablen mit großer Vorsicht verwendet, weswegen ich denke, dass weder jquery, scriptaculous noch prototype massiven Gebrauch davon machen.

Naja als ich den prototype ma inne klasse gepackt hatte ging das dropdown wieder.. allerdings hatte ich die lightbox nich mehr hinbekommen ..

Hast du dir mal Firebug im Firefox installiert? Dieser zeigt dir sehr übersichtlich die JS-Fehler und du kannst die Skripte der Seite debuggen lassen. Wäre zumindest mal einen Versuch wert.

ja aber irgendwie seh ich im fir3bug nicht viel bzw nix .. der im ie intergrierte js dubugger sagt mir das im
prototype.js zeile 3917
element.attachEvent(
"on" + name, wrapper); .. Das Objekt unterstützt die eigenschaft oder methode nicht.
und in
jquery-1.3.2.min

this[ghjz].style.display="none .. ghjz ist null oder kein object..




"Hier müsste noch ein "?" hinter scriptaculous.js."

Ja das wurde anscheinend beim copy 'n paste gekillt...

"Der komplette Quellcode (HTML) wäre auch einen Blick wert, vielleicht steckt auch dort der Fehler."

hmm naja ich denke das der html code nicht weiter interessant ist da der fehler ja in den js skripten liegt aber hier ist er..

Source code

 
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> 
<head> 
<meta name="author" content="DS"> 
<title>.... Möbeldesign - Onlineshop</title> 
<link rel="stylesheet" type="text/css" href="../Styles/dd.css" /> 
<link rel="stylesheet" type="text/css" href="../Styles/style.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="../Styles/lightbox.css" /> 
<script type="text/javascript" src="js/prototype.js"></script> 
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> 
<script type="text/javascript" src="js/lightbox.js"></script> 
<script type="text/javascript" src="js/dd/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="js/dd/jquery.dd.js"></script> 
<script language=JavaScript> 
<!--function isValid(){ 
var msg = "";if(!isValidEmail()){msg += "- Die E-Mail-Adresse ist ungültig.\n"; 
} 
if(document.getElementById("vorName").value == "") {msg += "- Leeres Feld: Vorname\n"; 
}if(document.getElementById("nachName").value == "") {msg += "- Leeres Feld: Nachname\n"; 
} 
if(document.getElementById("str").value == "") {msg += "- Leeres Feld: Strasse\n"; 
}if(document.getElementById("num").value == "") {msg += "- Leeres Feld: Hausnummer\n"; 
} 
if(document.getElementById("plz").value == "") {msg += "- Leeres Feld: PLZ\n"; 
}if(document.getElementById("loc").value == "") {msg += "- Leeres Feld: Ort\n"; 
} 
if(msg == ""){return true; 
} 
alert(msg);return false; 
} 
function isValidEmail(){ 
var strInput = document.getElementById("eMails").value;var pattern = /^([a-zA-Z0-9-_.])+@([a-zA-Z0-9-_.])+.(([a-zA-Z0-9]){2,4})/g; 
if(strInput.match(pattern)){return true; 
}else{return false; 
} 
} 
function getSelVal(strID){ 
var idx = document.getElementById(strID).selectedIndex;return document.getElementById(strID).options[idx].text; 
} 
function getIptVal(strID){return document.getElementById(strID).value; 
} 
--></script> 
</head><body style="margin:0px; padding:0px;"> 
<div id="wrap"> 
<div class="main"> 
<div id="navi"><a href="shop.php"><img src="../Grafiken/balken-de/shop.jpg" width="22" height="105" alt="Online-Shop" style="margin-left:264px;"></a></div> 
<? include ("../Includes/de/navi2.php"); ?> 
<div class="content"> 
<img src="../Grafiken/content-de/shop.jpg" width="880" alt="Kontakt"> 
</div> 
<div class="content" style="padding-left:50px;"> 
<table border="0"> 
<tr> 
<td> 
<a href="../Grafiken/farbe-pastell.jpg" onclick="return false;" rel="lightbox[Shop]" title="Galerie"><img src="../Grafiken/farbe-pastell.jpg" alt="Memoria" style="margin-left:5px;"></a> 
</td> 
<td> 
<p>Modell ..., Serie Coelo</p><p>B1200 x H1200 x T44</p><p>5 Schubladen, 2 Türen</p><p>4400,00 EUR</p> 
</td> 
</tr></table> 
<form name="kontaktFormular" method="post" action="shop-bestaetigung.php" onSubmit="return isValid();"> 
<table border="0"> 
<tr align="left" valign="middle"> 
<td><p> Farbe: </p></td> 
<td align="left" valign="middle"> 
<select name="farbe" id="farbe" style="width:200px;"> 
<option name="farbe" value="weiß - pastellviolett" selected="selected" title="../Grafiken/farben/memoria_pastellviolett.jpg">Wei&szlig; - Pastellviolett</option> 
<option name="farbe" value="weiß - grau" title="../Grafiken/farben/memoria_grau.jpg">Wei&szlig; - Grau</option> 
<option name="farbe" value="weiß - hellgrün" title="../Grafiken/farben/memoria_hellgrün.jpg">Wei&szlig; - Hellgrün</option> 
<option name="farbe" value="weiß - rot" title="../Grafiken/farben/memoria_rot.jpg">Wei&szlig; - Rot</option> 
</select> 
</td> 
</tr> 
<tr align="left" valign="middle"> 
<td> 
<p> Ausstattung <br />Innenfächer: </p> 
</td> 
<td align="left" valign="middle"> 
<label> 
<select name="unterteilung" id="unterteilung" style="width:200px;"> 
<option name="unterteilung" value="ohne F&auml;cherunterteilung">ohne F&auml;cherunterteilung</option> 
<option name="unterteilung" value="mit F&auml;cherunterteilung">mit F&auml;cherunterteilung</option> 
</select> 
</label> 
</td> 
</tr> 
<tr> 
<td><p> Anzahl: </p></td> 
<td> 
<p> 
<select name="Anzahl" id="Anzahl" style="width:40px;"> 
<option name="Anzahl">1</option> 
<option name="Anzahl">2</option> 
<option name="Anzahl">3</option> 
<option name="Anzahl">4</option> 
<option name="Anzahl">5</option> 
</select> 
&nbsp H&ouml;here Mengen auf <a href="kontakt.php">Anfrage</a>.</p></td> 
</tr> 
<tr> 
<td> 
<p>&nbsp;</p> 
<p>Pers&ouml;nliche Daten</p> 
</td> 
</tr> 
<tr> 
<td><p> Firma: </p></td> 
<td><input id="Firma" name="Firma" type="text"/></td> 
</tr> 
<tr> 
<td><p>Anrede:</p></td> 
<td width="600"> 
<select id="anrede" name="anrede" style="width:60px;"> 
<option>Frau</option> 
<option>Herr</option> 
</select></td> 
</tr> 
<tr> 
<td><p> Vorname: </p></td> 
<td><input id="vorName" name="vorName" type="text"/></td> 
</tr> 
<tr> 
<td><p> Nachname: </p></td> 
<td><input id="nachName" name="nachName" type="text"/></td> 
</tr> 
<tr> 
<td><p> Geburtsdatum: </p></td> 
<td> 
<select id="dGebDat" name="dGebDat" style="width:50px;"> 
<option name="dGebDat">01</option><option name="dGebDat">02</option><option name="dGebDat">03</option><option name="dGebDat">04</option><option name="dGebDat">05</option><option name="dGebDat">06</option><option name="dGebDat">7</option> 
<option name="dGebDat">08</option><option name="dGebDat">09</option><option name="dGebDat">10</option><option name="dGebDat">11</option><option name="dGebDat">12</option><option name="dGebDat">13</option><option name="dGebDat">14</option> 
<option name="dGebDat">15</option><option name="dGebDat">16</option><option name="dGebDat">17</option><option name="dGebDat">18</option><option name="dGebDat">19</option><option name="dGebDat">20</option><option name="dGebDat">21</option> 
<option name="dGebDat">22</option><option name="dGebDat">23</option><option name="dGebDat">24</option><option name="dGebDat">25</option><option name="dGebDat">26</option><option name="dGebDat">27</option><option name="dGebDat">28</option> 
<option name="dGebDat">29</option><option name="dGebDat">30</option><option name="dGebDat">31</option> 
</select> 
<select id="mGebDat" name="mGebDat" style="width:60px;"> 
<option name="mGebDat">Jan</option> 
<option name="mGebDat">Feb</option> 
<option name="mGebDat">Mar</option> 
<option name="mGebDat">Apr</option> 
<option name="mGebDat">Mai</option> 
<option name="mGebDat">Jun</option> 
<option name="mGebDat">Jul</option> 
<option name="mGebDat">Aug</option> 
<option name="mGebDat">Sep</option> 
<option name="mGebDat">Okt</option> 
<option name="mGebDat">Nov</option> 
<option name="mGebDat">Dez</option> 
</select> 
<select id="yGebDat" name="yGebDat" style="width:65px;"> 
<option name="yGebDat">1992</option><option name="yGebDat">1991</option><option name="yGebDat">1990</option><option name="yGebDat">1989</option><option name="yGebDat">1988</option><option name="yGebDat">1987</option><option name="yGebDat">1986</option> 
<option name="yGebDat">1985</option><option name="yGebDat">1984</option><option name="yGebDat">1983</option><option name="yGebDat">1982</option><option name="yGebDat">1981</option><option name="yGebDat">1980</option><option name="yGebDat">1979</option> 
<option name="yGebDat">1978</option><option name="yGebDat">1977</option><option name="yGebDat">1976</option><option name="yGebDat">1975</option><option name="yGebDat">1974</option><option name="yGebDat">1973</option><option name="yGebDat">1972</option> 
<option name="yGebDat">1971</option><option name="yGebDat">1970</option><option name="yGebDat">1969</option><option name="yGebDat">1968</option><option name="yGebDat">1967</option><option name="yGebDat">1966</option><option name="yGebDat">1965</option> 
<option name="yGebDat">1964</option><option name="yGebDat">1963</option><option name="yGebDat">1962</option><option name="yGebDat">1961</option><option name="yGebDat">1960</option><option name="yGebDat">1959</option><option name="yGebDat">1958</option> 
<option name="yGebDat">1957</option><option name="yGebDat">1956</option><option name="yGebDat">1955</option><option name="yGebDat">1954</option><option name="yGebDat">1953</option><option name="yGebDat">1952</option><option name="yGebDat">1951</option> 
<option name="yGebDat">1950</option><option name="yGebDat">1949</option><option name="yGebDat">1948</option><option name="yGebDat">1947</option><option name="yGebDat">1946</option><option name="yGebDat">1945</option><option name="yGebDat">1944</option> 
<option name="yGebDat">1943</option><option name="yGebDat">1942</option><option name="yGebDat">1941</option><option name="yGebDat">1940</option><option name="yGebDat">1939</option><option name="yGebDat">1938</option><option name="yGebDat">1937</option> 
<option name="yGebDat">1936</option><option name="yGebDat">1935</option><option name="yGebDat">1934</option><option name="yGebDat">1933</option><option name="yGebDat">1932</option><option name="yGebDat">1931</option><option name="yGebDat">1930</option> 
<option name="yGebDat">1929</option><option name="yGebDat">1928</option><option name="yGebDat">1927</option><option name="yGebDat">1926</option><option name="yGebDat">1925</option><option name="yGebDat">1924</option><option name="yGebDat">1923</option> 
<option name="yGebDat">1922</option><option name="yGebDat">1921</option><option name="yGebDat">1920</option><option name="yGebDat">1919</option><option name="yGebDat">1918</option><option name="yGebDat">1917</option><option name="yGebDat">1916</option> 
<option name="yGebDat">1915</option><option name="yGebDat">1914</option><option name="yGebDat">1913</option><option name="yGebDat">1912</option><option name="yGebDat">1911</option><option name="yGebDat">1910</option> 
</select> 
</td> 
</tr> 
<tr> 
<td><p> E-Mail: </p></td> 
<td><input name="eMail" type="text" id="eMails"/></td> 
</tr> 
<tr> 
<td> 
<p>&nbsp;</p> 
<p>Anschrift</p></td> 
</tr> 
<tr> 
<td><p> Stra&szlig;e / Nr: </p></td> 
<td><input id="str" name="Strasse" type="text" /> <input id="num" name="Nummer" type="text" /></td> 
</tr> 
<tr> 
<td><p> PLZ / Ort: </p></td> 
<td><input id="plz" name="PLZ" type="text" /> <input id="loc" name="Ort" type="text" /></td> 
</tr> 
<tr> 
<td><p>Land:</p></td> 
<td> 
<table> 
<tr> 
<td> 
<select id="land" name="Land" style="width:135px;"> 
<option name="Land">Belgien</option> 
<option name="Land">Bulgarien</option> 
<option name="Land">Dänemark</option> 
<option name="Land" selected="selected">Deutschland</option> 
<option name="Land">Finnland</option> 
<option name="Land">Frankreich</option> 
<option name="Land">Großbritannien</option> 
<option name="Land">Irland</option> 
<option name="Land">Italien</option> 
<option name="Land">Liechtenstein</option> 
<option name="Land">Luxemburg</option> 
<option name="Land">Niederlande</option> 
<option name="Land">Norwegen</option> 
<option name="Land">Österreich</option> 
<option name="Land">Polen</option> 
<option name="Land">Portugal</option> 
<option name="Land">Rumänien</option> 
<option name="Land">Schweden</option> 
<option name="Land">Schweiz</option> 
<option name="Land">Slowakei</option> 
<option name="Land">Slowenien</option> 
<option name="Land">Tschechien</option> 
<option name="Land">Ungarn</option> 
</select> 
</td> 
<td> 
<p>&nbsp;Andere Länder auf <a href="kontakt.php">Anfrage</a>.</p> 
</td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td colspan="3" align="right"> 
<div align="right"> 
<input name="senden" type="submit" value="Weiter" /> 
</div> 
</td> 
</tr> 
</table> 
<script language="javascript" type="text/javascript"> 
$('#farbe, #unterteilung, #Anzahl, #anrede, #dGebDat, #mGebDat, #yGebDat, #land').msDropDown(); 
$(this).hide();$(document).ready(function(arg){ 
//$("body select").msDropDown(); 
}) 
</script> 
</form> 
<p>&nbsp;</p> 
</div> 
</div> 
</body></html>





und danke für die schnelle antwort und hilfe^^

hmm das zitieren hat wohl nicht richtig geklappt^^

This post has been edited 2 times, last edit by "EmpeRooR" (Apr 22nd 2010, 6:56pm)

bcc-fan

Professional

Posts: 384

  • Send private message

4

Sunday, April 25th 2010, 11:35am

Funktioniert dein Script jetzt?

Hier noch eine Seite zum Prüfen von HTML-Zeugs:
http://validator.w3.org/

Ist von dem Typen, die den Sprachstandart beeinflussen.
Wenn es hakt, werden Fehler und Warnungen angezeigt - trotz Fehlermeldung laufen einige Scripts auf den ersten Blick.
Aber, wenn es nicht läuft können die Hinweise eine Hilfe sein.

MfG bcc-fan

Similar threads

Tagging

Social bookmarks