0

I have cards which represent various locations in my app. Each location has one card each. I'm trying to get the id the location which I've placed in a hidden input element within each card. I've tried using both .closest() and .siblings() but neither seem to return anything when I try and log to the console. Any ideas at all?

function getLocationData() {

  $.ajax({
    type: "GET",
    url: 'php/getAllLocations.php',
    dataType: "json",
    success: function(data){
      $('#location-results').empty();
      $('#adddeptlocationlist').empty();
      $('#editdeptlocationlist').empty();
      $('#edit-location-list').empty();
    let locations = data.data;
  
    
    locations.forEach(function(position){
      $('#location-results').append(`<div class="card" style="width: 18rem;">
      <div class="card-body" id="${position.id}">
        <div class="individual-result"><i class="fa-solid fa-map-location fa-xl"></i><h5 class="card-title record" id="one-location-name-${position.id}">${position.name}</h5></div>
        <button class="edit-location-button" data-bs-toggle="modal" data-bs-target="#editLocationModal"><i class="fa-solid fa-pen-to-square"></i></button>
        <input class="location-id" value="${position.id}">
        <button type="button" class="delete-location-button"><i class="fa-solid fa-trash"></i></button>
      </div>
      
    </div>`);
    
    $('#adddeptlocationlist').append(`<option value="${position.id}">${position.name}</option>`);
    $('#editdeptlocationlist').append(`<option value="${position.id}">${position.name}</option>`);
    $('#edit-location-list').append(`<option value="${position.id}">${position.name}</option>`);
  
  });
}
  })
  
}

function getDeptData() {

  $.ajax({
    type: "GET",
    url: "php/getAllDepartments.php",
    dataType: "json",
    success: function(data){
      $("#department-results").empty();
      $("#add-employee-dept-list").empty();
      $("#editdeptlist").empty();
      $("#edit-employee-dept-list").empty();
      let departments = data.data;

      departments.forEach(function(position){


        $("#add-employee-dept-list").append(`<option value="${position.id}">${position.name}</option>`);
                    
        $("#department-results").append(
          `<div class="card" style="width: 18rem;">
      <div class="card-body">
        <p id="location-id-${position.id}" class="department-location-id">${position.locationID}</p>
        <div class="individual-result"><i class="fa-solid fa-building fa-xl"></i><h5 class="card-title record" id="department-name-${position.id}">${position.name}</h5></div>
        <div class="individual-result"><i class="fa-solid fa-map-location"></i><h6 id="location-name-${position.id}" class="card-subtitle mb-2 text-muted record">${position.location}</h6></div>
        <button id="${position.id}" class="edit-location-button" data-bs-toggle="modal" data-bs-target="#editDepartmentModal" onclick="populateEditDepartmentModal(this.id);"><i class="fa-solid fa-pen-to-square"></i></button>
        <button type="button" class="delete-department-button"><i class="fa-solid fa-trash"></i></button>
      </div>
      
    </div>`);
  
        
      });
    }
  })
}



function getEmployeeData() {
  $.ajax({
    type: "GET",
    url: "php/getAll.php",
    dataType: "json",
    success: function(data){
      let employees = data.data;
      $("#employee-results").empty();
      currentData = employees;
      console.log(employees);
      employees.forEach(function(position){

        let jobTitle;

        if (position.jobTitle == ""){
          jobTitle = "Position not allocated";
        } else {
          jobtitle = position.jobTitle;
        }

        $("#employee-results").append(`<div class="card" style="width: 18rem;">
          <div class="card-body">
            <div class="individual-result"><h5 class="card-title record"><span id="first-name-${position.id}">${position.firstName}</span>&nbsp<span id="last-name-${position.id}">${position.lastName}</span></h5></div>
            <div class="individual-result"><p id="email-${position.id}">${position.email}<p></div>
            <div class="individual-result"><p id="jobTitle-${position.id}">${jobTitle}<p></div>
            <p id="one-department-id-${position.id}" class="department-id">${position.departmentID}</p>
            <div class="dept-location"><div class="individual-result"><i class="fa-solid fa-building"></i><h6 class="record" id="one-department-${position.id}">${position.department}</h5></div>
            <div class="individual-result"><i class="fa-solid fa-map-location"></i><h6 class="record" id="location-${position.id}">${position.location}</h5></div>
            
          </div>
          <button id="${position.id}" class="edit-employee-button" data-bs-toggle="modal" data-bs-target="#editEmployeeModal" onclick="populateEditModalWithCurrentInfo(this.id);"><i class="fa-solid fa-pen-to-square"></i></button>
          <button type="button" class="delete-employee-button"><i class="fa-solid fa-trash"></i></button>
          </div>
        </div>`);
    
      })
    }
  })
}

  getLocationData();
  getDeptData();
  getEmployeeData();

  
