Lade-Reihenfolge der Javascripts

sappy · 24. Feb. 2014

Hallo,

ich verzweifle so langsam. Ich hab Probleme mit einem Bootstrap Kontaktformular. Es scheint, dass es bei der Reihenfolge des
Ladens der javaScripte ein Problem gibt. Je nachdem in welcher Reihenfolge ich folgende Scripte lade, geht mal das und mal das.

Wenn ich so lade:

Code:

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>

geht mein Kontaktformular nicht. Es geht nur teilweise. Ich nutze jQuery Validate. Die Input-Felder validiert er. Aber es ist unmöglich den Submit-Button
auszulösen. Es passiert nichts. Dabei hab ich im submitHandler was drin zu stehen, einfach ein alert zum Testen.
In dieser Reihenfolge geht allerdings mein Bootstrap-Menü noch. Speziell das Collapse Menu was bei Handys erscheint funktioniert und lässt sich anklicken.

Wenn ich die Reihenfolge so wähle:

Code:

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>

arbeitet das Kontaktformular super. Sogar der Submit-Button geht und es erscheint das alert-Fenster.
Aber in diesem Falle geht das Bootstrap-Collapse Menu nicht mehr

Es lässt sich nicht anklicken.

Ich bin echt am verzweifeln. Habe alle Varianten getestet. Den Quellcode auch so weit vereinfacht, das andere Fehlerquellen ausgeschlossen
werden können. Es ist immer das gleiche.

Hier mein kompletter Code:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <title>Contact Form</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <div class="navbar navbar-fixed-top" data-activeslide="1">
      <div class="container">
      <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
       <span class="icon-bar"></span>
      </button>

      <div class="nav-collapse collapse navbar-responsive-collapse">
        <ul class="nav row"> 
           <li data-slide="1" class="col-12 col-sm-2"><a id="menu-link-1" href="#slide-1"> <span class="text">MENU 1</span></a></li>
           <li data-slide="2" class="col-12 col-sm-2"><a id="menu-link-2" href="#slide-2"> <span class="text">MENU 2</span></a></li>
         </ul>
         <div class="row">
           <div class="col-sm-2 active-menu"></div>
         </div>
      </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div><!-- /.navbar -->

    <div class="slide story" id="slide-1" data-slide="1">
      <div class="container">
       <div class="row">
         <div class="col-12">
           <p>TEST</p>
         </div>           
       </div>
     </div><!-- /container -->
   </div>

    <div class="slide story" id="slide-2" data-slide="2">
      <div class="container">
       <div class="row">
         <div class="col-12">
           <div class="well">
             <form id="contact-form" class="form">
               <fieldset>
               <legend>Contact Form</legend>
                 <div class="form-group">
                   <label for="name" class="control-label">Name</label>  
                   <input type="text" class="form-control" id="name" name="name1" placeholder="name"/>              
                 </div>
                 <div class="form-group">
                   <label for="name" class="control-label">E-Mail</label>
                   <input type="text" class="form-control" id="email" name="email" placeholder="email"/>   
                 </div>
                 <div class="form-group">
                   <label for="name" class="control-label">Phone</label>
                   <input type="text" class="form-control" id="phone" name="phone" placeholder="phone"/>   
                 </div>
                 <div class="form-group">
                   <label for="name" class="control-label">message</label>
                   <textarea type="text" id="message" class="form-control"  name="message" rows="10" cols="40" placeholder="Message"></textarea>
                 </div>
                 <div class="form-group">
                   <button value="Send" class="btn btn-primary" type="submit" id="submit" name="submit">Send</button>      
                   <button type="reset" class="btn">Clear</button> 
                 </div>
               </fieldset>
             </form>
           </div>
         </div>           
       </div>
     </div><!-- /container -->
   </div>



  <!-- Java-Scripts -->
  <script src="js/html5shiv.js"></script>
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery-migrate-1.2.1.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/script.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
  <script src="js/val.js"></script>

 </body>
</html>

Hier das Validate-JS:

