I m using the Bootstrap tab controller. Please check my sample
HTML
<div class="btn-group" role="group">
<button type="button" id="shares" class="btn btn-primary" href="#one" data-toggle="tab"><span
class="fa fa-address-card-o" aria-hidden="true"></span>
<div class="hidden-xs">One</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="shares" class="btn btn-primary" href="#two" data-toggle="tab"><span
class="fa fa-address-card-o" aria-hidden="true"></span>
<div class="hidden-xs">One</div>
</button>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="one">
One Content
</div>
<div class="tab-pane" id="two">
Two Content
</div>
</div>
I am using below jQuery code for highlighting a selected tab header.
$(document).ready(function() {
$(".btn").click(function () {
$(".btn").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
Tabs are working well with the above function. But I need to do this function using Angular JS. Could you advise me, please?
One of many ways
class AppController {
constructor() {
this.activeTab = 'One';
}
setActiveTab(tabName) {
this.activeTab = tabName;
}
isActiveTab(tabName) {
return tabName === this.activeTab;
}
}
angular.module('app', [])
.controller('appController', AppController);
angular.bootstrap(document.querySelector('#root'), ['app']);
html,
body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
<div id="root" ng-controller="appController as appController">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary" ng-class="{'active': appController.activeTab ==='One'}">
<input
ng-model="appController.activeTab"
type="radio"
name="options"
id="option1"
value="One"
> One
</label>
<label class="btn btn-primary" ng-class="{'active': appController.activeTab ==='Two'}">
<input
ng-model="appController.activeTab"
type="radio"
name="options"
value="Two"
id="option2"
> Two
</label>
</div>
<div class="tab-content">
<div class="tab-pane" ng-class="{'fade in active': appController.isActiveTab('One')}">
One Content
</div>
<div class="tab-pane" ng-class="{'fade in active': appController.isActiveTab('Two')}">
Two Content
</div>
</div>
</div>
Please check this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller='appController'>
<div class="btn-group" role="group">
<button type="button"
ng-init="tab_1=true;class_name_1 ='btn-primary';"
ng-click="class_name_1 ='btn-primary'; class_name_2='btn-default'; tab_1=true; tab_2=false"
class="btn {{class_name_1}}">
<span class="fa fa-address-card-o" aria-hidden="true"></span>
<div class="hidden-xs">One</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button"
ng-click="class_name_2 ='btn-primary' ; class_name_1='btn-default'; tab_2=true; tab_1=false"
class="btn {{class_name_2}}" >
<span class="fa fa-address-card-o" aria-hidden="true"></span>
<div class="hidden-xs">Two</div>
</button>
</div>
<div class="tab-content">
<div class="" ng-show="tab_1">
One Content
</div>
<div ng-show="tab_2">
Two Content
</div>
</div>
<script>
var app = angular.module('app', []);
app.controller('appController', function($scope) {
});
</script>
</body>
</html>
Related
all I am trying to show the calendar and input box when the user clicked on the radio button.
I have made one modal popup by using below code and
when I click on the send button it will open a modal popup with two radio buttons and when I click on the close popup with a reminder
button it will show calendar as well as input box.
Here is my code:
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Send</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">
<input type="radio" name="reminder">Close popup with reminder </br>
<input type="radio" name="reminder">Close popup without reminder
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Can anyone help me out how can I do that.
Here is the image reference
:
Make use of the bootstrap grid inside the modal then add change events to the radio button; if the radio button has a true value, it would show the .note div which contains the reminder, else hide it.
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Send</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">
<div class="row">
<div class="col-xs-6">
<input class="radio-reminder" type="radio" name="reminder" value="true" /> Close popup with reminder
</div>
<div class="col-xs-6 date" style="display:none;">
<input class="form-control" type="date" />
</div>
</div>
<div class="row note" style="display:none;">
<div class="col-xs-12">
<br>
<input class="form-control" placeholder="Reminder" />
</div>
</div>
<div class="row no-reminder">
<div class="col-xs-6">
<br/>
<input class="radio-reminder" type="radio" name="reminder" value="false" /> Close popup without reminder
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(".radio-reminder").change(function() {
if ($(this).val() == "true") {
$(".note").show();
$(".date").show();
$(".newSelect").remove();
} else {
$(".note").hide();
$(".date").hide();
var newSelect = $("<div class='col-xs-6 newSelect'><br><select class='form-control'><option>1</option><option>2</option></select></div>")
$(newSelect).appendTo($(".no-reminder"));
}
});
});
</script>
</body>
</html>
At first, you have to include the input elements in the HTML. Then you can use jQuery to hide/show those elements based on the value of the clicked radio button.
Please note that how I have added value attribute to the radio buttons.
$('input[name=reminder]').click(function(){
if($(this).val() == "1")
$('#inputDate, #inputText').css({'display': 'block'});
else
$('#inputDate, #inputText').css({'display': 'none'});
});
input[type=date]{
float: right;
}
#inputDate, #inputText{
display: none;
}
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Send</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">
<input type="radio" name="reminder" value="1">Close popup with reminder <input type="date" id="inputDate"/>
<br>
<input type="text" id="inputText"/>
<br>
<input type="radio" name="reminder" value="2">Close popup without reminder
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
use below code snippet
$('input[type=radio]').on('change', function() {
if($(this).val() == 'calendar'){
$('#date-input').show();
$('#calendar').show();
$('#selectGroup').hide();
}else{
$('#date-input').hide();
$('#calendar').hide();
$('#selectGroup').show();
}
});
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Send</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">
<input type="radio" name="reminder" value="calendar"> Close popup with reminder
<input type="date" id="calendar" style="display: none;" />
<br/>
<input type="text" value="" id="date-input" style="display: none;" />
<br/>
<input type="radio" name="reminder"> Close popup without reminder
<br/>
<div class="form-group" id="selectGroup" style="display: none;">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm using the bootstrap ready date time picker from http://eonasdan.github.io/bootstrap-datetimepicker/ .
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm'
});
});
And this:
<div class="row">
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:10m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:15m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:20m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:30m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:45m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">01h:00m</button>
</div>
</div>
<div class="row">
<div class='col-sm'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3' style="width: 40%">
<input id="timepicker" name="timepicker" type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
I've 6 buttons that when I click on its time it automatically changes the time in the datapicker.
I can't do the function that updates the time, what an idea?
For setting as text value use $("#datetimepicker3").find("input").val(text); and for setting as time value use $('#datetimepicker3').data("DateTimePicker").date(text);
1. Bind the click event on each button by class.I used .btn as example.
2. Get button text by $(this).text() and replace/remove h and m to set the value as text on datetimepicker.
3. set the value using $("#datetimepicker3").find("input").val(text);
$(".btn").on('click', function(e) {
var text = $(this).text().replace("h","").replace("m","");
$("#datetimepicker3").find("input").val(text);
//$('#datetimepicker3').data("DateTimePicker").date(text);//select based on requirement
});
Working snippet for your code:
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'hh:mm'
});
});
$(".btn").on('click', function(e) {
var text = $(this).text().replace("h","").replace("m","");
//$('#datetimepicker3').data("DateTimePicker").date(text);
$("#datetimepicker3").find("input").val(text);
});
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="./css/prettify-1.0.css" rel="stylesheet">
<link href="./css/base.css" rel="stylesheet">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="row">
<div class='col-sm-1'>
<button type="button" id="button1" class="btn btn-secondary btn-sm">00h:10m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:15m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:20m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:30m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:45m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">01h:00m</button>
</div>
</div>
<div class="row">
<div class='col-sm'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3' style="width: 40%">
<input id="timepicker" name="timepicker" type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
You can set time with date function:
$('#datetimepicker3').data("DateTimePicker").date("00:25");
How to close popup modal after the checkbox is checked and then the button is clicked?
If checkbox is not checked then not to close modal. Checkbox and button placed inside modal. When I checking the checkbox and clicking the button modal is not closing.
$(document).ready(function(){
$('.one:checked').on('click' , '.close_model' , function(){
dialog('close');
});
});
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">
<button type="button" class="close_model btn btn-danger">button</button>
<input type="checkbox" name="ch" class="one">
<input type="checkbox" name="ch" class="one">
<input type="checkbox" name="ch" class="one">
<input type="checkbox" name="ch" class="one">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">
<input type="hidden" name="txt1" id="textbox1">
<button type="button" class="close_model btn btn-danger">button</button>
<input type="checkbox" name="ch" class="one" value="1">
<input type="checkbox" name="ch" class="one" value="2">
<input type="checkbox" name="ch" class="one" value="3">
<input type="checkbox" name="ch" class="one" value="4">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".close_model").on("click",function(){
if($('#textbox1').val() == 'true'){
$('.close').trigger('click');
}else{
alert('pls click on checkbox');
}
});
$('.one').change(function() {
if(this.checked) {
$(this).prop("checked", 'true');
}
$('#textbox1').val(this.checked);
});
});
</script>
</body>
</html>
change close button code like this
<button type="button" class="btn btn-default close">Close</button>
and then add this JQuery code
$('.close').click(function(){
if ($('.one').is(':checked'))
{
$("#myModal").modal('toggle');
}
})
here you go working sample
Hi there create a function and ad the function to button click event.
<button type="button" class="close_model btn btn-danger" onclick="CheckChecked();">button</button>
Function CheckChecked()
{
var x = document.getElementById("ch").checked;
if (x)
{
$('#myModal').modal('hide');
}
}
$("#selectItem").click(function(){
var value = $("input[type='radio']:checked").val();
$('#town').val(value);
$("#myModal").modal('hide');
});
<button type="button" id="selectItem" name="selectItem" class="btn btn-primary">Select</button>
The above code worked for me
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 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