$('#addEmployeeForm').on("submit", function(event) {
  event.preventDefault();
  
  let firstName = $('#newFirstName').val();
  let lastName = $('#newLastName').val();
  let email = $('#newEmail').val();
  let departmentID = $('#add-employee-dept-list').val();
  let jobTitle = $('#newJobTitle').val();
  
  $.ajax({
    type: "POST",
    url: 'php/addNewEmployee.php',
    dataType: "json",
    data: {
      fname: firstName,
      lname: lastName,
      email: email,
      department: departmentID,
      jobTitle: jobTitle
    },
    success: function(data) {
      
      $('#addEmployeeModal').modal('hide');
      $(".modal-backdrop").remove();
      $('#addEmployeeForm').trigger('reset');
      $('#toastSuccessMessage').html(`${firstName} ${lastName} successfully added.`);
      $('#toastSuccess').toast('show');
      $("#employee-results").empty();
      getEmployeeData();
      
            
      

    },
    error: function(jqXHR, textStatus, errorThrown) {
      $('#addEmployeeModal').modal('hide');
      $('#toastErrorMessage').html(`${firstName} ${lastName} not added.<br>${errorThrown}<br>${jqXHR}<br>${textStatus}.`);
      $('#toastError').toast('show');
    }
      
    
      
    
  });
  
});
  

$('#delete-employee-step-one-button').on('click', function(){

  let employeeToDelete = `${$('#editemployeefirstname').val()} ${$('#editemployeelastname').val()}` 

  $('#editemployeefirstname').attr("disabled", true);
  $('#editemployeelastname').attr("disabled", true);
  $('#editemployeeemail').attr("disabled", true);
  $('#edit-employee-dept-list').attr("disabled", true);
  $('#edit-employee-modal-footer').hide();
  $('#employeeToDelete').html(`Are you sure you wish to delete ${employeeToDelete}`);
  $('#delete-employee-confirmation-modal-footer').show();

});

$('#delete-employee-go-back-button').on('click', function(){
  $('#editemployeefirstname').attr("disabled", false);
  $('#editemployeelastname').attr("disabled", false);
  $('#editemployeeemail').attr("disabled", false);
  $('#edit-employee-dept-list').attr("disabled", false);
  $('#delete-employee-confirmation-modal-footer').hide();
  $('#edit-employee-modal-footer').show();
});

$('#delete-employee-proceed-button').on('click', function(){

    let employeeToDelete = `${$('#editemployeefirstname').val()} ${$('#editemployeelastname').val()}` 

    employeeID = $('#editemployeeid').val();

    $.ajax({
      type: "POST",
      url: 'php/deleteEmployeeByID.php',
      dataType: "json",
      data: {
        employeeID: employeeID
      },
      success: function(data) {
        
          $('#editEmployeeModal').modal('hide');
          $('#editEmployeeForm').trigger('reset');
          $('#toastSuccessMessage').html(`${employeeToDelete} successfully deleted.`);
          $('#toastSuccess').toast('show');
          $('.modal').css('overflow-y', 'auto');
          $(".modal-backdrop").remove();
          $('#editemployeefirstname').attr("disabled", false);
          $('#editemployeelastname').attr("disabled", false);
          $('#editemployeeemail').attr("disabled", false);
          $('#edit-employee-dept-list').attr("disabled", false);
          $('#delete-employee-confirmation-modal-footer').hide();
          $('#edit-employee-modal-footer').show();
          $("#employee-results").empty();
          $('#search-bar').val("");
          $('#search-results').hide();
          $('#search-results').html("");
          $('#employee-results').show();
          getEmployeeData();
          
          
  
      },
      error: function(jqXHR, textStatus, errorThrown) {
        $('#editEmployeeModal').modal('hide');
        $('#toastErrorMessage').html(`${employeeToDelete} not deleted.<br>${errorThrown}<br>${jqXHR}<br>${textStatus}.`);
        $('#toastError').toast('show');
      }
      
    });

    
  
});

