Nothing happens when I press the button with the id test. I do get an error message in the debug of my console though that states:
ReferenceError: Can't Find variable '$'.
I believe this is a jQuery error, but I already have it imported. Here's the code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.18.min.js"></script>
<script>
$("#test").click(function() {
alert("Handler for .click() called.");
});
</script>
<title>Panic App</title>
<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="loginModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center">Login</h1>
</div>
<div class="modal-body">
<form class="form col-md-12 center-block">
<div class="form-group">
<input type="text" value="b" class="form-control input-lg" id="username" placeholder="Email">
</div>
<div class="form-group">
<input type="password" value="a" class="form-control input-lg" id="password"placeholder="Password">
</div>
<div class="form-group">
<button class="bn btn-primary btn-lg btn-block" id="test" value="Sign In">Sign In</button>
<span class="pull-right">Register</span><span>Need help?</span>
</div>
</form>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Panic</h3>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">Stay Safe.</h1>
<p class="lead">Panic is a beautiful emergency notification system like no other. Using the power of cloud computing, Panic innovates in ways you've never seen.</p>
<p class="lead">
<button class="btn btn-lg btn-default" data-toggle="modal" data-target="#loginModal">Sign Up.</button>
</p>
</div>
<div class="mastfoot">
<div class="inner">
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/docs.min.js"></script>
</body>
</html>
You try to call $ on line 11 of that source code (and maybe also in the script on line 9).
You don't include jQuery until the very end.
You have to include jQuery before you try to use it.
Move your code after the jQuery initialization:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/docs.min.js"></script>
<script>
$("#test").click(function() {
alert("Handler for .click() called.");
});
</script>
You need to include the jQuery library above your script. Also your script will work only if you keep it inside the $(document).ready() function.
Related
Modal is working in Firefox but not in Chrome, I added the code below.
The following is my app.js :
$('.test').on('click', function (event) {
event.preventDefault();
$('#join-req').modal();
});
HTML :
Join to my Group
The modal :
<div class="modal fade" tabindex="-1" role="dialog" id="join-req">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Join Request</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="post-body">Join request to expert</label>
<textarea class="form-control" name="join-body" id="join-body" rows="5"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="modal-save">Submit request</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
The following are the Bootstrap and jquery links :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="{{ URL::to('src/css/main.css') }}">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="{{ URL::to('src/js/app.js') }}"></script>
Thanks in advance
I can think of 3 possible causes of your problems, given that no errors are shown in your console.
JQuery could have been loaded twice.
check for inclusions of files which may already have been included in the others.
The .js files which you are referencing might not be in the right order,
make sure JQuery is loaded and only then Bootstrap .
Your JQuery doesn't work well with your current Bootstrap version. Try upgrading either of the 2 or both.
I am trying to build a tool that has a modal which opens on page load, then the user would paste text into a textarea and submit. After that a function should run that returns a substring of that text for a specific number of characters.
Currently I am console logging the correct substring, but after I click the submit button, the modal runs again. I only want the modal to run once on page load.
Can anyone offer some guidance?
$(window).on('load',function() {
$('#myModal').modal('show');
});
function myFunction(info) {
var info = $('#textArea').val();
var result = info.substring(0, 66);
$('#result').html(result);
console.log(result);
}
.container >* {
margin:20px auto;
width: 80%;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Welcome to my Bringhurst Rule Tool</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>Bringhurst introduces designers to the "66 character rule," which states that 66 characters including special characters and spaces at a font-size of 16px is the ideal width for a single line of type in order to achieve maximum clarity and readability.</p>
<p>Close the modal to see what your 66 characters look like.</p>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div> <!-- footer end -->
</div> <!-- modal-content end -->
</div> <!-- modal dialog end -->
</div> <!-- mymodal end -->
<div class="container">
<header><h1>Bringhurst Rule</h1></header>
<form class="align-center">
<div class="form-group">
<label for="textArea"></label>
<textarea class="form-control" id="textArea" rows="3" placeholder="Paste your text here..."></textarea>
</div>
<button type="submit" class="btn btn-info" onclick="myFunction()">Get the substring!</button>
</form>
</div>
<div id="result"></div>
</body>
There are better ways to do what you're doing, like using jQuery's fancy event handlers instead of using inline event handlers, but the easiest answer to your question is to return false on the event.. do that by making two changes..
Make the event listener return the result of the event handler by changing the HTML like so.. onclick="return myFunction()" (added the return there)
return false from the function itself.
By returning false you're preventing the default action, which is to submit the form.
Alternatively you could remove the form itself or change the submit button to a regular button.
$(window).on('load',function() {
$('#myModal').modal('show');
});
function myFunction(info) {
var info = $('#textArea').val();
var result = info.substring(0, 66);
$('#result').html(result);
console.log(result);
return false;
}
.container >* {
margin:20px auto;
width: 80%;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Welcome to my Bringhurst Rule Tool</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>Bringhurst introduces designers to the "66 character rule," which states that 66 characters including special characters and spaces at a font-size of 16px is the ideal width for a single line of type in order to achieve maximum clarity and readability.</p>
<p>Close the modal to see what your 66 characters look like.</p>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div> <!-- footer end -->
</div> <!-- modal-content end -->
</div> <!-- modal dialog end -->
</div> <!-- mymodal end -->
<div class="container">
<header><h1>Bringhurst Rule</h1></header>
<form class="align-center">
<div class="form-group">
<label for="textArea"></label>
<textarea class="form-control" id="textArea" rows="3" placeholder="Paste your text here..."></textarea>
</div>
<button type="submit" class="btn btn-info" onclick="return myFunction()">Get the substring!</button>
</form>
</div>
<div id="result"></div>
</body>
You should prevent the page reloading after the submition and you can return as false onclick event;
<button type="submit" class="btn btn-info" onclick="myFunction(); return false;">Get the substring!</button>
$(window).on('load',function() {
$('#myModal').modal('show');
});
function myFunction() {
var info = $('#textArea').val();
var result = info.substring(0, 66);
$('#result').html(result);
console.log(result);
}
.container >* {
margin:20px auto;
width: 80%;
}
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<body>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Welcome to my Bringhurst Rule Tool</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>Bringhurst introduces designers to the "66 character rule," which states that 66 characters including special characters and spaces at a font-size of 16px is the ideal width for a single line of type in order to achieve maximum clarity and readability.</p>
<p>Close the modal to see what your 66 characters look like.</p>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div> <!-- footer end -->
</div> <!-- modal-content end -->
</div> <!-- modal dialog end -->
</div> <!-- mymodal end -->
<div class="container">
<header><h1>Bringhurst Rule</h1></header>
<form class="align-center">
<div class="form-group">
<label for="textArea"></label>
<textarea class="form-control" id="textArea" rows="3" placeholder="Paste your text here..."></textarea>
</div>
<button type="submit" class="btn btn-info" onclick="myFunction(); return false;">Get the substring!</button>
</form>
</div>
<div id="result"></div>
</body>
When I open same code in any browser it works perfectly, but in web view all of sudden it disappears, sometimes becomes black.
For your info I've included:
bootstrap.min.css
bootstrap.js
jquery.js
jquery-mobile.1.4.5.js
jquery-mobile.css
Meta Tags:
<html lang="en" class="no-js"> <!--<![endif]-->
<head>
<!-- meta character set -->
<meta charset="utf-8">
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>M-ZAES</title>
<!-- Meta Description -->
<meta name="description" content="Blue One Page Creative HTML5 Template">
<meta name="keywords" content="one page, single page, onepage, responsive, parallax, creative, business, html5, css3, css3 animation">
<meta name="author" content="Muhammad Morshed">
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1">
This is my code and Please tell me why is it happening?
<center>
<img src="img/zone_switch.png" class="img-responsive zoom-img" style="width:60%" data-toggle="modal" data-target="#myModal2"/>
</center>
<div class="modal fade" data-role="none" id="myModal2" role="dialog" style="margin-top:00px; z-index:30000;">
<div class="modal-dialog" data-role="none">
<!-- Modal content-->
<div class="modal-content" data-role="none" style="margin-top:50px;">
<div class="modal-header" data-role="none" style="background-color:lightgrey">
<h4 class="modal-title">Select Zone</h4>
</div>
<div class="modal-body" data-role="none">
<div class="radio">
<label><input type="radio" data-role="none" name="optradio" onclick="switchToFirstZone()">First</label>
</div>
<div class="radio">
<label><input type="radio" data-role="none" name="optradio" onclick="switchToSecondZone()">Second</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I am trying to show a hidden modal I have declared at the beginning of the body of a bootstrap page dependently on a value contained in the current session.
To this end I am using $('#myModal').modal("show"); when the document is ready.
However the modal is not shown and I can't see why.
Here follows an example reproducing the issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<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://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<script>
$( document ).ready(function() {
// Handler for .ready() called.
console.log("document ready");
$('#myModal').modal({show:true});
});
</script>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
You are including the jquery and the bootstrap library twice...either place it in the head or at the end of the body not in both places
HTML Code which can be used:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<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://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<script>
$( document ).ready(function() {
// Handler for .ready() called.
console.log("document ready");
$('#myModal').modal({show:true});
});
</script>
</div>
</div><!-- /.container -->
</body>
</html>
Working Fiddle
I am trying to use datepicker from http://www.eyecon.ro/bootstrap-datepicker/?utm_source=twitterfeed&utm_medium=twitter.
Question updated to include complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Calendar</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="navbar.css">
<link rel="stylesheet" href="js/datepicker/css/datepicker.css">
<script src="js/datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="js/fullcalendar-2.0.2/fullcalendar.css">
<link rel="stylesheet" href="js/fullcalendar-2.0.2/fullcalendar.print.css">
<script src="js/fullcalendar-2.0.2/lib/jquery.min.js"></script>
<script src="js/fullcalendar-2.0.2/lib/moment.min.js"></script>
<script src="js/fullcalendar-2.0.2/fullcalendar.min.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type='text/javascript'>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
</script>
</head>
<body>
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Calendar</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Bookings <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Add</li>
<li>Delete</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Admin</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
<!-- Modal -->
<script>
$('#dp1').datepicker({
format: "MM-DD-YYYY",
autoclose: true
});
</script>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Form</h4>
</div>
<div class="modal-body">
<!-- Form -->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputForename" class="col-sm-2 control-label">Forename</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputForename" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputSurname" class="col-sm-2 control-label">Surname</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSurname" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputBadge" class="col-sm-2 control-label">Badge</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputBadge" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputStartDate" class="col-sm-2 control-label">Start Date</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="dp1">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Main component to show the calendar -->
<div id="calendar"></div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
Is there something wrong in what I am doing here? It seems ok based on the examples at http://www.eyecon.ro/bootstrap-datepicker/?utm_source=twitterfeed&utm_medium=twitter.
You might need to wait until the page is loaded, then initialize the date picker
<script>
jQuery(document).ready( function($){
$('#dp1').datepicker({
format: "MM-DD-YYYY",
autoclose: true
});
});
</script>