I am struggling to figure out how to update bootstrap controls with ASP.Net.
Here is the code I am working with:
@{
Layout = null;
}
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title Mark Hub</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script>
var url = "http://localhost:51520/api/teacher/"
function getTerms(course) {}
$select = $('#termSelect');
$.ajax({
url: url + "global/currentterms/" + course ,
dataType:'JSON',
success:function(data){
$select.html('');
$.each(data.person, function(key, val){
$select.append('<option id="' + val.id + '">' + val.name + '</option>');
})
},
error:function(){
$select.html('<option id="-1">none available</option>');
}
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Mark Hub", "Index", "Teacher", null, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Teacher", "Index", "Teacher")</li>
<li>@Html.ActionLink("Admin", "Index", "Admin")</li>
</ul>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-1 text-left">
<select class="form-control" id="courseSelect" onclick="getTerms()">
<option>DEC 10</option>
</select>
</div>
<div class="col-md-1 text-left">
<select class="form-control" id="termSelect">
</select>
</div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12">
<hr />
<footer>
<p>© @DateTime.Now.Year</p>
</footer>
</div>
</div>
</div>
</div>
</body>
</html>
I want to pass the selected value from courseSelect to the Javascript function getTerms, retrieve JSON data using a web api call, and dynamically populate the termSelect control.
However, changing a selection in courseSelect combobox does not update termSelect combobox.
What changes should I make to my code?
UPDATED WITH REVISED CODE BASED ON ANSWER SUGGESTIONS
<script>
var url = "http://localhost:51520/api/teacher/"
$(function(){
$('#courseSelect').on('change',function(){
var course = $('#courseSelect').val();
$.ajax({
url: url + "global/currentterms/" + course,
dataType:'JSON',
success:function(data){
$select.html('');
$.each(data.termID, function(key, val){
$select.append('<option id="' + val.id + '">' + val.name + '</option>');
})
},
error:function(){
$select.html('<option id="-1">none available</option>');
}
})
})});
</script>
Despite updating the code as recommended, the functionality still doesn't work, and the breakpoint confirms that the function is not triggered upon selecting an option from courseSelect.