$('#edit-employee-proceed-button').on('click', function(){
  let employeeID = $('#editemployeeid').val();
  let firstName = $('#editemployeefirstname').val();
  let lastName = $('#editemployeelastname').val();
  let email = $('#editemployeeemail').val();
  let department = $('#edit-employee-dept-list').val();
  let jobTitle = $('#editJobTitle').val();

  $.ajax({
    type: "POST",
    url: 'php/updateEmployeeByID.php',
    dataType: "json",
    data: {
      employeeID: employeeID,
      firstName: firstName,
      lastName: lastName,
      jobTitle: jobTitle,
      email: email,
      department: department
    },
    success: function(data) {
      
      $('#editEmployeeModal').modal('hide');
        
        $('#editEmployeeForm').trigger('reset');
        $('#toastSuccessMessage').html(`${firstName} ${lastName} successfully updated.`);
        $('#toastSuccess').toast('show');
        $('.modal').css('overflow-y', 'auto');
        $(".modal-backdrop").remove();
        $('#editemployeefirstname').attr("disabled", false);
        $('#editemployeelastname').attr("disabled", false);
        $('#editemployeeemail').attr("disabled", false);
        $('#edit-employee-dept-list').attr("disabled", false);
        $('#delete-employee-confirmation-modal-footer').hide();
        $('#edit-employee-modal-footer').show();
        $('#search-bar').val("");
        $('#search-results').hide();
        $('#search-results').html("");
        $('#employee-results').show();
        $("#employee-results").empty();
        getEmployeeData();

    },
    error: function(jqXHR, textStatus, errorThrown) {
      $('#editEmployeeModal').modal('hide');
      $('#toastErrorMessage').html(`${firstName} ${lastName} not updated.<br>${errorThrown}<br>${jqXHR}<br>${textStatus}.`);
      $('#toastError').toast('show');
    }
      
    
      
    
  });
});

function populateEditModalWithCurrentInfo(employeeID) {

  /**let employeeFirstName = $(`#first-name-${employeeID}`).html();
  let employeeLastName = $(`#last-name-${employeeID}`).html();
  let departmentID = $(`#one-department-id-${employeeID}`).html();
  let department = $(`#one-department-${employeeID}`).html();
  let jobTitle = $(`#jobTitle-${employeeID}`).html();
  let email = $(`#email-${employeeID}`).html();*/

  $.ajax({
    type: "POST",
    url: 'php/getPersonnelByID.php',
    dataType: "json",
    data: {
      employeeID: employeeID
    },
    success: function(data){
      console.log(data.data.department);
      console.log(data.data.personnel[0]);

      let personnel = data.data.personnel[0];
      let department = data.data.department;
      
      let email = personnel.email;
      let jobTitle = personnel.jobTitle;
      if (email == ""){
        email = "No email address";
      }

      if (jobTitle == ""){
        jobTitle = "Position not allocated";
      }
      $('#editemployeefirstname').val(personnel.firstName);
      $('#editemployeelastname').val(personnel.lastName);
      $('#editemployeeemail').val(email);
      $('#editJobTitle').val(jobTitle);

      department.forEach(function(position){
        $('#edit-employee-dept-list').append(`<option value="${position.id}">${position.name}</option>`)
      });


    }
  });

  
  

}

function populateEditLocationModal(locationID) {
  
  let locationName = $(`#one-location-name-${locationID}`).html();

  $('#updatedLocation').val(locationName);
  $('#edit-location-id').val(locationID);
}

function populateEditDepartmentModal(departmentID) {
  
  let locationID = $(`#location-id-${departmentID}`).html();
  let locationName = $(`#location-name-${departmentID}`).html();
  let departmentName = $(`#department-name-${departmentID}`).html();

  $('#updated-department-name').val(departmentName);
  $('#editdeptlocationlist').empty();
  getLocationData();
  $('#editdeptlocationlist').prepend(`<option value="${locationID}" selected>${locationName}</option>`);
  $('#department-id').val(departmentID);
}


  $('#adddeptform').on("submit", function(event) {
    event.preventDefault();
    
    let deptName = $('#addDeptName').val();
    let location = $('#adddeptlocationlist').val();

  $.ajax({
    type: "POST",
    url: 'php/insertDepartment.php',
    dataType: "json",
    data: {
      deptName: deptName,
      location: location
    },
    success: function(data) {
      
      $('#addDepartmentModal').modal('hide');
      
      $('#adddeptform').trigger('reset');
      $('#toastSuccessMessage').html(`${deptName} successfully added.`);
      $('#toastSuccess').toast('show');
      $(".modal-backdrop").remove();
      $('#addDeptName').attr("disabled", false);
      $('#adddeptlocationlist').attr("disabled", false);
      $('#add-department-confirmation-modal-footer').hide();
      $('#add-department-modal-footer').show();
      $('#department-results').empty();
      getDeptData();
      getEmployeeData();

    },
    error: function(jqXHR, textStatus, errorThrown) {
      $('#addDepartmentModal').modal('hide');
      $('#toastErrorMessage').html(`${deptName} not added.<br>${errorThrown}<br>${jqXHR}<br>${textStatus}.`);
      $('#toastError').toast('show');
    }
      
    
      
    
  });
  })



