How to hide an element within modal fade - javascript

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

Related

Bootstrap tab active tab color

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>

Bootstrap Modal is not executing properly

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>

Onclicking on radio button show calender and as well as one input box in jquery

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>

bootstrap modal disappearing

I am having issues creating a module where it displays if the submission is valid (based on factors outside of the code- ex. the length of a string is acceptable).
When everything passes the test submits and then the modal pops up but disappears in about .5 seconds. Is there a way to make it stay longer?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="faviconmoney.ico"/>
<meta charset="utf-8">
<title>Employee Info</title>
<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div>
<ul class="nav nav-pills">
<li role="presentation" class="active">Expenses</li>
<li role="presentation">Employee Data</li>
<li role="presentation">Logout</li>
</ul>
<hr />
</div>
<div>
<form role="form" method="post" id="user">
<div class="col-md-4">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username" value="${user.uUserName}">
</div>
<div class="form-group">
<label for="first name">First Name:</label>
<input type="text" class="form-control" id="first name" name="firstname" value="${user.uFirstName}">
</div>
<div class="form-group">
<label for="last name">Last Name:</label>
<input type="text" class="form-control" id="last name" name="lastname" value="${user.uLastName}">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" value="${user.uEmail}">
</div>
<button type="submit" class="btn btn-default" id="modelSubmit1" a href="#myModal" data-toggle="modal" datatarget="#myModal">Submit</button>
</div>
</form>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel">
Your changes have been submitted and updated!
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</body>
</html>

Load jquery(.min).js before bootstrap(.min).js.
As a rule of thumb, don't expect files from different versions of the same library/plugin to work well together. You are using Bootstrap .css from v.3.7.7 and .js from version v3.1.0.
Working example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel">
Your changes have been submitted and updated!
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Submit
As you can see, I'm using your code in the above example, linking the required dependencies in their correct order and the modal doesn't go away.
If this doesn't help you, you'll need to reproduce the bug here so we could pinpoint its source.
Edit, based on addition to question: Your modal does not disappear. It is dumped by browser, together with the page, because you are submitting a form simultaneously with displaying the modal. Submitting the form causes your page to refresh the page in its entirety. You need to:
Prevent conventional form submission:
$('form#user').submit( function(e){
e.preventDefault();
// send your data here in an $.ajax()
})
send the data async (via $.ajax()) and parse the result into your existing page.
For help on how to do that, see this question - and its answers.

Below is the solution with the explanation.
HTML Form Submission has a set process that cannot be modified. We can stop the default form submission action and use our script instead.
HTML Form Submission Process
HTML Form has an Action file defined with the form itself in action along with method and other attributes.
This ensures that once the form is submitted, the browser will move to the action file and process based on the HTML Form Input values. Since the browser is moving away from the Form page, therefore any UI object on the Form page will end immediately.
In your case, you are not supposed to move away from the page. Instead you have to prevent the default Form Submit action and use Ajax call to process user input via an external file and then show the result. Below is the code that works and also displays the entered Username in the Modal Title.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="faviconmoney.ico"/>
<meta charset="utf-8">
<title>Employee Info</title>
<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div>
<ul class="nav nav-pills">
<li role="presentation" class="active">Expenses</li>
<li role="presentation">Employee Data</li>
<li role="presentation">Logout</li>
</ul>
<hr />
</div>
<div>
<form role="form" method="post" id="user">
<div class="col-md-4">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username" value="${user.uUserName}">
</div>
<div class="form-group">
<label for="first name">First Name:</label>
<input type="text" class="form-control" id="first name" name="firstname" value="${user.uFirstName}">
</div>
<div class="form-group">
<label for="last name">Last Name:</label>
<input type="text" class="form-control" id="last name" name="lastname" value="${user.uLastName}">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" value="${user.uEmail}">
</div>
<!-- <button type="submit" class="btn btn-default" id="modelSubmit1" a href="#myModal" data-toggle="modal" datatarget="#myModal">Submit</button> -->
<button type="submit" class="btn btn-default" id="modelSubmit1">Submit</button>
</div>
</form>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel">
Username Entered is <strong><span id="username_value">UserName</span></strong>.
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<script type="text/javascript">
$('form#user').submit( function(e){
e.preventDefault();
var username = $('#username').val();
var dataString = "username="+username;
// $('#myModal').modal({ show: false});
$.ajax({
type: "POST",
url: "form-submission.php", // Name of the php files
data: dataString,
success: function(html)
{
$("#username_value").html(html);
$('#myModal').modal('show');
}
});
});
</script>
</body>
</html>
Note that I have used <span id="username_value"> to display the entered text in the middle of an HTML text.
Below is the code of external PHP file that you can use to process data entered. Which means, the modal will only show once the entry is processed successfully.
<?php
if ($_POST) {
$username_value = $_POST['username'];
echo $username_value;
}
?>
Hope this helps.

I am getting an error: Object doesn't support property or method 'datepicker'

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;
}

Categories