How do I formulate the condition to have make two different responses, one for the removed and one for the non removed?

See more:

Javascript

jQuery

When the user selects to delete a department or location, then the system checks against the database to see if that entry is used in other tables (ie personnel assigned to that department) and, if so, should prevent removal.

If it prevents removal I want to have a popup saying: "This department/location can't be removed."

At the moment it is only showing: "Removed" for both elements, the removed ones and the ones that are not being deleted.

How can I make two different responses, one for the removed and one for the non removed?

What I have tried:

  1  function toggleConfirmDep(message, func) {
  2      
  3      if (!event) var event = window.event;
  4      event.cancelBubble = true;
  5      if (event.stopPropagation) event.stopPropagation();
  6  
  7  
  8      employeeID = $(event.target).closest(".buttons").siblings("form").find("#id").text();
  9  
 10      if ($('#confirmDep').css('display') == "none") {
 11  
 12          $('#confirmDep').show()
 13          $('#depQuestion').show()
 14          $('#depResponse').hide()
 15  
 16          let addOrRemove = capitalizeFirstLetter(message.split(" ")[0])
 17          addOrRemove == "Add" ? addOrRemove += "ed" : addOrRemove += "d"
 18  
 19          $('#depMessage').text(message)
 20          $('#depButton').attr('onClick', `
 21          
 22              ${func.toString()};
 23              $('#depQuestion').hide()
 24              $('#depResponse').show()
 25  
 26              if (event.cancelBubble == true) {
 27  
 28                  $('#depResponseMessage').text('${addOrRemove}');
 29  
 30              } else if (event.cancelBubble == false) {
 31  
 32                  $('#depResponseMessage').text('This department can't be removed.');
 33  
 34              } else {
 35  
 36                  $('#depResponseMessage').text('${addOrRemove}');
 37  
 38              }
 39  
 40  
 41  
 42              
 43              setTimeout(function(){
 44              
 45                  $('#confirmDep').hide();
 46                  
 47                  $('#profilePage').hide();
 48                  
 49                  window. location. reload(1);
 50                  
 51              }, 1500);
 52              
 53          `)
 54  
 55      } else {
 56          
 57          $('#confirmDep').css('display', 'none')
 58  
 59      }
 60  
 61  }
 62  
 63  function toggleRemoveDepartment() {
 64      
 65      if ($('#removeDepartmentOverlay').css('display') == "none") {
 66      
 67          $('#removeDepartmentOverlay').css('display', 'block')
 68  
 69          populateSelectOptions('Department',"removeDepartmentDepartment")
 70          
 71      } else {
 72      
 73          $('#removeDepartmentOverlay').css('display', 'none')
 74      
 75      }
 76  
 77  }
 78  
 79  function removeDepartment() {
 80  
 81      let departmentName = $('#removeDepartmentDepartment').val()
 82  
 83      $.getJSON(`php/getAllDepartments.php`, function (departments) {
 84  
 85          let departmentID = departments.data.filter(dep => dep.name == departmentName)[0].id
 86  
 87          $.ajax({
 88  
 89              data: {
 90                  'id': departmentID
 91              },
 92              url: 'php/deleteDepartmentByID.php', 
 93              dataType: 'json',
 94  
 95              success: function(data) {
 96  
 97                  $('#removeDepartmentDepartment').find('option:eq(0)').prop('selected', true);
 98      
 99              }
100  
101          })
102  
103      }); 
104  
105  }

<div class="modal" id="removeDepartmentOverlay">

			<div class="addDepLoc">

				<div class="row profileRow">

					<h3 style="display: inline">Department:</h3>
					<select id="removeDepartmentDepartment" style="display: inline; float: right;"></select>
				
				</div>
				
				<br>
				<br>

				<div class="row d-flex align-items-center justify-content-center pt-3" id="removeDepLocBtn">
				
					<div class="col d-flex justify-content-center">

						<button class="button buttonClose" style="display: inline; float: left;" onclick="toggleRemoveDepartment()"></button> 

					</div>

					<div class="col d-flex justify-content-center">

						<div class="btn btn-xs btn-primary5" id="confirmButton" style="display: inline; float: right;" onclick="toggleConfirmDep('Remove', 'removeDepartment()')">^__i class="fa fa-check-circle fa-xs" style="font-size: 1em" data-toggle="modal"></div>

					</div>

				</div>
				
			</div>

		</div>