Cascading dropdown menu problem, not able to dynamically populate and display Select controls
Hi, my code is able to create the 1st Select control but nothing happens for the 2nd and other Select controls. I debug through the code and the JSON function called, $.getJSON("/SearchMembers/GetChildResearchInterests/" + $(this).val(), function(json), from this function's code I see that it's returnning valid data. However, nothing is happening from the code after that. I tried putting alert debugging messages but that don't get display atll. Appreciate any help here. Thank you.
Here is my JSON function code,
public JsonResult GetChildResearchInterests(long id)
{
var result = new JsonResult {Data = ResearchInterestRepository.FindByParentResearchInterestId(id)};
return result;
}
I'm using V.S. 2008, C# and asp.net mvc.
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(document).ready(function() {
var selectBox;
var selectedText;
var researchInterestFullName;
var addToHiddenField;
var selectedResearchInterestCount;
selectedResearchInterestCount = 0;
var professionalOrganizationCount;
professionalOrganizationCount = 0;
var interestIds = new Array();
$('#level2ResearchInterests').hide();
$('#level3ResearchInterests').hide();
$('#level4ResearchInterests').hide();
$("#level1ResearchInterests").change(function() {
$.getJSON("/SearchMembers/GetChildResearchInterests/" + $(this).val(), function(json) {
var options = '';
for (var i = 0; i < json.length; i++) {
options += '<option value="' + json[i].Id + '">' + json[i].Name + '</option>';
}
$("#level2ResearchInterests").html(options);
$("#level3ResearchInterests").html('');
$("#level4ResearchInterests").html('');
if (json.length > 0) {
$('#level1ResearchInterests').animate({ width: 170 }, 'fast', function() {
$('#level2ResearchInterests').css('width', '340px');
$('#level2ResearchInterests').fadeIn('fast');
});
}
else {
$('#level2ResearchInterests').fadeOut('fast');
}
$('#level3ResearchInterests').fadeOut('fast');
$('#level4ResearchInterests').fadeOut('fast');
})
})
$("#level2ResearchInterests").change(function() {
$.getJSON("/SearchMembers/GetChildResearchInterests/" + $(this).val(), function(json) {
var options = '';
for (var i = 0; i < json.length; i++) {
options += '<option value="' + json[i].Id + '">' + json[i].Name + '</option>';
}
$("#level3ResearchInterests").html(options);
$("#level4ResearchInterests").html('');
if (json.length > 0) {
$('#level2ResearchInterests').animate({ width: 170 }, 'fast', function() {
$('#level3ResearchInterests').css('width', '340px');
$('#level3ResearchInterests').fadeIn('fast');
});
}
else {
$('#level3ResearchInterests').fadeOut('fast');
}
$('#level4ResearchInterests').fadeOut('fast');
})
})
$("#level3ResearchInterests").change(function() {
$.getJSON("/SearchMembers/GetChildResearchInterests/" + $(this).val(), function(json) {
var options = '';
for (var i = 0; i < json.length; i++) {
options += '<option value="' + json[i].Id + '">' + json[i].Name + '</option>';
}
$("#level4ResearchInterests").html(options);
$('#level2ResearchInterests').fadeIn('fast');
$('#level3ResearchInterests').fadeIn('fast');
if (json.length > 0) {
$('#level3ResearchInterests').animate({ width: 170 }, 'fast', function() {
$('#level4ResearchInterests').fadeIn('fast');
});
}
else {
$('#level4ResearchInterests').fadeOut('fast');
}
})
})
//Finally reset all the research interests
var resetResearchInterestSelection = function() {
$("#level2ResearchInterests").hide();
$("#level3ResearchInterests").hide();
$("#level4ResearchInterests").hide();
$("#level2ResearchInterests").html('');
$("#level3ResearchInterests").html('');
$("#level4ResearchInterests").html('');
$('#level1ResearchInterests').attr('selectedIndex', '-1');
$('#level1ResearchInterests').animate({ width: 340 }, 'fast');
};
$("#addResearchInterest").click(function() {
if ($('#level1ResearchInterests').val() == null) return; //Nothing has been selected, so return
//Clear out the table which shows the selected research interests if necessary.
if (selectedResearchInterestCount == 0) { $('table#selectedResearchInterests tbody tr').remove(); };
var selectedId;
researchInterestFullName = '';
addToHiddenField = 1;
//Start from level 4 research interests, we basically only store the id of the selected Id of the lowest level Research Interest, as its parents can be inferred.
if ($('#level4ResearchInterests').val() != null) {
if (addToHiddenField == 1) $("#researchInterests").val($("#researchInterests").val() + $('#level4ResearchInterests').val() + ',');
addToHiddenField = 0;
selectBox = document.getElementById("level4ResearchInterests");
selectedText = selectBox.options[selectBox.selectedIndex].text;
researchInterestFullName = ">" + selectedText;
selectedId = $('#level4ResearchInterests').val();
};
if ($('#level3ResearchInterests').val() != null) {
if (addToHiddenField == 1) $("#researchInterests").val($("#researchInterests").val() + $('#level3ResearchInterests').val() + ',');
addToHiddenField = 0;
selectBox = document.getElementById("level3ResearchInterests");
selectedText = selectBox.options[selectBox.selectedIndex].text;
researchInterestFullName = ">" + selectedText + researchInterestFullName;
};
if ($('#level2ResearchInterests').val() != null) {
if (addToHiddenField == 1) $("#researchInterests").val($("#researchInterests").val() + $('#level2ResearchInterests').val() + ',');
addToHiddenField = 0;
selectBox = document.getElementById("level2ResearchInterests");
selectedText = selectBox.options[selectBox.selectedIndex].text;
researchInterestFullName = ">" + selectedText + researchInterestFullName;
};
if ($('#level1ResearchInterests').val() != null) {
if (addToHiddenField == 1) $("#researchInterests").val($("#researchInterests").val() + $('#level1ResearchInterests').val() + ',');
addToHiddenField = 0;
selectBox = document.getElementById("level1ResearchInterests");
selectedText = selectBox.options[selectBox.selectedIndex].text;
researchInterestFullName = selectedText + researchInterestFullName;
selectedResearchInterestCount++;
$('<tr><td>' + selectedResearchInterestCount + '</td><td>' + researchInterestFullName + '</td></tr>').appendTo('#selectedResearchInterests tbody').animate({ backgroundColor: 'yellow' }, 500).animate({ backgroundColor: 'white' }, 500, resetResearchInterestSelection);
//Apply the classes in order to get striping
$('#selectedResearchInterests tbody tr:odd').removeClass('even').addClass('odd');
$('#selectedResearchInterests tbody tr:even').removeClass('odd').addClass('even');
};
return false;
})
$('#level1ResearchInterests').css('width', '340px');
})
</script>
<form action="/SearchMembers/Search/" method="post">
<input type="hidden" name="ResearchInterests" id="researchInterests" value=""/>
<fieldset>
<h1>Search CTSI Members</h1>
<br class="clear" />
<label>Areas of Research Interest</label>
<select id="level1ResearchInterests" name="Level1ResearchInterests" size="5" tabindex="1">
<% foreach (ResearchInterest researchInterest in ViewData["Level1ResearchInterests"] as IList<ResearchInterest>) { %>
<option value="<%=researchInterest.Id%>"><%=researchInterest.Name%></option>
<% } %>
</select>
<select id="level2ResearchInterests" name="Level2ResearchInterests" size="5">
</select>
<select id="level3ResearchInterests" name="Level3ResearchInterests" size="5">
</select>
<select id="level4ResearchInterests" name="Level4ResearchInterests" size="5">
</select><br /><br />
<div class="buttonWrapper">
<input type="button" id="addResearchInterest" value="Add Research Interest to my search criteria(s)" />
</div>
<br />
<table id='selectedResearchInterests' class="expandingTable">
<thead>
<tr>
<th></th>
<th>My selected Research Interest</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td></td>
<td>No Research Interests selected yet.</td>
</tr>
</tbody>
</table>
</fieldset>
<div class="buttonWrapper">
<input type="submit" id="searchMembers" value="Search" tabindex="2" />
</div>
</form>
</asp:Content>