title: Show Button and Div on Event in Asp.net core with Razor Pages
body: <p>I have two dropdown menus one for Categories and the other for SubCategories.  I have a partial view called _CreateProject that has the html for a post form to create a new project.  I have a button where on-click I would want it to display the form for creating a new project. However, I want the "Create Project" button to only be visible when a category and subcategory are selected and only display the _CreateProject partial when the button is clicked.</p>
  
  <p>I have tried labeling the div's as hidden and then showing them with $(#id).show() but the div's are not being revealed.</p>
  
  <p>These are my scripts and where I try to reveal the buttons:</p>
  
  <pre><code>&lt;script&gt;
                      //Populate SubCategory when Category changes
                      $(function () {
                          $("#Category").on("change", function () {
                              var categoryId = $(this).val();
                              $("#SubCategory").empty();
                              $("#SubCategory").append("&lt;option value=''&gt;---Select Subcategory---&lt;/option&gt;");
                              $.getJSON(`?handler=SubCategories&amp;categoryId=${categoryId}`, (data) =&gt; {
                                  $.each(data, function (i, item) {
                                      $("#SubCategory").append(`&lt;option value="${item.subCategoryId}"&gt;${item.subCategoryName}&lt;/option&gt;`);
                                  });
                              });
                          });
  
                          //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&amp;SubCategory=${SubCategoryId}`, (data) =&gt; {
                                               //...
  </code></pre>
  
  <p>This is the button as well as the div containing the partial:</p>
  
  <pre><code>&lt;div hidden id="projectButton"&gt;
      &lt;button type="submit" class="btn btn-default"&gt;New Project&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div id="partial" hidden&gt;
      &lt;partial name="_CreateProject"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Category and SubCategory for reference</p>
  
  <pre><code>&lt;label asp-for="Category"&gt;Category:  &lt;/label&gt;
  &lt;select asp-for="Category" asp-items="Model.categorylist"&gt;
      &lt;option value=""&gt;---Select Category---&lt;/option&gt;
  &lt;/select&gt;
  
  
  &lt;label asp-for="SubCategory"&gt;Subcategory:&lt;/label&gt;
  &lt;select asp-for="SubCategory"&gt;&lt;option value=""&gt;---Select Subcategory---&lt;/option&gt;&lt;/select&gt;
  </code></pre>
  
  <pre><code>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));
  
  }
  </code></pre>
  
  <p>What is a good way to accomplish this?  I am new to Jquery so perhaps there can be some sort of "error" there?  Thanks</p>