How to stop AJAX Call?

Question

So, I have 3 dropdowns, one for Employee ID, second for monthly and third for quartely, so the data in monthly and quaterly dropdown is called from Database, so I used this AJAX call for the same.

So this works like, when an ID is selected that has data everything loads well, but when an ID is selected without data it shows 'No data available'.

The main issue starts there. After selecting an ID with no Data, the ID with data also shows no data.

For example, an 01 ID is selected from Employee ID drop down, and it has monthly or quartely data-- Works fine
02 ID is selected from the dropdown, and it has no data, shows No Data Available -- Works
But when again 01 is selected, it shows no data available, so you will have refresh the page to see the data. -- issue

Please if someone could help me. I'm very new to AJAX call. Thank you.

$('select[name="employee_id"]').on('change', function() {
  console.log('inside script')
  var employee_id = document.getElementById('employee_id').selectedOptions[0].value;
  console.log(employee_id)

  $.ajax({
    type: "POST",
    url: "/kpiDetailsList",
    datatype: "json",
    data: JSON.stringify({
      'employee_id': employee_id,
    }),
    contentType: 'application/json;charset=UTF-8',
    success: function(data) {
      console.log(data);
      var parsed_data = data;
      
      monthly_list = parsed_data.monthly_list;
      quarterly_list = parsed_data.quarterly_list;   
      console.log(monthly_list.length)
      console.log(quarterly_list.length)

      if (monthly_list.length != 0 || quarterly_list.length != 0) {
        console.log('inside first if')
        
        $("#list1").attr("enabled", "enabled").on('click');
        $('#list1_items').empty();
        
        for (index = 0; index < monthly_list.length; index++) {
          $('#list1_items').append("<li><input type='checkbox' name='month' value='" + monthly_list[index] + "'id='" + monthly_list[index] + "'><label for='" + monthly_list[index] + "'>" + monthly_list[index] + "</label></li>");
        }
        
        $("#list2").on('click');
        $('#list2_items').empty();
        
        for (index = 0; index < quarterly_list.length; index++) {
          if (quarterly_list[index] == 'Quarter1') {
            $('#list2_items').append("<li><input type='checkbox' name='quarter' value='" + quarterly_list[index] + "'id='" + quarterly_list[index] + "'><label for='" + quarterly_list[index] + "'> Apr - Jun (Quarter 1) </label></li>");
          } else if (quarterly_list[index] == 'Quarter2') {
            $('#list2_items').append("<li><input type='checkbox' name='quarter' value='" + quarterly_list[index] + "'id='" + quarterly_list[index] + "'><label for='" + quarterly_list[index] + "'> Jul - Sep (Quarter 2) </label></li>");
          } else if (quarterly_list[index] == 'Quarter3') {
            $('#list2_items').append("<li><input type='checkbox' name='quarter' value='" + quarterly_list[index] + "'id='" + quarterly_list[index] + "'><label for='" + quarterly_list[index] + "'> Oct - Dec (Quarter 3) </label></li>");
          } else if (quarterly_list[index] == 'Quarter4') {
            $('#list2_items').append("<li><input type='checkbox' name='quarter' value='" + quarterly_list[index] + "'id='" + quarterly_list[index] + "'><label for='" + quarterly_list[index] + "'> Jan - Mar (Quarter 4) </label></li>");
          } else {
            console.log('Data not found')
          }
        }
      } else if (monthly_list.length == 0 && quarterly_list.length == 0) {
        console.log('inside second if')
        $("#list1").attr("disabled", "disabled").off('click');
        $("#list1").attr("title", "Data not available");
        $("#list2").attr("disabled", "disabled").off('click');
        $("#list2").attr("title", "Data not available");
      } else if (monthly_list.length == 0 || quarterly_list.length == 0) {
        console.log('inside third if')
        if (monthly_list.length == 0) {
          console.log('inside monthly list')
          $("#list1").attr("disabled", "disabled").off('click');
          $("#list1").attr("title", "Data not available");
        } else {
          $("#list2").attr("disabled", "disabled").off('click');
          $("#list2").attr("title", "Data not available");
        }
      } else {
        console.log("data not found")
      }
    },
    error: function(e) {
      console.log("Error :" + e)
    }
  });
});

Answer 1

You could just return from the function before you even run the ajax function.

$('select[name="employee_id"]').on('change', function() {
  console.log('inside script')
  var employee_id = document.getElementById('employee_id').selectedOptions[0].value;
  console.log(employee_id)
  if(employee_id == null){
    return;
  }

  ...rest of your function

}

This issue doesn't really have anything to do with the ajax part of it but more about validation of the input field.

Edit.

After reading your comment I see I misinterpreted the question, but the same idea actually still stands. Just return from the function. Calling a return anywhere in the function will just stop the function from running.

    success: function(data) {
      console.log(data);
      var parsed_data = data;
      if(!data){
         return
      }
    }