I am working on a modal using bootstrap 3 and jQuery 1.11. The modal has select, label, input and glyphion elements. I want to change the label content and the title of the popover for glyphion based on the option selected. I wrote the following code to achieve this
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="modal fade" id="apstStopModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog large">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Enter Information</h4>
</div>
<form class="form-horizontal" id="stopForm">
<div class="modal-body">
<fieldset class="frame-border">
<legend class="frame-border">Start-up Time</legend>
<div class="col-xs-12 col-md-2">
<div class="form-group">
<div class="controls col-xs-12 col-md-12">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Start-up time of the stop."></span>
<select id="startUpTime" name="StartUpTime" class="form-control" >
<option value="Fixed">Fixed</option>
<option value="Uniform">Uniform</option>
<option value="Truncated Normal">Truncated Normal</option>
<option value="Exponential">Exponential</option>
</select>
</div>
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group required">
<label class="control-label col-xs-6 col-md-6" for="startUpTimeParam1" id="startUpParam1Label" >Name</label>
<div class="controls col-xs-6 col-md-6">
<span class="help glyphicon glyphicon-info-sign" id="startUpParam1Help" data-toggle="popover" data-placement="right" title="Help"></span>
<input type="number" id="startUpTimeParam1" name="Name" class="form-control" value="0.00">
</div>
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group required">
<label class="control-label col-xs-6 col-md-6" for="startUpTimeParam2" id="startUpParam2Label" >Name</label>
<div class="controls col-xs-6 col-md-6">
<span class="help glyphicon glyphicon-info-sign" id="startUpParam2Help" data-toggle="popover" data-placement="right" title="Help"></span>
<input type="number" id="startUpTimeParam2" name="Name" class="form-control" value="0.00">
</div>
</div>
</div>
</fieldset>
<script src="ApstCustomJS.js"></script>
</div>
<!-- modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
JavaScript
function startUpChange() {
var theValue = $("#startUpTime").find("option:selected").text();
if(theValue === "Fixed" )
{
$('#startUpParam1Help').attr("title","Please provide the start time");
$('#startUpParam1Label').html("Start Time");
$('#startUpParam2Help').attr("title","Please provide the stop time");
$('#startUpParam2Label').html("Stop Time");
}
else if(theValue === "Uniform" )
{
$('#startUpParam1Help').attr("title","Please provide the lower bound time");
$('#startUpParam1Label').html("Lower Bound");
$('#startUpParam2Help').attr("title","Please provide the upper bound time");
$('#startUpParam2Label').html("Upper Bound");
}
else if(theValue === "Turncated Normal" )
{
$('#startUpParam1Help').attr("title","Please provide the mean time ");
$('#startUpParam1Label').html("Mean");
$('#startUpParam2Help').attr("title","Please provide the standard deviation time");
$('#startUpParam2Label').html("Standard Deviation");
}
}
$("#startUpTime").change(startUpChange()).change();
CSS
.form-group {
padding-right:20px;
position:relative;
}
.help {
position:absolute;
right:-8px;
top:12px;
}
fieldset.frame-border {
border: 1px groove #ddd !important;
padding: 0 1em !important;
margin: 0 0 1em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.frame-border {
font-size: 1.1em !important;
font-weight: bold !important;
text-align: left !important;
width:inherit;
padding:0 10px;
border-bottom:none;
}
.form-group.required .control-label:after {
content:"*";
color:red;
}
Here is how it looks now.
The Javascript is not working properly as the labels and popover title change the first time the page is loaded but don't change on selecting a different option after loading. I want to make sure it works something like this example. I am new jQuery, Bootstrap and web development I think it might be something related to bootstrap and jquery compatibility. I need help in fixing it.
