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>
Related
I was trying to figure out how can i add or display form data from this index.html page and as of now i did collect the data in the backend, but finding ways on how to display the data in frontend as a card component which i used from bootstrap , appreciate your efforts if anyone could help me on this !
my index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid ">
<a class="navbar-brand " href="index.html">EBlogs</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</header>
<main>
<div class="card" style="margin-left: 500px; margin-top: 100px; width: 40rem;">
<img src="./images/mountains.jpg" class="card-img-top" alt="mountains">
<div class="card-body">
<h5 class="card-title">Mountains</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<button type="button" class="btn btn-primary" onclick="UpdateImage()">Update Blog</button>
<button type="button" class="btn btn-danger" onclick="addImage()">Delete Blog</button>
</div>
</div>
<form id="addBlog" method="POST">
<div class="container contaier-lg">
<div class="mb-3">
<label for="Title" class="form-label">Title for a Blog :</label>
<input type="text" class="form-control" id="title" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="Content" class="form-label">Content :</label>
<input type="text" class="form-control" id="content">
</div>
<div class="mb-3">
<label for="User" class="form-label">Created By :</label>
<input type="text" class="form-control" id="username">
</div>
<button type="button" class="btn btn-primary" onclick="addImage()">Add Blog</button>
</form>
</div>
</main>
<script src="backend.js"></script>
</body>
</html>
my backend.js : (as of now ) :
var card = []
function addImage(){
var title = document.getElementById("title").value
var content = document.getElementById("content").value
var user = document.getElementById("username").value
card = {title,content,user}
function adder(card){
for(let i=0;i<card.length;i++){
card.push(card[i])
}
return card
}
console.log(adder(card))
}
i was try using append method with inner.HTML methods but not working out..
the view when i add the contents would be something like this :
var card = []
function addImage(){
var title = document.getElementById("title").value
var content = document.getElementById("content").value
var user = document.getElementById("username").value
card = {title,content,user}
var cardTemplate = ' <div class="card" style="margin-left: 500px; margin-top: 100px; width: 40rem;"> '+
' <img src="./images/mountains.jpg" class="card-img-top" alt="mountains">'+
' <div class="card-body">'+
' <h5 class="card-title">'+ title +'</h5>'+
' <p class="card-text">'+ content +'</p>'+
' <button type="button" class="btn btn-primary" onclick="UpdateImage()">Update Blog</button>'+
' <button type="button" class="btn btn-danger" onclick="addImage()">Delete Blog</button>'+
' </div>'+
' </div>'
'</div>';
document.getElementById("addBlog").insertAdjacentHTML("beforebegin", cardTemplate);
function adder(card){
for(let i=0;i<card.length;i++){
card.push(card[i])
}
return card
}
console.log(adder(card))
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid ">
<a class="navbar-brand " href="index.html">EBlogs</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</header>
<main>
<div class="card" style="margin-left: 500px; margin-top: 100px; width: 40rem;">
<img src="./images/mountains.jpg" class="card-img-top" alt="mountains">
<div class="card-body">
<h5 class="card-title">Mountains</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<button type="button" class="btn btn-primary" onclick="UpdateImage()">Update Blog</button>
<button type="button" class="btn btn-danger" onclick="addImage()">Delete Blog</button>
</div>
</div>
<form id="addBlog" method="POST">
<div class="container contaier-lg">
<div class="mb-3">
<label for="Title" class="form-label">Title for a Blog :</label>
<input type="text" class="form-control" id="title" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="Content" class="form-label">Content :</label>
<input type="text" class="form-control" id="content">
</div>
<div class="mb-3">
<label for="User" class="form-label">Created By :</label>
<input type="text" class="form-control" id="username">
</div>
<button type="button" class="btn btn-primary" onclick="addImage()">Add Blog</button>
</form>
</div>
</main>
<script src="backend.js"></script>
</body>
</html>
I want to validate my first name and last name input fields in a modal. If it's empty, it will span a message "The field is required!" colored in red.
The problem I am facing is my script isn't validating the fields.
Please help.
$(document).ready(function() {
$('#btn').click(function(e) {
var fieldIDArray = [$('#firstName', '#lastName')];
var spanIDArray = [$('#firstNameRequired',
'#lastNameRequired')];
for (i = 0; i < fieldIDArray.length; i++) {
if (!fieldIDArray[i].val()) {
e.preventDefault();
fieldIDArray[i].closest('.form-group')
.removeClass('has-success').addClass(
'has-error');
spanIDArray[i].show();
} else {
fieldIDArray[i].closest('.form-group')
.removeClass('has-error').addClass(
'has-success');
spanIDArray[i].hide();
}
}
});
});
.requiredField {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Modal FOrm</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/form-validation.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>J2EE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../../js/applicantFormValidation.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css">
</head>
<body>
<a href="# " data-toggle="modal"
data-target="#RegFormModal" class="underline inputLabel">
Open Form Modal</a>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="RegFormModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<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 ">My Modal</h4>
</div>
<!-- Modal Body -->
<div class="modal-body ">
<form id="applicationForm" name="applicationForm" role="form">
<!--action="ApplicationFormCheck" method="POST"> -->
<div class="form-group row">
<label for="firstName" class="col-md-2">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="firstName"
placeholder="Enter First Name" name="firstName" />
</div>
<div class="col-md-4">
<span class="requiredField" id="firstNameRequired" style="display:none;">This field is Required!</span>
</div>
</div>
<div class="form-group row">
<label for="lastName" class="col-md-2">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="lastName"
placeholder="Enter Last Name" name="lastName" />
</div>
<div class="col-md-4">
<span class="requiredField" id="lastNameRequired" style="display:none;">This field is Required!</span>
</div>
</div>
<div style="text-align: center;">
<button id="btn" type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
You are creating a 2d array, no need of that just declare like var fieldIDArray = [$('#firstName'), $('#lastName')]; and var spanIDArray = [$('#firstNameRequired'),$('#lastNameRequired')];
Working snippet:
$(document).ready(function() {
$('#btn').click(function(e) {
var fieldIDArray = [$('#firstName'), $('#lastName')]; //fix here
var spanIDArray = [$('#firstNameRequired'),
$('#lastNameRequired')
]; //fix here
for (i = 0; i < fieldIDArray.length; i++) {
if (!fieldIDArray[i].val().length) {
e.preventDefault();
fieldIDArray[i].closest('.form-group')
.removeClass('has-success').addClass(
'has-error');
spanIDArray[i].show();
} else {
fieldIDArray[i].closest('.form-group')
.removeClass('has-error').addClass(
'has-success');
spanIDArray[i].hide();
}
}
});
});
.requiredField {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Modal FOrm</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/form-validation.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>J2EE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../../js/applicantFormValidation.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css">
</head>
<body>
<a href="# " data-toggle="modal" data-target="#RegFormModal" class="underline inputLabel">
Open Form Modal</a>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="RegFormModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss=m odal>
<span aria-hidden="true">×</span> <span class="sr-only ">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel ">My Modal</h4>
</div>
<!-- Modal Body -->
<div class="modal-body ">
<form id="applicationForm" name="applicationForm" role="form">
<!--action="ApplicationFormCheck" method="POST"> -->
<div class="form-group row">
<label for="firstName" class="col-md-2">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="firstName" placeholder="Enter First Name" name="firstName" />
</div>
<div class="col-md-4">
<span class="requiredField" id="firstNameRequired" style="display:none;">This field is Required!</span>
</div>
</div>
<div class="form-group row">
<label for="lastName" class="col-md-2">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="lastName" placeholder="Enter Last Name" name="lastName" />
</div>
<div class="col-md-4">
<span class="requiredField" id="lastNameRequired" style="display:none;">This field is Required!</span>
</div>
</div>
<div style="text-align: center;">
<button id="btn" type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
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
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.
I have the following code. I don't know why the modal pop up not popping up when clicking on the login button. I checked and confirmed that data-target and data-toggle are set correctly. Below is my code.
<!DOCTYPE html>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="s" uri="/struts-tags" %>
<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.0">
<meta name="description" content="">
<meta name="author" content="Ritesh Sangwan">
<title>ossoc | Create account</title>
<link rel="stylesheet" href="./js/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<link rel="stylesheet" href="./css/bootstrap.css" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./js/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="./js/jqwidgets/jqxvalidator.js"></script>
<script type="text/javascript" src="./js/jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
<!------ Navabar start --->
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-default navbar-static-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="glyphicon glyphicon-chevron-down"></span>
</button>
<a class="navbar-brand" href="./index.jsp">ossoc</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navbar-btn">
<button id="loginbutton" type="button" class="btn btn-primary" data-target="#registerlogin" data-toggle="modal"><i class="glyphicon glyphicon-log-in"></i>Login</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!---- navbar end--->
<div class="container marketing">
<div class="jumbotron-modified well">
<div class="container">
<form id="register" action="register" role="form" class="form-horizontal" method="post">
<div class="form-group">
<label class="col-sm-2 control-label">First name:</label>
<div class="col-sm-4">
<input id="fnameInput" name="registerfname" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Last name:</label>
<div class="col-sm-4">
<input name="registerlname" type="text" class="form-control" id="lnameInput" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email:</label>
<div class="col-sm-4">
<input name="registeremail" class="form-control" id="emailInput" placeholder="someone#example.com" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="passwordInput" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Confirm password:</label>
<div class="col-sm-4">
<input name="registerpassword" type="password" class="form-control" id="passwordConfirmInput" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<div class="checkbox">
<div id="acceptInput">
<input type="checkbox" />
I accept the terms and conditions.
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<button id="submit" class="btn btn-success"><i class="glyphicon glyphicon-plus" style="margin-right: 5px"></i>Create account</button>
</div>
</div>
</form>
</div>
</div>
<footer>
<p class="pull-right">Back to top</p>
<p>© 2013 Ritesh Sangwan. · Privacy · Terms</p>
</footer>
</div>
<!--- Model start-->
<div class="modal fade" id="registerlogin" tabindex="-1" role="dialog" 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">x</button>
<h3>Login</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" action="login" method="post">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input name="email" type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input name="password" type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="pull-right">
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-log-in" style="margin-right: 5px"></i>Log in</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!---model end ---->
</body>
</html>
Try including jQuery before Bootstrap. Your bootstrap.min.js is before your jquery.
Bootstrap Modal doesn't show