There’s a bug in my program, and I’ve been working on it since last night. It’s like no matter what way I try to code this I run into another bug.
The user should be able to click on the edit button for a contact, and then a modal pops up. It loads the contact information correctly, and any changes save to MYSQL and updates the table correctly.
The issue is if you select another contact to update after you save the first. When you select the next contact the modal will pop up with the correct information, but when you go to save and it calls #edit_contact_update the contact_id never updates under this function. Its id is still under the previous contact and therefore updates the prior contact again, with the wrong information.
<script>
$('.edit-contact').click(function(e) {
// Populate the Edit Contact Modal
var contact_id = this.id;
alert("Inital ID = " + contact_id);
$.ajax({
url: "controller/client-view/contact-modale-mysql.php",
type: 'post',
data: {select_contact: contact_id},
dataType: 'json',
success:function(response){
var len = response.length;
for( var i = 0; i<len; i++){
var first_name = response[i]['first_name'];
var last_name = response[i]['last_name'];
var position = response[i]['position'];
var phone_number = response[i]['phone_number'];
var email = response[i]['email'];
var pin = response[i]['pin'];
}
window.parent.document.getElementById("edit_contact_name").value = first_name + " " + last_name;
window.parent.document.getElementById("edit_position").value = position;
window.parent.document.getElementById("edit_phone_number").value = phone_number;
window.parent.document.getElementById("edit_email").value = email;
window.parent.document.getElementById("edit_pin").value = pin;
alert("Updated 2 ID = " + contact_id);
},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
$('#edit_contact_update').click(function() {
alert("Updated ID 3 = " + contact_id);
// Saves any updates to the database
var position = document.getElementById("edit_position").value;
var phone_number = document.getElementById("edit_phone_number").value;
var email = document.getElementById("edit_email").value;
var pin = document.getElementById("edit_pin").value;
alert("Updated ID 4 = " + contact_id);
$.ajax({
url: "controller/client-view/contact-modale-mysql.php",
type: 'post',
data: {update_contact: contact_id, contact_position: position, phone_number: phone_number.replace(/\D/g,''), email: email, pin: pin},
dataType: 'json'
})
alert("position-" + contact_id);
// Update the contact on the contacts tab after uploading to the database
window.parent.document.getElementById("position-" + contact_id).innerHTML = position;
window.parent.document.getElementById("number-" + contact_id).innerHTML = phone_number;
window.parent.document.getElementById("email-" + contact_id).innerHTML = email;
window.parent.document.getElementById("pin-" + contact_id).innerHTML = pin;
});
});
$('.delete-contact').click(function() {
// Marks the contact as deleted
var delete_contact = this.id;
$.ajax({
url: "controller/client-view/contact-modale-mysql.php",
type: 'post',
data: {delete_contact: delete_contact},
dataType: 'json',
success:function(response){},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
// Remove the contact from the contacts table after uploading to the database
$('#row-' + delete_contact).remove();
});
</script>
<?php
$sql1 = "SELECT id, contact_first_name, contact_last_name, contact_position, phone_number, email, pin FROM company_contact WHERE company_uid = '$_POST[company_uid]' AND deleted = false ";
$result = mysqli_query($conn, $sql1);
while($row = mysqli_fetch_assoc($result)) {
echo '<tr id="row-'. $row['id'] . '">';
echo '<td class="align-middle" id="name-'. $row['id'] . '" >' . createFullName($row['contact_first_name'], $row['contact_last_name']) . '</td>';
echo '<td class="align-middle" id="position-'. $row['id'] . '" >' . $row['contact_position'] . '</td>';
echo '<td class="align-middle" id="number-'. $row['id'] . '" >' . phone_number_format($row['phone_number']) . '</td>';
echo '<td class="align-middle" id="email-'. $row['id'] . '" >' . $row['email'] . '</td>';
echo '<td class="align-middle" id="pin-'. $row['id'] . '" >' . $row['pin'] . '</td>';
echo '<td class="align-middle text-right"> <button type="button" id="'. $row['id'] . '" class="btn btn-sm btn-icon btn-secondary edit-contact" data-toggle="modal" data-target="#clientContactEditModal"><i class="fal fa-pencil-alt"></i> <span class="sr-only">Edit</span></button> <button type="button" id="'. $row['id'] . '" class="btn btn-sm btn-icon btn-secondary delete-contact"><i class="fal fa-trash-alt"></i> <span class="sr-only">Remove</span></button> </td>';
echo '</tr>';
}
?>
Modal Located in a Parent Template Page
<!-- .modal -->
<form id="clientContactEditForm" name="clientContactEditForm">
<div class="modal fade" id="clientContactEditModal" tabindex="-1" role="dialog" aria-labelledby="clientContactEditModalLabel" aria-hidden="true">
<!-- .modal-dialog -->
<div class="modal-dialog" role="document">
<!-- .modal-content -->
<div class="modal-content">
<!-- .modal-header -->
<div class="modal-header">
<h6 id="clientContactEditModalLabel" class="modal-title inline-editable">
<span class="sr-only">Contact name</span> <input type="text" class="form-control form-control-lg" id="edit_contact_name" disabled="" required="">
</h6>
</div><!-- /.modal-header -->
<!-- .modal-body -->
<div class="modal-body">
<!-- .form-group -->
<div class="form-group">
<div class="form-label-group">
<input type="text" id="edit_position" class="form-control" placeholder="Position" required="" value="Position"> <label for="edit_position">Position</label>
</div>
</div><!-- /.form-group -->
<!-- .form-group -->
<div class="form-group">
<div class="form-label-group">
<input type="tel" id="edit_phone_number" class="form-control" placeholder="Phone Number" required="Phone Number" value=" "> <label for="edit_phone_number">Phone Number</label>
</div>
</div><!-- /.form-group -->
<!-- .form-group -->
<div class="form-group">
<div class="form-label-group">
<input type="email" id="edit_email" class="form-control" placeholder="E-mail" value="E-mail"> <label for="edit_email">E-mail</label>
</div>
</div><!-- /.form-group -->
<!-- .form-group -->
<div class="form-group">
<div class="form-label-group">
<input type="text" id="edit_pin" class="form-control" placeholder="Pin" value="Pin"> <label for="edit_pin">Pin</label>
</div>
</div><!-- /.form-group -->
</div><!-- /.modal-body -->
<!-- .modal-footer -->
<div class="modal-footer">
<button type="submit" id="edit_contact_update" class="btn btn-primary edit_contact_update" data-dismiss="modal">Save</button> <button type="button" id="edit_contact_cancel" class="btn btn-light" data-dismiss="modal">Close</button>
</div><!-- /.modal-footer -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</form><!-- /.modal -->