Click here to Skip to main content
15,845,785 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:

JavaScript
  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  }


HTML
<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>
Posted
Updated 1-Mar-21 23:18pm
v4

1 solution

Look at your code:
On line 4 you have:
JavaScript
event.cancelBubble = true;

And on lines 26 to 28 you have:
JavaScript
if (event.cancelBubble == true) {
  
    $('#depResponseMessage').text('${addOrRemove}');

So event.cancelBubble is always true.

Also, please do not repost the same question but do what I suggested yesterday at How do I create two different responses for removed items and non removed?[^].
 
Share this answer
 
Comments
farremireia 2-Mar-21 4:17am    
Thank you! I have now updated the question with some more code that might be more useful as I understand what you just suggested however that does not solve my problem.

Could it be related to the function removeDepartment?
Richard MacCutchan 2-Mar-21 4:26am    
Sorry, I have no idea what those other functions are supposed to do. But the problem remains. At line 4 you set event.cancelBubble = true;, so it is always true. You need to add a test somewhere (before line 26) that determines whether it should be true or false, and sets it to the correct value.
farremireia 2-Mar-21 4:41am    
I am guessing you mean something like: if "department deleted" - true, if "department not deleted" - false.

But I that's what I mean, I am not sure how to do it.

And please forgive my ignorance, as you can guess I am very new into all this.
Richard MacCutchan 2-Mar-21 4:50am    
Yes, exactly that. But I cannot tell you how to do it as I do not know where you try the delete, and how you pass the result back to this page.
farremireia 2-Mar-21 4:52am    
Perfect! Thank you very much!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900