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
Related
<!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.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script>
function twofomr() {
onclick = document.getElementById('dibba_lo').style.display = 'none';
document.getElementById('reg_dibba').style.display = '';
document.getElementById('dibbaT2').innerHTML = "Be a part of NoobSnoop";
}
function onefomr() {
onclick = document.getElementById('reg_dibba').style.display = 'none';
document.getElementById('dibba_lo').style.display = '';
document.getElementById('dibbaT1').innerHTML = "Quick get in !";
}
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Menu</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="icon">
<a id="icon" type="image" imgsrc="Save.BMP" "></a></div>
<div class="collapse navbar-collapse " id="navbarNav ">
<ul class="navbar-nav ">
<li class="nav-item ">
<a class="nav-link active " aria-current="page " href="# ">Home</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="# ">Features</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="textb1 " class="textb1 ">
<H2 class="dibbaT " id="dibbaT1 ""></H2>
</div>
<div id="reg_dibba" ,class='b_dibba'>
<form action="" class="dibba" ,id="regform" ,method="post">
<div class="mb-3">
<label class="form-label">What's your name? </label>
<input type="text" name="name" class="form-control" placeholder="What do they call you?" required/>
</div>
<div class="mb-3">
<label class="form-label">What's your email? </label>
<input type="email" name="mail" class="form-control" placeholder="What do they call you?" required/>
</div>
<div class="mb-3">
<label class="form-label">Set your password</label>
<input type="password" name="piss" id="piss" class="form-control" placeholder="Set a password" required/>
</div>
<div class="mb-3">
<label class="form-label">Confirm your password</label>
<input type="password" name="piss2" id="piss2" class="form-control" placeholder="Confirm your password" required/>
</div>
<div class="mb-3">
<div id="cnfrmpass">`</div>
</div>
<div class="mb-3">
<button type="submit" ,name="sbt" , class="btn btn-primary mb-3"> Submit </button>
</div>
<div class="mb-3">
<button onclick="onefomr()" class="btn btn-primary mb-3"> Login </button>
</div>
</form>
</div>
<div id="textb2" class="textb2">
<H2 class="dibbaT" id="dibbaT2"></H2>
</div>
<div id="dibba_lo" class="m_dibba" style="display: none;">
<form action="" class="dibba_lo" ,id="formlogin" ,method="post">
<div class="mb-3">
<label class="form-label">What's your email? </label>
<input type="email" name="mail" class="form-control" placeholder="What your email address?" required/>
</div>
<div class="mb-3">
<label class="form-label">Set your password</label>
<input type="password" name="piss_m" id="piss" class="form-control" placeholder="Set a password" required/>
</div>
<div class="mb-3">
<button type="submit" ,name="btnlog" , class="btn btn-primary mb-3"> Take me In </button>
</div>
<div class="mb-3">
<button onclick="twofomr()" class="btn btn-primary mb-3"> Register </button>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I wrote this piece of code, it is supposed to change the login and register form with changing headings. It shows both headings at once in the wrong place. Can someone point me to what is going wrong? Any help is appreciated in advance.
I have tried creating two separate DIV tags but that didn't work, I gave an inline script but that broke the code. I have given each heading it's own heading, now it is changing positions.
I just fixed your code.
Don't use comma , to separate element attributes.
<!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.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Menu</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="icon">
<a id="icon" type="image" imgsrc="Save.BMP"></a></div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ">
<li class="nav-item ">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="# ">Features</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="textb1" class="textb1">
<H2 class="dibbaT" id="dibbaT1"></H2>
</div>
<div id="reg_dibba" class="b_dibba">
<form action="" class="dibba" id="regform" method="post">
<div class="mb-3">
<label class="form-label">What's your name? </label>
<input type="text" name="name" class="form-control" placeholder="What do they call you?" required/>
</div>
<div class="mb-3">
<label class="form-label">What's your email? </label>
<input type="email" name="mail" class="form-control" placeholder="What do they call you?" required/>
</div>
<div class="mb-3">
<label class="form-label">Set your password</label>
<input type="password" name="piss" id="piss" class="form-control" placeholder="Set a password" required/>
</div>
<div class="mb-3">
<label class="form-label">Confirm your password</label>
<input type="password" name="piss2" id="piss2" class="form-control" placeholder="Confirm your password" required/>
</div>
<div class="mb-3">
<div id="cnfrmpass"></div>
</div>
<div class="mb-3">
<button type="submit" name="sbt" class="btn btn-primary mb-3"> Submit </button>
</div>
<div class="mb-3">
<button onclick="onefomr()" class="btn btn-primary mb-3"> Login </button>
</div>
</form>
</div>
<div id="textb2" class="textb2">
<H2 class="dibbaT" id="dibbaT2"></H2>
</div>
<div id="dibba_lo" class="m_dibba" style="display: none;">
<form action="" class="dibba_lo" id="formlogin" method="post">
<div class="mb-3">
<label class="form-label">What's your email? </label>
<input type="email" name="mail" class="form-control" placeholder="What your email address?" required/>
</div>
<div class="mb-3">
<label class="form-label">Set your password</label>
<input type="password" name="piss_m" id="piss" class="form-control" placeholder="Set a password" required/>
</div>
<div class="mb-3">
<button type="submit" name="btnlog" class="btn btn-primary mb-3"> Take me In </button>
</div>
<div class="mb-3">
<button onclick="twofomr()" class="btn btn-primary mb-3"> Register </button>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script>
function twofomr() {
var regButton = document.getElementById('dibba_lo').style.display = 'none';
document.getElementById('reg_dibba').style.display = '';
document.getElementById('dibbaT2').innerHTML = "Be a part of NoobSnoop";
}
function onefomr() {
var loginButton = document.getElementById('reg_dibba').style.display = 'none';
document.getElementById('dibba_lo').style.display = '';
document.getElementById('dibbaT1').innerHTML = "Quick get in !";
}
</script>
</body>
</html>
After adding on the required attribute, my submit button does not have any response. When the textbox is empty after pressing the submit button, the validation occurs but the button does nothing and does not have any response. The submit button only works finely after when the required attribute is removed. The below shows my html form:
<!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">
<title>Manage store</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="css/form.css" />
</head>
<body>
<form method="post" action="store.php" enctype="multipart/form-data">
<div id="addStoreModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add Stores</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Store location</label>
<input type="text" name="storeloc" id="storeloc" class="form-control" required/>
</div>
<div class="form-group">
<label class="control-label">Status</label>
<select class="form-control" name="status">
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="submit" name="addStore" class="btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
<div id="deleteStoreModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Delete Employee</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete these Records?</p>
<p class="text-warning"><small>This action cannot be undone.</small></p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" name="deleteStore" class="btn btn-danger" value="Delete">
</div>
</div>
</div>
</div>
<div id="editStoreModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Stores</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Store location</label>
<input type="text" name="editstoreloc" class="form-control"/>
</div>
<div class="form-group">
<label class="control-label">Status</label>
<select class="form-control" name="editstatus">
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="submit" name="editStore" class="btn btn-primary">Edit</button>
</div>
</div>
</div>
</div>
<div id="storeExistModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Store exist</h4>
</div>
<div class="modal-footer">
<button type="submit" name="existStore" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
I am using bootstrap in my spring boot web application
Used may features of bootstrap like SB admin, data-table etc all off them working fine for me
Now I am trying to use bootstrap model popup and its not working for me here is my jsp code
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%#taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html>
<html lang="pt-BR" id="ng-app" ng-app="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- CSS import -->
<link rel='stylesheet' href='<c:url value="/resources/css/signin.css" />' type='text/css' media='all' />
<link rel='stylesheet' href='<c:url value="/resources/css/style.css" />' type='text/css' media='all' />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.7.0/metisMenu.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/3.3.7+1/css/sb-admin-2.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" />
<link rel='stylesheet' href='<c:url value="/resources/css/logoutPanel.css" />' type='text/css' media='all' />
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.7.0/metisMenu.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/3.3.7+1/js/sb-admin-2.min.js"></script>
<script src='<c:url value="/resources/js/web3.min.js" />'></script>
<script src='<c:url value="/resources/js/solidity.js" />'></script>
</head>
<body>
<div class="header">
<div class="logoDiv"><img src='<c:url value="/resources/images/logoWhite.png" />' class="logo top-margin-small"></div>
<div class="titleDiv"><h1 class="top-margin-small"> Asset management</h1></div>
</div>
<div class="container">
<input type="hidden" id="userId" value="${userId}">
<button type="button" class="btn btn-info btn-sm" id="back_to_dashboard" aria-label="back to Dashboard" style="border: 0px;margin-top:10px;">
<a href="/admin/home"><span class="glyphicon glyphicon-chevron-left" style="color: #a6dfe7; font-size: 20px; vertical-align: middle;"
aria-hidden="true"></span> Dashboard</a>
</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<form:form action="/save/asset" method="POST" modelAttribute="asset" class="form-user-registration">
<h2 class="form-user-registration-heading">New Asset</h2>
<div>
<label for="assetCode" class="sr-only">Code </label>
<form:input path="assetCode" id="assetCode" class="form-control" placeholder="Asset Code"/>
<span class="error"><p id="asset_code_error"></p></span>
<form:errors path="assetCode" cssClass="error" />
</div>
<div>
<label for="assetName" class="sr-only">Asset Name </label>
<form:input path="assetName" id="assetName" class="form-control" placeholder="Asset Name"/>
<span class="error"><p id="asset_name_error"></p></span>
<form:errors path="assetName" cssClass="error" />
</div>
<div>
<label for="assetType" class="sr-only">Asset Type</label>
<form:input path="assetType" id="assetType" class="form-control" placeholder="Asset Type"/>
<span class="error"><p id="asset_type_error"></p></span>
<form:errors path="assetType" cssClass="error"/>
</div>
<div>
<label for="assetDescription" class="sr-only">Asset Description</label>
<form:textarea path="assetDescription" id="assetDescription" class="form-control" placeholder="Asset Description"/>
<span class="error"><p id="asset_description_error"></p></span>
<form:errors path="assetDescription" cssClass="error"/>
</div>
<div>
<label for="assetStatusId" class="sr-only">Asset Status</label>
<form:select path="assetStatusId" id="assetStatusId" class="form-control" name="assetStatusId">
<form:option value="1">Available</form:option>
<form:option value="2">Allocated</form:option>
<form:option value="3">Damaged</form:option>
</form:select>
<form:errors path="assetStatusId" cssClass="error"/>
</div>
<div>
<c:choose>
<c:when test="${edit}">
<input type="button" id="update" value="Update" class="form-user-registration-button btn btn-success" />
</c:when>
<c:otherwise>
<input type="button" id="register" value="Register" class="form-user-registration-button btn btn-success"/>
</c:otherwise>
</c:choose>
<input type="button" class="form-user-registration-button btn btn-primary" value="Reset" id="resetAssetsDetails">
</div>
<div id="result" class="result-div"></div>
</form:form>
<!-- blockchain progress popup -->
<div class="modal fade" id="myModal" role="dialog" data-keyboard="true" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Blockchain progress</h4>
</div>
<div id="progressDiv">
<div id="progress">
<div id="bar"></div>
</div>
<div class="col-lg-4"></div>
<div class="col-lg-8 padd10">
<label>1. Transaction Sent<img src='<c:url value="/resources/images/tick.png" />' width="20px"/></label>
<br>
<label id="step2" hidden>2. Transaction Id received<img src='<c:url value="/resources/images/tick.png" />' height="20px" width="20px"/></label>
<br>
<label id="step3" hidden>3. Mining in progress<img src='<c:url value="/resources/images/tick.png" />' height="20px" width="20px"/></label>
<br>
<label id="step4" hidden>4. Mining completed<img src='<c:url value="/resources/images/tick.png" />' height="20px" width="20px"/></label>
<br>
<label id="step5" hidden>5. Transaction completed<img src='<c:url value="/resources/images/tick.png" />' height="20px" width="20px"/></label>
</div>
<br>
<br>
</div>
<div class="modal-footer noborder">
<button type="button" class="btn btn-default" id="closeButton" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end blockchain progress popup -->
</div>
<script src='<c:url value="/resources/js/newAsset.js" />'></script>
<div class="footer">
<img src='<c:url value="/resources/images/poweredBy.png"/>' class="powered-by-logo"/>
</div>
</body><!-- body close here -->
</html><!-- /html -->
I have tried opening the the popup by using toggle button as well as using Jquery
for toggle button I have used
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
And for jquery I have used
$("#myModal").modal("show");
And
$("#myModal").modal("toggle");
I have read some posts regarding same issue and tried to resolve this but still the result was same.
Thanks in advance.
The problem is in your bootstrap version try to replace your actual version with this one :
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
After I updated to Bootstrap 3.2.0, all my dropdown buttons stoped working, and the weirdest part, is that if I declare the file twice, as in:
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
It works, but then my modals get broken. I tried going back to 3.0.0, but the problem persists now.
Help?
JSFiddle: http://jsfiddle.net/01hf1obo/
About the console, this is what it shows:
GET http://localhost:3121/Content/css-responsive 1:16
Uncaught ReferenceError: $ is not defined 1:74
GET http://localhost:3121/js-culture.pt-BR 1:88
Resource interpreted as Image but transferred with MIME type text/html: "http://localhost:3121/Administrador/altEst/1". 1:61
Uncaught TypeError: undefined is not a function
#using System.Web.Optimization
#using BootstrapSupport
#using NavigationRoutes
#using pedidosOnlineMVC.Helpers
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Html.MetaAcceptLanguage()
<link href="#Styles.Url("~/content/css")" rel="stylesheet"/>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="#Styles.Url("~/Content/css-responsive")" rel="stylesheet" type="text/css" />
#RenderSection("head", required: false)
#*#Html.Partial("_html5shiv")*#
#* favicons and touch icons go here *#
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand navbar-brand" href="~/Login">Sistema de pedidos</a>
<div class="nav-collapse">
<ul class="nav">
#Html.Navigation()
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
#Html.Partial("_alerts")
#RenderBody()
<hr>
<footer>
<p>Codifica ® #System.DateTime.Now.ToString("yyyy")</p>
</footer>
</div>
#Scripts.Render(
"~/js",
Html.JsCultureBundle()
)
#RenderSection("Scripts", required: false)
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jasny-bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap.typeahead.js"></script>
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<script src="~/Scripts/jquery.maskMoney.min.js"></script>
<script src="~/Scripts/TwitterBootstrapMvcJs.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#prod_preco').maskMoney({ symbol: "", decimal: ",", thousands: "" });
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
language: 'pt-BR'
});
});
</script>
</body>
</html>
Keep in mind that, if I put the bootstrap.min.js line twice, the dropdown works... That's what's really bugging me.
Here is your updated fiddle : http://jsfiddle.net/01hf1obo/3/
Problems : You have not added framework of jquery on the top of bootstrap.min.js that is why bootstrap's js is not working and shown you that error. I have added it. Now your bootstrap dropdown is working fine. You can check it.
$(document).ready(function () {
$('#prod_preco').maskMoney({
symbol: "",
decimal: ",",
thousands: ""
});
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
});
});
body {
padding-top: 60px;
padding-bottom: 40px;
}
<title>Title</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand navbar-brand" href="~/Login">Sistema de pedidos</a>
<div class="nav-collapse"></div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="panel-default panel">
<div class="panel-heading"> <span style="font-size:medium">Administrador: Administradô</span>
<br /> <span style="font-size:large">Estabelecidimento: Bar da Galera</span>
</div>
<div class="panel-heading">
<div class="btn-group"><a class="btn btn-default" href="/Administrador/Index/1">Início</a>
<div class="btn-group"><a class="btn dropdown-toggle btn-default " data-toggle="dropdown" href="#">Produtos <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Listar produtos
</li>
<li>Adicionar produto
</li>
<li>Buscar produto
</li>
</ul>
</div>
<div class="btn-group"><a class="btn dropdown-toggle btn-default " data-toggle="dropdown" href="#">Estabelecimento <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Autorizar clientes
</li>
<li>Alterar cadastro do estabelecimento
</li>
<li>Visualizar pedidos
</li>
</ul>
</div><a class="btn btn-default" href="/Administrador/altCad/1">Alterar cadastro <i class="icon-cog"></i></a>
</div>
</div>
<div class="panel-body">
<br />
<br />
<label for="adm_estabelecimento_nome">Nome<span class="required" style="visibility:hidden;">*</span>
</label>: Bar da Galera
<button class="btn-default btn" data-target="#ModalNome" data-toggle="modal" type="button">Editar</button>
<br />
<label for="adm_estabelecimento_telefone">Telefone<span class="required" style="visibility:hidden;">*</span>
</label>: (32)13213-2131
<button class="btn-default btn" data-target="#ModalTel" data-toggle="modal" type="button">Editar</button>
<br />
<label for="adm_estabelecimento_CNPJ">C N P J<span class="required" style="visibility:hidden;">*</span>
</label>: 11.111.111/1111-11
<button class="btn-default btn" data-target="#ModalCNPJ" data-toggle="modal" type="button">Editar</button>
<br />
<label for="adm_estabelecimento_Endereco">Endereço<span class="required" style="visibility:hidden;">*</span>
</label>: Rua 1, Bairro 1
<label for="adm_estabelecimento_Endereco_numero">Nº<span class="required" style="visibility:hidden;">*</span>
</label> 312312 - Cidade 1
<button class="btn-default btn" data-target="#ModalEnd" data-toggle="modal" type="button">Editar</button>
<br />
<label for="adm_estabelecimento_Imagem">Foto<span class="required" style="visibility:hidden;">*</span>
</label>:
<br />
<div>
<img src="#" />
</div>
<br />
<button class="btn-default btn" data-target="#ModalFoto" data-toggle="modal" type="button">Editar</button>
<div class="modal fade" data-backdrop="false" id="ModalNome" tabindex="-1">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Digite o novo nome:</h4>
</div>
<form action="/Administrador/altEst/1" method="post">
<div class="modal-body">
<div class=" form-group">
<input name="__RequestVerificationToken" type="hidden" value="NBOOkrW3V41tYcHE225CcXpvASwluITjv6Z1DwBYBAnrtXpeV9nyx5ddZGp0R4xfBV3fc2VRvy-qhm3WAhmcCZSI0EVPPA5DdXtu2vFkzmg1" />
</div>
<div class=" form-group">
<input data-val="true" data-val-number="The field Estabelecimento_Id must be a number." data-val-required="O campo Estabelecimento_Id é obrigatório." id="adm_estabelecimento_Estabelecimento_Id" name="adm.estabelecimento.Estabelecimento_Id" type="hidden" value="1" />
</div>
<div class=" form-group">
<label class="control-label" for="adm_estabelecimento_nome">Nome<span class="required">*</span>
</label>
<input class="form-control" data-val="true" data-val-required="O campo Nome é obrigatório." id="adm_estabelecimento_nome" name="adm.estabelecimento.nome" type="text" value="Bar da Galera" /><span class="field-validation-valid" data-valmsg-for="adm.estabelecimento.nome" data-valmsg-replace="true"></span>
</div>
</div>
<div class="modal-footer">
<div class=" form-group">
<button class="btn-default btn" type="submit">Salvar</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" data-backdrop="false" id="ModalTel" tabindex="-1">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Digite o novo telefone:</h4>
</div>
<form action="/Administrador/altEst/1" method="post">
<div class="modal-body">
<div class=" form-group">
<input name="__RequestVerificationToken" type="hidden" value="gBl_YOCBjziWl_fk8D22ZwlGvy6q-zClnbAQ8Vrp_k3zN3PhuqC4X31AdgL3MiCmkTd_FCnoWDUY9U221c4Cbdrlg5IvgAwUxSaNq-TQm5k1" />
</div>
<div class=" form-group">
<input data-val="true" data-val-number="The field Estabelecimento_Id must be a number." data-val-required="O campo Estabelecimento_Id é obrigatório." id="adm_estabelecimento_Estabelecimento_Id" name="adm.estabelecimento.Estabelecimento_Id" type="hidden" value="1" />
</div>
<div class=" form-group">
<label class="control-label" for="adm_telefone">Telefone<span class="required">*</span>
</label>
<input class="form-control" data-mask="(99)99999-9999" data-val="true" data-val-required="O campo Telefone é obrigatório." id="adm_telefone" name="adm.telefone" type="text" value="(32)13213-2131" /><span class="field-validation-valid" data-valmsg-for="adm.telefone" data-valmsg-replace="true"></span>
</div>
</div>
<div class="modal-footer">
<div class=" form-group">
<button class="btn-default btn" type="submit">Salvar</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" data-backdrop="false" id="ModalCNPJ" tabindex="-1">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Digite o novo CNPJ:</h4>
</div>
<form action="/Administrador/altEst/1" method="post">
<div class="modal-body">
<div class=" form-group">
<input name="__RequestVerificationToken" type="hidden" value="tmVfA5rZHVJuBDOmsg1HqfxsczlU_EQVdwbqiAVSHcdjXI0xIKDKh-lU0xF6lHSBlj9eWkOctksiJRXFljgvfv_wII0Kf6pBVU72InD3UC01" />
</div>
<div class=" form-group">
<input data-val="true" data-val-number="The field Estabelecimento_Id must be a number." data-val-required="O campo Estabelecimento_Id é obrigatório." id="adm_estabelecimento_Estabelecimento_Id" name="adm.estabelecimento.Estabelecimento_Id" type="hidden" value="1" />
</div>
<div class=" form-group">
<label class="control-label" for="adm_estabelecimento_CNPJ">C N P J<span class="required">*</span>
</label>
<input class="form-control" data-mask="99.999.999/9999-99" data-val="true" data-val-maxlength="O campo CNPJ deve ser uma cadeia de caracteres ou tipo de matriz com comprimento máximo de '18'." data-val-maxlength-max="18" data-val-minlength="O campo CNPJ deve ser uma cadeia de caracteres ou tipo de matriz com comprimento mínimo de '18'." data-val-minlength-min="18" data-val-required="O campo CNPJ é obrigatório." id="adm_estabelecimento_CNPJ" name="adm.estabelecimento.CNPJ" type="text" value="11.111.111/1111-11" /><span class="field-validation-valid" data-valmsg-for="adm.estabelecimento.CNPJ" data-valmsg-replace="true"></span>
</div>
</div>
<div class="modal-footer">
<div class=" form-group">
<button class="btn-default btn" type="submit">Salvar</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" data-backdrop="false" id="ModalFoto" tabindex="-1">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Selecione a nova foto</h4>
</div>
<form action="/Administrador/altEst/1" enctype="multipart/form-data" method="post">
<div class="modal-body">
<div class=" form-group">
<input name="__RequestVerificationToken" type="hidden" value="7dljHIPBM2KzAkonDE9QyHO26bd1Ig0c-cVZIRFlA3b811-hVlRD9AHHR-H1qRlA5qb7lVA6vztym6prDL9GG07aajPh39D2LThZPdRxFjc1" />
</div>
<div class=" form-group">
<input data-val="true" data-val-number="The field Estabelecimento_Id must be a number." data-val-required="O campo Estabelecimento_Id é obrigatório." id="adm_estabelecimento_Estabelecimento_Id" name="adm.estabelecimento.Estabelecimento_Id" type="hidden" value="1" />
</div>
<img src="#" id="imgpre" />
<div class=" form-group">
<label class="control-label" for="img">Imagem<span class="required" style="visibility:hidden;">*</span>
</label>
<input id="img" name="img" type="File" value="" /><span class="help-block">Sua imagem será redimensionada para 300x300</span><span class="field-validation-valid" data-valmsg-for="img" data-valmsg-replace="true"></span>
</div>
</div>
<div class="modal-footer">
<div class=" form-group">
<button class="btn-default btn" type="submit">Salvar</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" data-backdrop="false" id="ModalEnd" tabindex="-1">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Digitie a nova senha:</h4>
</div>
<form action="/Administrador/altEst/1" method="post">
<div class="modal-body">
<div class=" form-group">
<input name="__RequestVerificationToken" type="hidden" value="xcW4SLur-iEK3Pp-a1LDGPOktEmJ7w8c9WPJw_6HphJX0rJ1H9VgnrzHjEHmEU1_JZcVdaQs3bjUQvUfgzTTJ5l0-poDIuF-K_ha8WXEMvg1" />
</div>
<div class=" form-group">
<input data-val="true" data-val-number="The field Estabelecimento_Id must be a number." data-val-required="O campo Estabelecimento_Id é obrigatório." id="adm_estabelecimento_Estabelecimento_Id" name="adm.estabelecimento.Estabelecimento_Id" type="hidden" value="1" />
</div>
<div class=" form-group">
<label class="control-label" for="adm_senha">Senha<span class="required">*</span>
</label>
<input class="form-control" data-val="true" data-val-required="O campo Senha é obrigatório." id="adm_senha" name="adm.senha" type="text" value="" /><span class="field-validation-valid" data-valmsg-for="adm.senha" data-valmsg-replace="true"></span>
</div>
</div>
<div class="modal-footer">
<div class=" form-group">
<button class="btn-default btn" type="submit">Salvar</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<hr>
<footer>
<p>Codifica ® 2014</p>
</footer>
</div>
</body>
maskMoney is not a function of bootstrap. it is function of any external js, so you need to also add reference of that js to your html
Done! All i had to do was add $('.dropdown-toggle').dropdown() in my javascript and it worked
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>