На смену аякса звонка не происходит

Question

Я работаю над HTML table. У меня есть form внутри, который имеет select, который имеет опции для ALL и Biscuts. При первой загрузке я заполняю таблицу, которая работает нормально.

Когда я выбираю опцию из списка, я хочу сделать AJAX-вызов на событие onchange, но оно не происходит. Я пытаюсь динамически обновить свою таблицу, когда пользователь выбирает любую опцию из выпадающего списка.

$(document).ready(function() {
  $.ajax({
    async: true,
    url: "CategoryOlWiseFilter",
    method: "GET",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(tableData) {
      addTable(tableData);
    }
  });

  $('#CategoryName').change(function() { //this one is not working
    var selectedOption = this.value;
    alert(selectedOption);
    $.ajax({
      url: "ItemCategoryWiseFilter",
      method: "POST",
      data: {
        categoryName: selectedOption,
      },
    });
  });
});

<div class="container" id="divHide">
  <form>
    <div class="row position-relative">
      <div class="col-4 brder p-2">
        <h5>Category</h5>
      </div>
      <div class="col-8 text-center brder">
        <select class="form-control offset-4 col-4" id="CategoryName">
          <option>All</option>
          <option>Biscuits</option>
        </select>
      </div>
    </div>
    <br>
    <div class="table table-responsive">
      <table class="w-100" id="HourlysalesSummary"></table>
    </div>
  </form>
</div>

мой код сервлета бэкэнда

protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
// i will use the here categoryNamePost here
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    String categoryNamePost = request.getParameter("categoryName");
    System.out.println("Category" + categoryNamePost);
    getServletContext().setAttribute("categoryNameAttribute", categoryNamePost);
}

Всего я делаю 3 AJAX звонка

1. Заполняет данные для всех Categories
2. Отправьте данные обратно на сервер, который выбранной категории - это не работает
3. Заполнить новую таблицу на основе выбранной опции

Моя главная проблема - вторая, потому что вызов AJAX не был успешным. Что я делаю не так?

Answer 1

В вашем триггере изменения снова вызовите функцию addtable, если я предполагаю, что она правильно заполняет вашу таблицу. Вы также использовали дополнительную запятую после selectedOption.

 <table id="table" class='table table-bordered table-striped'>
    <tr>
    <td align="center" ><b>NEED</b>
    </td>
    </tr>
    <tr> 
  <tbody id="table2"></tbody>
    </tr>
   </table>
   <script>
      $('#CategoryName').change(function() { 
        var selectedOption = this.value;
         alert(selectedOption);
         $.ajax({
            url: "ItemCategoryWiseFilter",
            method: "POST",
            data: {
            categoryName: selectedOption},
             success: function(tableData) {
           // if addtable(tableData) is not populating html
                $('#table2').html(data);
             }
          });

`