Javascript/JQuery 3.6.0 help [Self-Resolved]
I have to be missing something silly. The idea is there are three levels of cascading dropdowns: Categories have Subcategories and, depending on the combination of Category and Subcategory there's a list of Resolutions.
Razor CSHTML snippet:
Javascript:
Category -> Subcategory works fine.
Subcategory -> Resolution doesn't seem to fire at all and I'm lost to the reason why since it's a copy and paste job. Thank you in advance for your help.
<td>
@Html.DropDownListFor(m => m.contactModel.CategorySID, Model.CallCategoryList, "--Select--", new { @id = "ddlCategory" })
</td>
<td id="Subcategory">
@Html.DropDownListFor(m => m.contactModel.SubcategorySID, new List<SelectListItem>(), "--Select--", new { @id = "ddlSubcategory" })
</td>
<td id="Resolution">
@Html.DropDownListFor(m => m.contactModel.ResolutionSID, new List<SelectListItem>(), "--Select--", new { @id = "ddlResolution" })
</td>
<td>
@Html.DropDownListFor(m => m.contactModel.CategorySID, Model.CallCategoryList, "--Select--", new { @id = "ddlCategory" })
</td>
<td id="Subcategory">
@Html.DropDownListFor(m => m.contactModel.SubcategorySID, new List<SelectListItem>(), "--Select--", new { @id = "ddlSubcategory" })
</td>
<td id="Resolution">
@Html.DropDownListFor(m => m.contactModel.ResolutionSID, new List<SelectListItem>(), "--Select--", new { @id = "ddlResolution" })
</td>
$(document).ready(function () {
$('#ddlCategory').change(function () {
$.ajax({
type: "post",
url: "/LogPhoneCalls/GetSubcategories",
data: { selectedCategoryID: $('#ddlCategory').val() },
datatype: "json",
traditional: true,
success: function (data) {
var subcategory = "<select id='ddlSubcategory'>";
subcategory = subcategory + '<option value="">--Select--</option>';
for (var i = 0; i < data.length; i++)
{
subcategory = subcategory + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
}
subcategory = subcategory + '</select>';
$('#Subcategory').html(subcategory);
}
});
});
$('#ddlSubcategory').change(function () {
$.ajax({
type: "post",
url: "/LogPhoneCalls/GetResolutions",
data: {
selectedCategoryID: $('#ddlCategory').val(),
selectedSubcategoryID: $('#ddlSubcategory').val()
},
datatype: "json",
traditional: true,
success: function (data) {
var resolution = "<select id='ddlResolution'>";
resolution = resolution + '<option value="">--Select--</option>';
for (var i = 0; i < data.length; i++) {
resolution = resolution + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
}
resolution = resolution + '</select>';
$('#Resolution').html(resolution);
}
});
});
});
$(document).ready(function () {
$('#ddlCategory').change(function () {
$.ajax({
type: "post",
url: "/LogPhoneCalls/GetSubcategories",
data: { selectedCategoryID: $('#ddlCategory').val() },
datatype: "json",
traditional: true,
success: function (data) {
var subcategory = "<select id='ddlSubcategory'>";
subcategory = subcategory + '<option value="">--Select--</option>';
for (var i = 0; i < data.length; i++)
{
subcategory = subcategory + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
}
subcategory = subcategory + '</select>';
$('#Subcategory').html(subcategory);
}
});
});
$('#ddlSubcategory').change(function () {
$.ajax({
type: "post",
url: "/LogPhoneCalls/GetResolutions",
data: {
selectedCategoryID: $('#ddlCategory').val(),
selectedSubcategoryID: $('#ddlSubcategory').val()
},
datatype: "json",
traditional: true,
success: function (data) {
var resolution = "<select id='ddlResolution'>";
resolution = resolution + '<option value="">--Select--</option>';
for (var i = 0; i < data.length; i++) {
resolution = resolution + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
}
resolution = resolution + '</select>';
$('#Resolution').html(resolution);
}
});
});
});
Subcategory -> Resolution doesn't seem to fire at all and I'm lost to the reason why since it's a copy and paste job. Thank you in advance for your help.
1 Reply
I knew it'd be silly. The solution was to move it out of $(document).Ready:
<script type="text/javascript">
$(document).ready(function () {
$('#ddlCategory').change(function () {
$.ajax({
type: "post",
url: "/LogPhoneCalls/GetSubcategories",
data: { selectedCategoryID: $('#ddlCategory').val() },
datatype: "json",
traditional: true,
success: function (data) {
var subcategory = "<select id='ddlSubcategory'>";
subcategory = subcategory + '<option value="">--Select--</option>';
for (var i = 0; i < data.length; i++)
{
subcategory = subcategory + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
}
subcategory = subcategory + '</select>';
$('#Subcategory').html(subcategory);
}
});
});
});
$(document).on('change', '#ddlSubcategory', function () {
$.ajax({
type: "post",
url: "/LogPhoneCalls/GetResolutions",
data: {
selectedCategoryID: $('#ddlCategory').val(),
selectedSubcategoryID: $('#ddlSubcategory').val()
},
datatype: "json",
traditional: true,
success: function (data) {
var resolution = "<select id='ddlResolution'>";
resolution = resolution + '<option value="">--Select--</option>';
for (var i = 0; i < data.length; i++) {
resolution = resolution + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
}
resolution = resolution + '</select>';
$('#Resolution').html(resolution);
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#ddlCategory').change(function () {
$.ajax({
type: "post",
url: "/LogPhoneCalls/GetSubcategories",
data: { selectedCategoryID: $('#ddlCategory').val() },
datatype: "json",
traditional: true,
success: function (data) {
var subcategory = "<select id='ddlSubcategory'>";
subcategory = subcategory + '<option value="">--Select--</option>';
for (var i = 0; i < data.length; i++)
{
subcategory = subcategory + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
}
subcategory = subcategory + '</select>';
$('#Subcategory').html(subcategory);
}
});
});
});
$(document).on('change', '#ddlSubcategory', function () {
$.ajax({
type: "post",
url: "/LogPhoneCalls/GetResolutions",
data: {
selectedCategoryID: $('#ddlCategory').val(),
selectedSubcategoryID: $('#ddlSubcategory').val()
},
datatype: "json",
traditional: true,
success: function (data) {
var resolution = "<select id='ddlResolution'>";
resolution = resolution + '<option value="">--Select--</option>';
for (var i = 0; i < data.length; i++) {
resolution = resolution + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
}
resolution = resolution + '</select>';
$('#Resolution').html(resolution);
}
});
});
</script>