Code:

$(document).ready(function() {
    $("#contactform").validate({
    	//validation rules
        rules: {
            name1:{
                minlength: 3,
                maxlength: 20,
                required: true
            },
            email:{
                minlength: 3,
                required: true,
                email: true
            },
            telefon:{
                minlength: 3,
                required: true
            },
            nachricht: {
                minlength: 10,
                required: true
           }         
        },
        highlight: function(element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        },
        //submit handler
        submitHandler: function(form) {
          //form.submit();
          alert('Hallo');
          return false;
        }
    });
}); // end document.ready

Hat jemand eine Idee?

Lg sappy

j-l-n · 24. Feb. 2014

Sieh dir zuerst einmal folgende Stackoverflow-Fragen an, die mit deiner übereinstimmen:

Does the order of JavaScript files matter at all? • Stackoverflow

Is there a way To use Bootstrap 3.0 with jQuery.noConflict()? • Stackoverflow

jQuery kann inkompatibel zu anderen JavaScript-Frameworks sein: Avoiding Conflicts with Other Libraries | jQuery Learning Center

Füge deshalb ganz am Anfang des Skripts $.noConflict ein!

sappy · 24. Feb. 2014

Hallo,

erstmal danke für die schnelle und hilfreiche Antwort. Ich habe die Reihenfolge jetzt wie folgt:

Code:

  <script src="js/html5shiv.js"></script>
  <script src="js/bootstrap.min.js"></script> 
  <script>var $jq1 = jQuery.noConflict(true);</script> 
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> 
  <script src="js/script.js"></script>
  <script src="js/val.js"></script>

Weiterhin alles beim alten. Das Menu von Bootstrap arbeitet mit dieser Reihenfolge nicht. Der Submit Button geht jedoch.
:icon8: :icon8:

Grüße und danke!

Pariak · 24. Feb. 2014

Ich denke mal, dass innerhalb deiner JavaDateien jquery verwendet wird.

Aus diesem Grund, solltest du diese an erster Stelle haben und anschließend deine JavaScript-Dateien:

Code:

  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> 
  <script>var $jq1 = jQuery.noConflict(true);</script> 
  <script src="js/html5shiv.js"></script>
  <script src="js/bootstrap.min.js"></script> 
  <script src="js/script.js"></script>
  <script src="js/val.js"></script>

Nun sollte es funktionieren!

Beste Grüße
Pariak

sappy · 25. Feb. 2014

Leider nicht. Es geht weder das Menu noch der Submit Button

Das einzige was jetzt passiert: Der Submit-Button scheint irgendwas auszulösen, denn die URL ändert sich nach dem drücken in :
--> index.html?name1=&email=&telefon=&nachricht=&submit=Send

sappy · 25. Feb. 2014

Also ich hab was rausgefunden. Es liegt an dieser Zeile: <div class="slide story" id="slide-2" data-slide="2">
Wenn man das data-slide="2" wegnimmt dann geht es. Das verstehe mal einer?
Dann geht mein Menu jedoch nicht mehr

Lg?

j-l-n · 25. Feb. 2014

sappy schrieb:
Wenn man das data-slide="2" wegnimmt dann geht es. Das verstehe mal einer?
Dann geht mein Menu jedoch nicht mehr

Naja, sooo ungewöhnlich finde ich das jetzt nicht...
PS: schau dir doch mal John Resig - HTML 5 data- Attributes an!

kkapsner · 25. Feb. 2014

Ich glaube, hier ist jetzt der Punkt, wo wir ohne einen Testlink nicht wirklich weiterhelfen können.

sappy · 26. Feb. 2014

Hi Julian,

hab es mir durchgelesen. Da steht ja soweit nur das es gültiges HTML ist. Das man es also einsetzen kann!?

lg

Lade-Reihenfolge der Javascripts

sappy

New member

j-l-n

Guest

sappy

New member

Pariak

New member

sappy

New member

sappy

New member

j-l-n

Guest

kkapsner

Super Moderator

sappy

New member