$('#editDepartmentForm').on("submit", function(event) {
    event.preventDefault();
  let departmentID = $('#department-id').val();
  let updatedDepartmentName = $('#updated-department-name').val();
  let updatedLocation = $('#editdeptlocationlist').val();

  $.ajax({
    type: "POST",
    url: 'php/updateDepartmentByID.php',
    dataType: "json",
    data: {
      departmentID: departmentID,
      updatedDepartmentName: updatedDepartmentName,
      updatedLocation: updatedLocation
    },
    success: function(data) {
      
      $('#editDepartmentModal').modal('hide');
      
      $('#editDepartmentForm').trigger('reset');
      $('#toastSuccessMessage').html(`${updatedDepartmentName} successfully updated.`);
      $('#toastSuccess').toast('show');
      $(".modal-backdrop").remove();
      $('#edit-department-confirmation-modal-footer').hide();
      $('#edit-department-delete-button').show();
      $('#updated-department-name').attr("disabled", false);
      $('#editdeptlocationlist').attr("disabled", false);
      $('#edit-department-modal-footer').show();
      $('#department-results').empty();
      getDeptData();
      getEmployeeData();
      

    },
    error: function(jqXHR, textStatus, errorThrown) {
      $('#editDepartmentModal').modal('hide');
      $('#toastErrorMessage').html(`${updatedDepartmentName} not updated.<br>${errorThrown}<br>${jqXHR}<br>${textStatus}.`);
      $('#toastError').toast('show');
    }
      
    
      
    
  });
})


$('#edit-department-delete-button').on('click', function(){
  
  let departmentID = $('#department-id').val();
  let departmentName = $('#updated-department-name').val();
  
  const areThereEmployeesAssignedToDept = currentData.some((element) => element.departmentID === departmentID); 

  if(areThereEmployeesAssignedToDept) {
    $('#updated-department-name').attr("disabled", true);
    $('#editdeptlocationlist').attr("disabled", true);
    $('#edit-department-delete-button').hide();
    $('#edit-department-modal-footer').hide();
    $('#departmentToEditError').html(`This department still has employees assigned to it. You must either delete these employees or assign them to another department.`);
    $('#delete-department-error-modal-footer').show();
  } else {
    $('#updated-department-name').attr("disabled", true);
    $('#editdeptlocationlist').attr("disabled", true);
    $('#edit-department-delete-button').hide();
    $('#edit-department-modal-footer').hide();
    $('#departmentToDelete').html(`Are you sure you wish to delete ${departmentName}`);
    $('#delete-department-confirmation-modal-footer').show();
  }

  /**New DELETE FUNCTION */

  /**$(document).on('click', '.delete-location-button', function() {
    let locationID = $(this).prev().val();
    console.log(locationID);   
});*/

$('.delete-location-button').on('click', function(){
  let button = $(this);
  let locationID = button.parent().attr('id');
   console.log(locationID);   
});
Tom
  • 17
  • 3
  • Which runs first? `$('.delete-location-button').on('click',` or `locations.forEach(function(position){` sounds like the on-click is running first. – freedomn-m May 06 '22 at 13:54
  • Yes the `locations.forEach` etc runs first. – Tom May 06 '22 at 14:03
  • As long as your locations.forEach *does* run first, your code works fine: https://jsfiddle.net/vt2mx56L/ If your `.on("click"` runs first then you'll get no events when clicking. Please [edit] the question to include a *complete* snippet that *demonstrates* the issue. – freedomn-m May 06 '22 at 14:09
  • My `locations.forEach` definitely runs first. I've updated my question with the entire code block from locations.forEach to where I declare the on click event handler. Still not working unfortunately :( – Tom May 06 '22 at 19:43
  • Your code *clearly* shows that the ".onclick" **runs** first, where it's located in the code is irrelevant. You can check this with a `console.log("1")` in front of the `locations.forEach` and a `console.log("2")` in front of the .onclick. Your `locations.forEach` is run inside an *ajax callback* so *runs* later. You need to use event delegation: `$(document).on("click", '.delete-location-button', function(){` – freedomn-m May 09 '22 at 07:56

1 Answers1

0

Since the input element immediately precedes the button, you can use prev() to retrieve the location id, like this:

button.prev('.location-id').val() (or button.prev().val(), since it is the direct previous sibling).

BUT, it looks like you are creating card elements DYNAMICALLY with append().

This means you cannot bind events directly to these elements, and you have to delegate the event to a static ancestor (like document).

This should work:

$(document).on('click', '.delete-location-button', function() {
    let locationID = $(this).prev().val();
    console.log(locationID);   
});
GrafiCode
  • 3,307
  • 3
  • 26
  • 31
  • Oh dear, it sounds like I've gone about this the hard way. `$(document).on('click', '.delete-location-button', function() { let locationID = $(this).prev().val(); console.log(locationID); });` hasn't worked unfortunately. Thank you though. Can I change the way I'm creating the card elements to make this work? – Tom May 06 '22 at 14:05