I used following code to add search options in navigation bar. it's showing but i didn't get click action for this,eg : i want get action from javascript while user click on enter button in search and user click on search button.
<div class="col-xs-12 col-sm-4">
<div><h6>Search book here</h6></div>
<form role="search">
<div class="input-group form-group" id="search-form">
<input type="text" class="form-control" placeholder="Search title" name="search" id="search" >
<div class="input-group-btn">
<button class="btn btn-default" type="submit" id='search-button'><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
Thanks advance.
Yes because you need to supply it with a ng-click directive made by angularjs. You can do:
var app = angular.module('YourApp', [])
app.controller('myCtrl', ["$scope",
function($scope) {
$scope.search= function() {
alert("Searching")
}
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div ng-app="YourApp" ng-controller="myCtrl" class="col-xs-12 col-sm-4">
<div>
<h6>Search book here</h6>
</div>
<form role="search">
<div class="input-group form-group" id="search-form">
<input type="text" class="form-control" placeholder="Search title" name="search" id="search">
<div class="input-group-btn">
<button class="btn btn-default" ng-click="search()" type="submit" id='search-button'><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
Or
Using on-click provided by vanilla.js:
function search(){
alert("Searching");
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="col-xs-12 col-sm-4">
<div>
<h6>Search book here</h6>
</div>
<form role="search">
<div class="input-group form-group" id="search-form">
<input type="text" class="form-control" placeholder="Search title" name="search" id="search">
<div class="input-group-btn">
<button class="btn btn-default" onclick="search()" type="submit" id='search-button'><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
Related
I am having form in Bootstrap. This form popups on button. In form I have input field in which I want to make jQuery datepicker. It never displays when clicking on input field
In my head I have included this files:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.3.0/dist/bootstrap-vue.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
<script src="config.js"></script>
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.5.1"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
My modal code is this
<!-- Modal: modalAddContract -->
<!-- Datepicker - MS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(function() {
$(document).on("click", ".modal-body", function () {
$("[data-toggle='datepicker']").datepicker({
dateFormat: 'yy-mm-dd',
parentEl: '#dispatch_modal'
});
});
});
</script>
<form id="addContractForm">
<div class="modal fade" id="modalAddContract" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div id="new-contract-app" class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center w-100 font-weight-bold lang" key="langAddContract"></h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="lang" key="langDevice" for="addContractFormDeviceID"></label>
<select class="form-control" id="addContractFormDeviceID">
<option v-for="device in vueDevices.items" :value="device.id">
{{ device.device_type }} - {{ device.device_description }} ({{ device.id }})
</option>
</select>
</div>
<div class="form-group">
<label class="lang" key="langContractDescription" for="addContractContractDescription"></label>
<input type="text" class="form-control" id="addContractContractDescription">
</div>
<b><div class="lang" key="langAddContractInstrTop"></div></b><br>
<div class="row align-items-end">
<div class="form-group col">
<label class="lang" key="langDateFrom" for="addContractFormDateFrom"></label>
<input data-toggle="datepicker" type="text" class="form-control" id="addContractFormDateFrom" placeholder="YYYY-MM-DD">
</div>
<div class="form-group col">
<label class="lang" key="langDateTo" for="addContractFormDateTo"></label>
<input data-toggle="datepicker" type="text" class="form-control" id="addContractFormDateTo" placeholder="YYYY-MM-DD">
</div>
</div>
<hr>
<b><div class="lang" key="langAddContractInstrMid"></div></b><br>
<div class="row align-items-end">
<div class="form-group col-6">
<label class="lang" key="langDeviceUser" for="addContractFormDeviceUser"></label>
<input type="text" class="form-control" id="addContractFormDeviceUser" v-model="inputUser">
</div>
<div class="form-group col-3" style="padding-right: 0px">
<label class="lang" key="langUserPart" for="addContractFormUserPart"></label>
<input type="text" class="form-control" id="addContractFormUserPart" v-model="inputPart" onkeyup="$('#addContractFormUserPart').val($('#addContractFormUserPart').val().replace(',','.'))">
</div>
<div class="form-group col-3">
<b-button block variant="outline-success" class="float-right lang" key="langAddUser" #click="addUser"></b-button>
</div>
</div>
<ul>
<li>{{ owner }}, delež: {{ computedPart }}</li>
<li v-for="user in users">{{ user.email }}, delež: {{ user.usage_part }} <span v-on:click="removeUser(user)" style="color:red"><span class="lang" key="langRemove"></span> <i class="fas fa-times"></i></span></i></li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary lang" key="langCancel" data-dismiss="modal" #click="resetAddContractForm"></button>
<button id="addContractButton" type="button modal-dialog-centered" class="btn btn-primary lang" key="langAddContract" #click="addContract"></button>
</div>
</div>
</div>
</div>
And also in the end of my code I have those scripts
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script
<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script
<script src="lib/mobile-nav/mobile-nav.js"></script>
<script src="lib/p2r/jquery.p2r.min.js"></script>
Funny is that if I create new .html file and include just tags which are within the and only one input field my code works fine.. SO i guess there is a problem with the modal or popup.. I don't know how to fix it.. THank you
I am trying to implement bootstrap login Modal functionality in my code, but the output is not showing screen is not showing it.
Here is the output to the screen
The red box in the image is where I want my Login Modal to be shown.
I have tried using the inspect element, to check the issue with my code, but it is also not displaying it.
But it is showing this error
popper.min.js:4 Uncaught SyntaxError: Unexpected token 'export'
Header files attached:
<head>
<!-- Required meta tags always come first -->
<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">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/popper.min.js"></script>
<script src="https://kit.fontawesome.com/4ccd9cbb4a.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
<title>Ristorante Con Fusion</title>
</head>
Login Modal Code:
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
Use the getbootstap link for popper js instead of cdn link
<script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js
"></script>
I am trying to implement a simple datepicker in jQuery but I am getting an error like 'datepicker not a function'. Really donot understand why and not able to know where I made the mistake. I have also added jQuery in the bundles and the bundle script is rendered in _Layout page and the script is added in the view but no luck. Could anybody help on what the problem is.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Reports</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/themes/base/datepicker.css" rel="stylesheet" />
<link href="~/Content/themes/ui-lightness/jquery-ui.ui-lightness.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function () {
var j = $.noConflict(true);
$("#fromdate").datepicker();
});
});
</script>
</head>
<body>
<div class="container">
<!-- Form Starts-->
<form name="PTTReport" style="padding-top:20px">
<div class="panel panel-primary">
<div style="padding-bottom:25px" class="panel-heading fixed_panel">
<span>Report Filters</span>
</div>
<div class="panel-body">
<div class="row">
#*From*#
<label class="col-sm-1">From</label>
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="form-control" id="fromdate">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div><!-- /input-group -->
</div>
#*To*#
<label class="col-sm-1">To</label>
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div><!-- /input-group -->
</div>
</div>
<!--Submit Button-->
<div class="col-sm-10"></div>
<div class="col-sm-2">
<button type="submit" class="btn btn-primary text-center">View Projects</button>
</div>
</div>
</div>
Console error clearly shows that it cant find file paths.
try this:
jQuery .css and .js files source
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
JS
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Body of HTML
<body>
<p>Enter Date: <input type = "text" id = "datepicker"></p>
</body>
try the following:
var $j = jQuery.noConflict();
$j("#fromdate").datepicker();
Always check your browser console and network calls to make certain its loading all required files or not first.
$.datepicker() is not a function.
It clearly shows that it can't recognize the base script where this function is defined. Using ~ to define relative paths certainly is not loading your jquery/jquery-ui scripts. If you want to make sure you can check this code here and it works!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Reports</title>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"
integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw="
crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$(function () {
//var j = $.noConflict(true);
$("#fromdate,#todate").datepicker();
});
});
</script>
</head>
<body>
<div class="container">
<!-- Form Starts-->
<form name="PTTReport" style="padding-top:20px">
<div class="panel panel-primary">
<div style="padding-bottom:25px" class="panel-heading fixed_panel">
<span>Report Filters</span>
</div>
<div class="panel-body">
<div class="row">
#*From*#
<label class="col-sm-1">From</label>
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="form-control" id="fromdate">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div><!-- /input-group -->
</div>
#*To*#
<label class="col-sm-1">To</label>
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="form-control" id="todate">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div><!-- /input-group -->
</div>
</div>
<!--Submit Button-->
<div class="col-sm-10"></div>
<div class="col-sm-2">
<button type="submit" class="btn btn-primary text-center">View Projects</button>
</div>
</div>
</div>
I added jquery and jquery-ui from cdn and are working fine, make sure you added your jquery-ui script tag after jquery.
Updated JS Bin is here.
What to do next
Use '/' as relative path for linking your css and scripts that will solve your problem.
I am getting an error when i am using datepicker .The code breaks at datepicker.js
Here I am attaching my code
datepicker.js
$(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
the html page where my datepicker should be displayed:
ReportDetails.html
<div ng-controller="headerCtrl">
<div class="container" style="padding-top:20px;">
<div ng-app="TimeSheet" data-ng-controller="headerCtrl" class="container">
<div ng-show="error" class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<p>{{ error }}</p>
</div>
<p><a data-ng-click="showadd()" href="javascript:;" class="btn btn-primary">Generate Report</a></p>
<div class="modal fade" id="userModel" 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>
<h4 class="modal-title" id="myModalLabel" ng-hide="editMode">Add Project ID</h4>
<h4 class="modal-title" id="myModalLabel" ng-show="editMode">Edit Project ID</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" name="adduserform">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">UserID</label>
<div class="col-sm-10">
<select data-ng-model="user.userid" class="form-control" id="title" required>
<option value="" selected="selected">(Select User ID)</option>
<option value="user1">user1</option>
<option value="user2">user2</option>
<option value="user3">user3</option>
<option value="user4">user4</option>
</select>
<!--<input type="text" data-ng-model="user.userid" class="form-control" id="title" placeholder="Enter your User ID" required title="Enter your UserID" />-->
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Status</label>
<div class="col-sm-10">
Active <input name="Status" type="radio" data-ng-model="user.ResultStatus" value="Active" required title="Choose status">
In-Active <input name="Status" type="radio" data-ng-model="user.ResultStatus" value="InActive" required title="Choose status">
</div>
</div>
<div class="form-group">
<label for="startDate" class="col-sm-2 control-label">Date</label>
<div class="col-sm-10">
<input name="startDate" data-ng-model="user.date" id="startDate" class="date-picker" />
<!--<input type="text" data-ng-model="user.projectid" class="form-control" id="title" placeholder="Enter your Project ID" required title="Enter your ProjectID" />-->
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<span data-ng-hide="editMode">
<input type="submit" value="Add" ng-disabled="adduserform.$invalid" data-ng-click="add()" class="btn btn-primary" />
</span>
<span data-ng-show="editMode">
<input type="submit" value="Update" ng-disabled="adduserform.$invalid" data-ng-click="update()" class="btn btn-primary" />
</span>
<input type="button" value="Cancel" data-ng-click="cancel()" class="btn btn-primary" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<h1>Headers List</h1>
<table class="table table-hover">
<tr>
<td><strong>User ID</strong></td>
<th>Status</th>
<th>Action</th>
</tr>
<tr data-ng-repeat="user in users">
<td>
<p>{{ user.userid }}</p>
</td>
<td>
<p>{{ user.ResultStatus }}</p>
</td>
<td>
<p>
<a data-ng-click="edit(user)" href="javascript:;">Edit</a>
</p>
</td>
</tr>
</table>
<hr />
</div>
</div>
</div>
My main page - index.html where you can find all the file imports
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title></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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/bootstrap-theme.css" rel="stylesheet" />
<script src="../lib/angular.js"></script>
<script src="../lib/jquery-1.11.1.js"></script>
<script src="../lib/bootstrap.js"></script>
<script src="../app.js"></script>
<script src="../Controller/HeaderCtrl.js"></script>
<script src="Scripts/jquery-ui-1.10.4.js"></script>
<link href="../css/index.css" rel="stylesheet" />
<script src="../lib/datepicker.js"></script>
</head>
<body ng-controller="headerCtrl">
<div class="navbar navbar-inverse navbar-fixed-left">
<p>
<br />
</p>
<b><a class="navbar-brand" href="#" style="color:white">Administrator</a></b>
<ul class="nav navbar-nav">
<li>Header Details</li>
<li>Project ID Creation</li>
<li>Report Details</li>
<li>Display all submission for verify</li>
</ul>
<b><a class="navbar-brand" href="#" style="color:white">User</a></b>
<ul class="nav navbar-nav">
<li>Timesheet Information</li>
</ul>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<ul id="login_signup">
<li>Login <span>◀</span></li>
<li>SignUp <span>◀</span></li>
</ul>
</div>
<div class="page-content">
<div ng-view>
</div>
</div>
</body>
</html>
code snippet from index.css
.ui-datepicker-calendar {
display: none;
}
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