I am currently working on a project that involves two dropdown menus: one for Categories and the other for SubCategories. Within a partial view named _CreateProject, I have set up an html form to facilitate the creation of new projects. My goal is to have a button that, when clicked, displays the form for creating a new project. However, I only want the "Create Project" button to be visible after a category and subcategory are selected, and I want the _CreateProject partial to display only upon clicking the button.
Despite my attempts to label the divs as hidden and then reveal them using $(#id).show(), the divs remain concealed.
Below are the scripts where I have attempted to reveal the buttons:
<script>
//Populate SubCategory when Category changes
$(function () {
$("#Category").on("change", function () {
var categoryId = $(this).val();
$("#SubCategory").empty();
$("#SubCategory").append("<option value=''>---Select Subcategory---</option>");
$.getJSON(`?handler=SubCategories&categoryId=${categoryId}`, (data) => {
$.each(data, function (i, item) {
$("#SubCategory").append(`<option value="${item.subCategoryId}">${item.subCategoryName}</option>`);
});
});
});
//try to show #partial on button click
$("#projectButton").click(function () {
$("#partial").show(); //try to reveal partial here
});
$("#SubCategory").on("change", function () {
$("#projectButton").show(); //try to show button here
var SubCategoryId = $(this).val;
$("#ProjectId").empty();
$.getJSON(`?handler=Projects&SubCategory=${SubCategoryId}`, (data) => {
//...
Here's the button along with the div containing the partial:
<div hidden id="projectButton">
<button type="submit" class="btn btn-default">New Project</button>
</div>
<div id="partial" hidden>
<partial name="_CreateProject"/>
</div>
For reference, here are the Category and SubCategory sections:
<label asp-for="Category">Category: </label>
<select asp-for="Category" asp-items="Model.categorylist">
<option value="">---Select Category---</option>
</select>
<label asp-for="SubCategory">Subcategory:</label>
<select asp-for="SubCategory"><option value="">---Select Subcategory---</option></select>
public void OnGet()
{
categorylist = new SelectList(categoryService.GetCategories(), nameof(Category.CategoryId), nameof(Category.CategoryName));
}
//called by first jQuery
public JsonResult OnGetSubCategories()
{
UserId = Convert.ToInt32(HttpContext.Session.GetString("SessionUserId"));
return new JsonResult(categoryService.GetSubCategories(Category.CategoryId, UserId));
}
Any advice or suggestions on how to achieve this functionality would be greatly appreciated. I'm still learning jQuery, so I suspect there might be an error in my approach. Thank you!