Loading order of bootstrap javascripts
Question
i'v been running in trouble, with my Bootstrap contact form. It seems to be important at which time the javascript files are loaded. Depending on the placement some things doesn't work correctly:
If so:
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
my contact form will don't work. Click on "SUBMIT"-Button and nothing happens. But the collapse menu button of bootstrap works fine.
If loading order is like this:
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
the contact form (especially the subimt button) works as expected. But the collapse bootstrap menu button don't work fine. It is unclickable.
I tried everything but I don't know the reason for that behavior. Do you have an idea, how to make both things work each other?
Here come's my full 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/val55.js"></script>
</body>
</html>
This is what the val55.js-File looks like:
$(document).ready(function() {
$("#contact-form").validate({
rules: {
name1:{
minlength: 3,
maxlength: 20,
required: true
},
email:{
minlength: 3,
required: true,
email: true
},
phone:{
minlength: 3,
required: true
},
message: {
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');
},
submitHandler: function(form) {
//form.submit();
alert('Hallo');
}
})
}); // end document.ready
Regards, John
1 answers
solution1
0 2014-02-23 18:18:48
Do this:
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="js/script.js"></script>
<script src="js/val55.js"></script>
You might need to switch between the last to scripts and everything should work fine provided you don't have any errors in your javascript.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.