Javascript in HTML Einbinden - Problem

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • 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.

    Quellcode

    1. <!-- lightbox -->
    2. <script type="text/javascript" src="js/prototype.js"></script>
    3. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    4. <script type="text/javascript" src="js/lightbox.js"></script>
    5. <!-- dropdown menu -->
    6. <script type="text/javascript" src="js/dd/jquery-1.3.2.min.js"></script>
    7. <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

    Quellcode

    1. <!-- dropdown menu -->
    2. <script type="text/javascript" src="js/dd/jquery-1.3.2.min.js"></script>
    3. <script type="text/javascript" src="js/dd/jquery.dd.js"></script>
    4. <!-- lightbox -->
    5. <script type="text/javascript" src="js/prototype.js"></script>
    6. <script type="text/javascript" src="js/scriptaculous.js load=effects,builder"></script>
    7. <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..
  • 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.


    EmpeRooR schrieb:

    <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.
    Open Source --> Programmieren aus Leidenschaft :!:

    Ich stehe weder für privaten Support per PM noch über einen IM zur Verfügung. Danke.
  • Deadman44 schrieb:

    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..

    HTML-Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
    2. <head>
    3. <meta name="author" content="DS">
    4. <title>.... Möbeldesign - Onlineshop</title>
    5. <link rel="stylesheet" type="text/css" href="../Styles/dd.css" />
    6. <link rel="stylesheet" type="text/css" href="../Styles/style.css" />
    7. <link rel="stylesheet" type="text/css" media="screen" href="../Styles/lightbox.css" />
    8. <script type="text/javascript" src="js/prototype.js"></script>
    9. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    10. <script type="text/javascript" src="js/lightbox.js"></script>
    11. <script type="text/javascript" src="js/dd/jquery-1.3.2.min.js"></script>
    12. <script type="text/javascript" src="js/dd/jquery.dd.js"></script>
    13. <script language=JavaScript>
    14. <!--function isValid(){
    15. var msg = "";if(!isValidEmail()){msg += "- Die E-Mail-Adresse ist ungültig.\n";
    16. }
    17. if(document.getElementById("vorName").value == "") {msg += "- Leeres Feld: Vorname\n";
    18. }if(document.getElementById("nachName").value == "") {msg += "- Leeres Feld: Nachname\n";
    19. }
    20. if(document.getElementById("str").value == "") {msg += "- Leeres Feld: Strasse\n";
    21. }if(document.getElementById("num").value == "") {msg += "- Leeres Feld: Hausnummer\n";
    22. }
    23. if(document.getElementById("plz").value == "") {msg += "- Leeres Feld: PLZ\n";
    24. }if(document.getElementById("loc").value == "") {msg += "- Leeres Feld: Ort\n";
    25. }
    26. if(msg == ""){return true;
    27. }
    28. alert(msg);return false;
    29. }
    30. function isValidEmail(){
    31. var strInput = document.getElementById("eMails").value;var pattern = /^([a-zA-Z0-9-_.])+@([a-zA-Z0-9-_.])+.(([a-zA-Z0-9]){2,4})/g;
    32. if(strInput.match(pattern)){return true;
    33. }else{return false;
    34. }
    35. }
    36. function getSelVal(strID){
    37. var idx = document.getElementById(strID).selectedIndex;return document.getElementById(strID).options[idx].text;
    38. }
    39. function getIptVal(strID){return document.getElementById(strID).value;
    40. }
    41. --></script>
    42. </head><body style="margin:0px; padding:0px;">
    43. <div id="wrap">
    44. <div class="main">
    45. <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>
    46. <? include ("../Includes/de/navi2.php"); ?>
    47. <div class="content">
    48. <img src="../Grafiken/content-de/shop.jpg" width="880" alt="Kontakt">
    49. </div>
    50. <div class="content" style="padding-left:50px;">
    51. <table border="0">
    52. <tr>
    53. <td>
    54. <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>
    55. </td>
    56. <td>
    57. <p>Modell ..., Serie Coelo</p><p>B1200 x H1200 x T44</p><p>5 Schubladen, 2 Türen</p><p>4400,00 EUR</p>
    58. </td>
    59. </tr></table>
    60. <form name="kontaktFormular" method="post" action="shop-bestaetigung.php" onSubmit="return isValid();">
    61. <table border="0">
    62. <tr align="left" valign="middle">
    63. <td><p> Farbe: </p></td>
    64. <td align="left" valign="middle">
    65. <select name="farbe" id="farbe" style="width:200px;">
    66. <option name="farbe" value="weiß - pastellviolett" selected="selected" title="../Grafiken/farben/memoria_pastellviolett.jpg">Wei&szlig; - Pastellviolett</option>
    67. <option name="farbe" value="weiß - grau" title="../Grafiken/farben/memoria_grau.jpg">Wei&szlig; - Grau</option>
    68. <option name="farbe" value="weiß - hellgrün" title="../Grafiken/farben/memoria_hellgrün.jpg">Wei&szlig; - Hellgrün</option>
    69. <option name="farbe" value="weiß - rot" title="../Grafiken/farben/memoria_rot.jpg">Wei&szlig; - Rot</option>
    70. </select>
    71. </td>
    72. </tr>
    73. <tr align="left" valign="middle">
    74. <td>
    75. <p> Ausstattung <br />Innenfächer: </p>
    76. </td>
    77. <td align="left" valign="middle">
    78. <label>
    79. <select name="unterteilung" id="unterteilung" style="width:200px;">
    80. <option name="unterteilung" value="ohne F&auml;cherunterteilung">ohne F&auml;cherunterteilung</option>
    81. <option name="unterteilung" value="mit F&auml;cherunterteilung">mit F&auml;cherunterteilung</option>
    82. </select>
    83. </label>
    84. </td>
    85. </tr>
    86. <tr>
    87. <td><p> Anzahl: </p></td>
    88. <td>
    89. <p>
    90. <select name="Anzahl" id="Anzahl" style="width:40px;">
    91. <option name="Anzahl">1</option>
    92. <option name="Anzahl">2</option>
    93. <option name="Anzahl">3</option>
    94. <option name="Anzahl">4</option>
    95. <option name="Anzahl">5</option>
    96. </select>
    97. &nbsp H&ouml;here Mengen auf <a href="kontakt.php">Anfrage</a>.</p></td>
    98. </tr>
    99. <tr>
    100. <td>
    101. <p>&nbsp;</p>
    102. <p>Pers&ouml;nliche Daten</p>
    103. </td>
    104. </tr>
    105. <tr>
    106. <td><p> Firma: </p></td>
    107. <td><input id="Firma" name="Firma" type="text"/></td>
    108. </tr>
    109. <tr>
    110. <td><p>Anrede:</p></td>
    111. <td width="600">
    112. <select id="anrede" name="anrede" style="width:60px;">
    113. <option>Frau</option>
    114. <option>Herr</option>
    115. </select></td>
    116. </tr>
    117. <tr>
    118. <td><p> Vorname: </p></td>
    119. <td><input id="vorName" name="vorName" type="text"/></td>
    120. </tr>
    121. <tr>
    122. <td><p> Nachname: </p></td>
    123. <td><input id="nachName" name="nachName" type="text"/></td>
    124. </tr>
    125. <tr>
    126. <td><p> Geburtsdatum: </p></td>
    127. <td>
    128. <select id="dGebDat" name="dGebDat" style="width:50px;">
    129. <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>
    130. <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>
    131. <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>
    132. <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>
    133. <option name="dGebDat">29</option><option name="dGebDat">30</option><option name="dGebDat">31</option>
    134. </select>
    135. <select id="mGebDat" name="mGebDat" style="width:60px;">
    136. <option name="mGebDat">Jan</option>
    137. <option name="mGebDat">Feb</option>
    138. <option name="mGebDat">Mar</option>
    139. <option name="mGebDat">Apr</option>
    140. <option name="mGebDat">Mai</option>
    141. <option name="mGebDat">Jun</option>
    142. <option name="mGebDat">Jul</option>
    143. <option name="mGebDat">Aug</option>
    144. <option name="mGebDat">Sep</option>
    145. <option name="mGebDat">Okt</option>
    146. <option name="mGebDat">Nov</option>
    147. <option name="mGebDat">Dez</option>
    148. </select>
    149. <select id="yGebDat" name="yGebDat" style="width:65px;">
    150. <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>
    151. <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>
    152. <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>
    153. <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>
    154. <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>
    155. <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>
    156. <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>
    157. <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>
    158. <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>
    159. <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>
    160. <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>
    161. <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>
    162. </select>
    163. </td>
    164. </tr>
    165. <tr>
    166. <td><p> E-Mail: </p></td>
    167. <td><input name="eMail" type="text" id="eMails"/></td>
    168. </tr>
    169. <tr>
    170. <td>
    171. <p>&nbsp;</p>
    172. <p>Anschrift</p></td>
    173. </tr>
    174. <tr>
    175. <td><p> Stra&szlig;e / Nr: </p></td>
    176. <td><input id="str" name="Strasse" type="text" /> <input id="num" name="Nummer" type="text" /></td>
    177. </tr>
    178. <tr>
    179. <td><p> PLZ / Ort: </p></td>
    180. <td><input id="plz" name="PLZ" type="text" /> <input id="loc" name="Ort" type="text" /></td>
    181. </tr>
    182. <tr>
    183. <td><p>Land:</p></td>
    184. <td>
    185. <table>
    186. <tr>
    187. <td>
    188. <select id="land" name="Land" style="width:135px;">
    189. <option name="Land">Belgien</option>
    190. <option name="Land">Bulgarien</option>
    191. <option name="Land">Dänemark</option>
    192. <option name="Land" selected="selected">Deutschland</option>
    193. <option name="Land">Finnland</option>
    194. <option name="Land">Frankreich</option>
    195. <option name="Land">Großbritannien</option>
    196. <option name="Land">Irland</option>
    197. <option name="Land">Italien</option>
    198. <option name="Land">Liechtenstein</option>
    199. <option name="Land">Luxemburg</option>
    200. <option name="Land">Niederlande</option>
    201. <option name="Land">Norwegen</option>
    202. <option name="Land">Österreich</option>
    203. <option name="Land">Polen</option>
    204. <option name="Land">Portugal</option>
    205. <option name="Land">Rumänien</option>
    206. <option name="Land">Schweden</option>
    207. <option name="Land">Schweiz</option>
    208. <option name="Land">Slowakei</option>
    209. <option name="Land">Slowenien</option>
    210. <option name="Land">Tschechien</option>
    211. <option name="Land">Ungarn</option>
    212. </select>
    213. </td>
    214. <td>
    215. <p>&nbsp;Andere Länder auf <a href="kontakt.php">Anfrage</a>.</p>
    216. </td>
    217. </tr>
    218. </table>
    219. </td>
    220. </tr>
    221. <tr>
    222. <td colspan="3" align="right">
    223. <div align="right">
    224. <input name="senden" type="submit" value="Weiter" />
    225. </div>
    226. </td>
    227. </tr>
    228. </table>
    229. <script language="javascript" type="text/javascript">
    230. $('#farbe, #unterteilung, #Anzahl, #anrede, #dGebDat, #mGebDat, #yGebDat, #land').msDropDown();
    231. $(this).hide();$(document).ready(function(arg){
    232. //$("body select").msDropDown();
    233. })
    234. </script>
    235. </form>
    236. <p>&nbsp;</p>
    237. </div>
    238. </div>
    239. </body></html>
    Alles anzeigen





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

    hmm das zitieren hat wohl nicht richtig geklappt^^

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von EmpeRooR ()