I have bootstrap tabs implementation when i click on title its not toggling and also when i click on tabs its redirecting to home page its not going into panel body , I spent alot of time but could not figure out the issue. Any help will be appreciated.
So far tried code....
HTML
<div class="panel panel-default">
<div class="panel-body" collapse="isCollapsed">
<accordion close-others="false">
<accordion-group heading="Process Rating" is-open="status.isMetricBaseOpen">
<accordion-heading>
<small>Process Rating <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isMetricBaseOpen, 'glyphicon-chevron-right': !status.isMetricBaseOpen}"></i></small>
</accordion-heading>
<!-- Process edit mode -->
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Line of Business
Ratings</a></li>
<li role="presentation">Compliance Ratings</li>
</ul>
<div class="row tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-11">
<button require-control-point="PROCESS_RATING_ADD"
class="btn btn-default pull-right " type="button"
ng-click="gotoQstnPage(1)" ng-disabled="disableRiskRatingBtn">Create
Inherent Risk Rating</button>
</div>
</div>
<strong>Inherent Risk Ratings</strong>
<div kendo-grid="ihtRskRatingGrid"
options="ihtRskRatingGridOptions"></div>
<br /> <strong>Process Ratings</strong>
<div kendo-grid="processRatingGrid"
options="processRatingGridOptions">
<div kendo-window="ProcessRatingWin" options="PrtWinOptions"></div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="profile">THis is compliance </div>
</div>
</accordion-group>
</div>
Make sure you have embeded javascript and jquery at the end of the page,
Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Javascript
<script src="js/bootstrap.min.js"></script>
Or See below your code is working
<!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>Bootstrap Template</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="panel-group" id="accordion" >
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse"
href="" data-target="#collapseProcessRating">Process Rating</a>
</h4>
</div>
<!-- Process edit mode -->
<div id="collapseProcessRating" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Line of Business
Ratings</a></li>
<li role="presentation">Compliance Ratings</li>
</ul>
<div class="row tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-11">
<button require-control-point="PROCESS_RATING_ADD"
class="btn btn-default pull-right " type="button"
ng-click="gotoQstnPage(1)" ng-disabled="disableRiskRatingBtn">Create
Inherent Risk Rating</button>
</div>
</div>
<strong>Inherent Risk Ratings</strong>
<div kendo-grid="ihtRskRatingGrid"
options="ihtRskRatingGridOptions"></div>
<br /> <strong>Process Ratings</strong>
<div kendo-grid="processRatingGrid"
options="processRatingGridOptions">
<div kendo-window="ProcessRatingWin" options="PrtWinOptions"></div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="profile">THis is compliance </div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Related
I created list group as following :
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<!--bootstrap scripts-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--end bootsripts-->
</head>
<body>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#s">Default</button>
<div class="modal" tabindex="-1" role="dialog" id="s">
<div class="modal-dialog modal-lg modal-dialog-scrollable" >
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-6 col-sm-6 col-xl-6">
<h5 class="text-danger">Main Catagories</h5>
<div class="list-group"style="width:100px;border:none">
Vehical
Property
</div>
</div>
<div class="col-6">
<div class="list-group list-group-flush" style="width:100px;border:none" >
<div class="list-group collapsing" id="vehical" data-toggle="collapse" style="width:100px;border:none" >
Vehical1
Vehical2
Vehical3
Vehical4
Vehical5
</div>
<div class="list-group collapsing" id="property" data-toggle="collapse" style="width:100px;border:none">
Property1
Property2
Property3
Property4
Property5
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Java Scripts-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<!--end of java scripts-->
</body>
</html>
When click Main Category Sub category will display on next column.but it display as enter image description here
I need when I click new main category button ,It shows sub category in right pannel which is related to Main Category.How ever after that when click another main category button both sub categories shows in right panel but I want shows only subcategory items related to which is click main category.I use bootstrap 4 version
Answering late but I think it would be helpful for somebody else facing the same issue.
Actually you were missing some attributes needed to do the tabbing on the list-group. Check the below code snippet to get the idea.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>test</title>
<!--bootstrap scripts-->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<!--end bootsripts-->
</head>
<body>
<button
type="button"
class="btn btn-default"
data-toggle="modal"
data-target="#s"
>
Default
</button>
<div class="modal" tabindex="-1" role="dialog" id="s">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-4 col-sm-4 col-xl-4">
<h5 class="text-danger">Main Catagories</h5>
<div class="list-group" style="width: 100px; border: none">
<a
class="list-group-item list-group-item-action active"
id="list-vehicle-list"
data-toggle="list"
href="#list-vehicle"
role="tab"
aria-controls="vehicle"
>Vehicle</a
>
<a
class="list-group-item list-group-item-action"
id="list-property-list"
data-toggle="list"
href="#list-property"
role="tab"
aria-controls="property"
>Property</a
>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div
class="tab-pane fade show active"
id="list-vehicle"
role="tabpanel"
aria-labelledby="list-vehicle-list"
>
<a href="#" class="list-group-item list-group-item-action"
>Vehical1</a
>
<a href="#" class="list-group-item list-group-item-action"
>Vehical2</a
>
<a href="#" class="list-group-item list-group-item-action"
>Vehical3</a
>
<a href="#" class="list-group-item list-group-item-action"
>Vehical4</a
>
<a href="#" class="list-group-item list-group-item-action"
>Vehical5</a
>
</div>
<div
class="tab-pane fade"
id="list-property"
role="tabpanel"
aria-labelledby="list-property-list"
>
<a href="#" class="list-group-item list-group-item-action"
>Property1</a
>
<a href="#" class="list-group-item list-group-item-action"
>Property2</a
>
<a href="#" class="list-group-item list-group-item-action"
>Property3</a
>
<a href="#" class="list-group-item list-group-item-action"
>Property4</a
>
<a href="#" class="list-group-item list-group-item-action"
>Property5</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Java Scripts-->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"
></script>
<!--end of java scripts-->
</body>
</html>
The problem is on clicking the item in the popup modal, the data-value is reflecting all the input fields
I have tried this code and it works with that but it is also changing others. The data value should reflect on the particular input field only. currently it is changing all the previous and next input fields
function openmodal(e) {
//prevent(default);
//document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
$('#myModal').modal('show');
$(document).on("click", ".hello", function(event){
event.preventDefault();
e.value=$(this).attr("data-id");
alert(e.value);
$('#myModal').modal('hide');
});
}
<!DOCTYPE html>
<html lang="en">
<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/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<input id="image1" onclick="openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<input id="image2" onclick="openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<input id="image3" onclick="openmodal(this);"/>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<a class="hello" data-id="2">2</p>
<a class="hello" data-id="3">3</p>
<a class="hello" data-id="4">4</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Try this:
function openmodal(input) {
$('#myModal').modal('show');
$(".hello").unbind().click(function(event){
$(input).val($(this).attr("data-id"));
$('#myModal').modal('hide');
});
}
<!DOCTYPE html>
<html lang="en">
<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/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<input id="image1" onclick="return openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<input id="image2" onclick="return openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<input id="image3" onclick="return openmodal(this);"/>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<a class="hello" data-id="2" >2</p>
<a class="hello" data-id="3" >3</p>
<a class="hello" data-id="4" >4</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have below html. It consists of bootstrap and css url file. And It has two accordion item tab. But find that it has javascript error when open. And when I click on the accordion, it does not show answer. Is there any wrong??
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h3>Default collapse with scaling icon</h3>
<div class="panel-group" id="faqAccordion0">
FAQ Sample Test
<div class="panel panel-default ">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-toggle="collapse" data-parent="#faqAccordion0" data-target="#0">
<h4 class="panel-title">
<a href="#" class="ing">
Testing Question 1 Title
</a>
</h4>
</div>
<div id="0" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary">Answer</span></h5>
Testing Question 1 Content
</div>
</div>
</div>
<div class="panel panel-default ">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-toggle="collapse" data-parent="#faqAccordion0" data-target="#1">
<h4 class="panel-title">
<a href="#" class="ing">
Testing Question 2 Title
</a>
</h4>
</div>
<div id="1" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary">Answer</span></h5>
Testing Question 2 Content
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The error tells you need to include jQuery also.
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
Make sure you included jQuery before including bootstrap.js script
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Included jQuery right before bootstrap.js -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h3>Default collapse with scaling icon</h3>
<div class="panel-group" id="faqAccordion0">
FAQ Sample Test
<div class="panel panel-default ">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-toggle="collapse" data-parent="#faqAccordion0" data-target="#0">
<h4 class="panel-title">
<a href="#" class="ing">
Testing Question 1 Title
</a>
</h4>
</div>
<div id="0" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary">Answer</span></h5>
Testing Question 1 Content
</div>
</div>
</div>
<div class="panel panel-default ">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-toggle="collapse" data-parent="#faqAccordion0" data-target="#1">
<h4 class="panel-title">
<a href="#" class="ing">
Testing Question 2 Title
</a>
</h4>
</div>
<div id="1" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary">Answer</span></h5>
Testing Question 2 Content
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I want to hide the text "Enter Password" and the blank box first and show when I click the radio "Private". My code is following. However, it does not work since when I click the "create a new room", the "Enter Password" has already showed in the modal content, and nothing happened when I click Private. How can I fix my code? Thank you so much!
<!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>Create Role</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script>
$(document).ready(function(){
$("#pwd, #pwdblank").hide();
$("#inlineRadio2").click(function(){
$("#pwd, #pwdblank").show(500);
});
});
</script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Rooms</li>
<li><a data-toggle="modal" data-target="#createRoomModal">Create New Room</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Logout</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
</div>
</div>
<div id="createRoomModal" class="modal fade" role="dialog">
<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">Create a new room</h4>
</div>
<div class="modal-body">
<form id="form_room" method="post" action="/create-room">
<fieldset class="form-group">
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="room_type" id="inlineRadio1" value="public"> Public
</label>
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="room_type" id="inlineRadio2" value="private"> Private
</label>
<label class="form-check-inline">
<p id="pwd">Enter password</p>
<input class="form-check-input" type="text" name="text" id="pwdblank">
</label>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" form="form_room">Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script-index.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
Hello See The Below One Hope you are looking for this...
$(document).ready(function(){
$("#pwd, #pwdblank").hide();
$("#inlineRadio2").click(function(){
$("#pwd, #pwdblank").show(500);
});
$("#inlineRadio1").click(function(){
$("#pwd, #pwdblank").hide(500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script-index.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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>Create Role</title>
<!-- Latest compiled and minified CSS -->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Rooms</li>
<li><a data-toggle="modal" data-target="#createRoomModal">Create New Room</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Logout</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
</div>
</div>
<div id="createRoomModal" class="modal fade" role="dialog">
<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">Create a new room</h4>
</div>
<div class="modal-body">
<form id="form_room" method="post" action="/create-room">
<fieldset class="form-group">
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="room_type" id="inlineRadio1" value="public"> Public
</label>
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="room_type" id="inlineRadio2" value="private"> Private
</label>
<label class="form-check-inline">
<p id="pwd">Enter password</p>
<input class="form-check-input" type="text" name="text" id="pwdblank">
</label>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" form="form_room">Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Use show.bs.modal event as follows
$('#myModal').on('show.bs.modal', function (e) {
// do something...
// this code runs just before the modal is shown
// hide your field here
});
Use documentation reference here
<!doctype html>
<html>
<head>
<title>title</title>
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/bootstrap.css"/>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="img/logo.png" id="logo" class="img-responsive">
</div>
<div class="col-md-4" id="searchbox">
<div id="search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg"/>
</div>
</div>
</div>
<div class="col-md-1" id="search-button">
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<img src="img/search.png" class="img-responsive"/>
</button>
<span>
</div>
<div class="col-md-3" id="login-name">
<p> Logged in: John Smith </p>
</div>
<div class="col-md-1">
<img src="img/settings.png" id="settings-icon" class="img-responsive"/>
</div>
</div>
<div class="row">
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Projects</li>
<li>News</li>
<li>Careers</li>
<li class="active" id="active-link">Contact Us</li>
<li>About Us</li>
<li>Case Studies</li>
<li>Blog</li>
<li>Customers</li>
<li class="dropdown">
<ul class="dropdown-menu">
<li>Home</li>
<li>Projects</li>
<li>News</li>
<li>Careers</li>
<li class="active">Contact Us</li>
<li>About Us</li>
<li>Case Studies</li>
<li>Blog</li>
<li>Customers</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</nav>
</div>
<div class="row" id="banner-top-row">
<div class="col-md-12" id="banner-top-col">
<img src="img/banner-top.png" id="banner-top" class="img-responsive center-block"/>
<div class="banner-information text-center">
<h4> For more information.... </h4>
<h1> Contact Us </h1>
</div>
</div>
<div class="row" id="detail-request">
<div class="col-md-12">
<h1> Send us your details to request our latest brochure <h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="map-holder-image">
<img src="img/map-holder.png" class="img-responsive"/>
</div>
</div>
<form class="form">
<div class="form-group col-xs-4 col-md-4">
<label for="first-name" class="control-label">First Name</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="email-address" class="control-label">Email</label>
<input type="email" class="form-control" id="email-address">
</div>
<br>
<div class="form-group col-xs-4 col-md-4">
<label for="last-name" class="control-label">Last Name</label>
<input type="text" class="form-control" id="last-name">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="confirm-email-address" class="control-label">Confirm Email</label>
<input type="email" class="form-control" id="confirm-email-address">
</div>
<div class="form-group col-xs-4 col-md-4">
<input type="hidden" id="date-dropdown">
<script>
$("#date-dropdown").dateDropdowns({
defaultValue: "2010-02-17"
});
</script>
</div>
<div class="form-group col-xs-4 col-md-4">
</div>
<div class="col-md-4">
<button class="btn btn-info btn-lg" id="submit-button" type="button">
<h3>Submit</h3>
</button>
</div>
</form>
</div>
<div class="row">
<div class="col-md-12">
<div class="support-box">
<h3>Start a Live Chat with one of our Tech Team</h3>
<button class="btn btn-info btn-lg" id="support" type="button">
<h3>Start</h3><img src="img/button-icon-livechat.png" id="support-image" class="img-responsive"/>
</button>
</div>
<div class="support-box">
<h3>Start a Skype Call with one of our Sales Team</h3>
<button class="btn btn-info btn-lg" id="support" type="button">
<h3>Start</h3><img src="img/button-icon-skype.png" id="support-image" class="img-responsive"/>
</button>
</div>
<div class="support-box">
<h3>Send an email to our Customer Services Team</h3>
<button class="btn btn-info btn-lg" id="support" type="button">
<h3>Start</h3><img src="img/button-icon-email.png" id="support-image" class="img-responsive"/>
</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" id="banner-bottom-row">
<div class="col-md-12" id="banner-bottom-col">
<img src="img/banner-bottom.png" id="banner-bottom" class="img-responsive center-block"/>
<div class="banner-information text-center">
<h4> We will be in touch </h4>
<h1> Thank you </h1>
</div>
</div>
</div>
<div class="row" id="footer">
<p>Terms and Conditions | Privacy Policy | Copyright Code 2016</p>
<hr id ="footer-line">
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-date-dropdowns.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
https://gyazo.com/06ad94c6b0c0b173da9dfd1d95bb02f6 here is my browser loading in the jquery js. My error message is
contact-us.html:121 Uncaught ReferenceError: $ is not defined(anonymous function) # contact-us.html:121
Move the jquery library to the head of your page
<script type="text/javascript" src="js/jquery.min.js"></script>
This should solve it.
The $ is not defined(anonymous function) means jQuery hasn't been loaded yet
Your jQuery selector is incorrect in two ways:
"example1" is looking for an element called <example1>, which of course doesn't exist. To select an element by its id, prepend a # character.
Your element's id is example3.
Try:
$("#example3")