Populating modal from modal

[Adamhumbug]

HI have a modal that calls another modal to confirm deletion.

On the confirm delete modal i want to show what the user that will be deleted has active in the system.

I am passing through the active stuff that they have on the button using data-activesheets="".

it all seems to work fine first time around.

If you back out of the modals and click another user that doesnt have any active stuff, the modal content does not change.

This is the JS that i am using to populate the second modal (with much help from @Barand)

		$('#userDeleteConfirmationModal').on('show.bs.modal', function(event) {
		// Button that triggered the modal
		var button = $(event.relatedTarget)
		//data elements
		var userid = button.data('userid')
		var activesheets = button.data('activesheets').split(", ").join("<br/>")
		console.log(activesheets);
		var modal = $(this)
		modal.find('#deleteUserConfLabel').text(userid)
		modal.find('#active-sheets-label').text('This user has the following active sheets')
		modal.find('#active-sheets').html(activesheets)

		})

I feel like it is setting the values and when it loads for the second time, it does not reset the values or remove them if they should be there.

[Barand]

Just a guess, but do you have several objects with same id (#userDeleteConfirmationModal)?

[Adamhumbug]

23 minutes ago, Barand said:

Just a guess, but do you have several objects with same id (#userDeleteConfirmationModal)?

Well there is only one...but when you click any of the manage buttons it pops it.

[Adamhumbug]

This is the whole page

<?php if (session_status() == PHP_SESSION_NONE) {
  session_start();
}

if (!isset($_SESSION['user_id'])){
	header("location: index.php");
}

$_SESSION['this_page'] = 'equipment-list';
 ?>

<?php include '_includes/head.php'; ?>
<div class="container-fluid">
	<div class="row">
		<?php include '_includes/header.php'; ?>
	</div>
	<div class="row">
		<div class="col-sm-2 p-0 bg-dark text-light" style="height: calc(100vh - 50px);">
			<?php include '_includes/nav.php'; ?>
		</div>
		<div class="col-sm-10">
			<?php 
				if(isset($_SESSION['updateEquipment'])){
					echo '<div id="infomessage" class="alert alert-'.$_SESSION["actionstatus"].' mt-3 text-center text-uppercase">';
					echo "<b>".$_SESSION['eqname'] . "</b> " . $_SESSION['updateEquipment'];
					echo "</div>";
				}
				unset($_SESSION['updateEquipment']);
				unset($_SESSION['eqname']);

				?>
					<div class="scroll-fh">
						<div id="equipmentTable" >
							<?php 
							include '_includes/dbconn.php';
								$sql = 'SELECT equipment_name, equipment_category_name, b.equipment_category_id, equipment_quantity, equipment_id 
										FROM ssm_equipment a 
										left join ssm_equipment_category b 
										on a.equipment_category_id = b.equipment_category_id
										ORDER BY equipment_name ASC';
								if ($result = mysqli_query($conn, $sql)){
									if(mysqli_num_rows($result) > 0){
									echo "<form method='post' id='equipmentListForm'>";
									echo "<div class='input-group mt-3 mb-3'>";
									echo "<div class='input-group-prepend'>";
									echo "<span class='input-group-text'>Search (alt/option+s)</span>";
									echo "</div>";
									echo "<input id='equipmentTableSearch' onkeyup='searchTable()' type='text' class='form-control' placeholder='Plates...Soup Spoon...Red Wine Glass...'>";
									echo "</div>";
										echo "<table id='equipmenttable' class='table table-striped table-hover table-bordered text-center mt-3'><thead class='thead-dark'><tr>";
										echo "<th>Equipment Name</th>";
										echo "<th>Equipment Category</th>";
										echo "<th>Equipment Quantity</th>";
										echo "<th>Manage</th>";
										echo "</thead></tr>";
										echo "<tbody>";
										while ($row = mysqli_fetch_array($result)){
											echo '<tr>';
											echo '<td class="align-middle">'. $row['equipment_name'] . '</td>';
											echo '<td class="align-middle">'. $row['equipment_category_name'] . '</td>';
											echo '<td class="align-middle">'. $row['equipment_quantity'] . '</td>';
											echo "<td><div class='btn btn-primary col-sm-12' 
												data-toggle='modal' 
												data-target='#equipmentModal' 
												data-equipmentid='".$row['equipment_id']."' 
												data-equipmentname='".$row['equipment_name']."' 
												data-equipmentcategory='".$row['equipment_category_id']."' 
												data-equipmentquantity='".$row['equipment_quantity']."'
												>Manage</div>";
											echo '</tr>';
										}
										echo '</tbody>';
										echo '</table>';
										echo "</form>";
									}

								}

							 ?>
						</div>
						
					</div>

			<!-- User Modal -->
			<div class="modal fade" id="equipmentModal" tabindex="-1" role="dialog">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title" id="equipmentModalLabel">Update Equipment</h4>
							<button type="button" class="close" data-dismiss="modal" >
							<span >&times;</span>
							</button>
						</div>
						<form method="POST" action="actions/update-equipment-action.php" id="updateEquipmentSubmit">
							<div class="modal-body">
								<input type="hidden" name="EM-id" id="EM-id">
								<div class="md-form">
									<div class="col-md-12 mb-3">
										<div class="input-group mb-3">
											<div class="input-group-prepend">
												<span class="input-group-text modalprew">Item Name</span>
											</div>
											<input name="EM-name" id="EM-name" type="text" class="form-control" placeholder="Equipment Item Name" required>
										</div>
										<div class="input-group mb-3">
													<div class="input-group-prepend">
														<span class="input-group-text modalprew">Category</span>
													</div>
													<select name="EM-category" id="EM-category" class="custom-select">
														<?php
														$sql = "SELECT equipment_category_id, equipment_category_name From ssm_equipment_category ORDER BY equipment_category_name ASC";
														if($result = mysqli_query($conn, $sql)){
															if (mysqli_num_rows($result)>0){
																while ($row = mysqli_fetch_array($result)){
																	echo "<option value='".$row['equipment_category_id']."'>".$row['equipment_category_name']."</option>";
																}
															}
														}
														?>
														
													</select>
												</div>
										<div class="input-group mb-3">
											<div class="input-group-prepend">
												<span class="input-group-text modalprew">Quantity</span>
											</div>
											<input name="EM-quantity" id="EM-quantity" type="text" class="form-control" placeholder="Equipment Quantity" required>
										</div>
									</div>
								</div>
							</div>
							<div class="modal-footer">
								<button id="updateEquipment" type="submit" class="btn btn-primary">Update Equipment</button>
								<button name="delete-equipment-button" formaction="actions/delete-equipment-action.php" id="deleteEquipment" type="submit" class="btn btn-danger">Delete Equipment</button>
								
								
							</div>
						</form>
					</div>
				</div>
			</div>

			<script>
			$('#equipmentModal').on('show.bs.modal', function(event) {
			// Button that triggered the modal
			var button = $(event.relatedTarget)
			//data elements
			var equipmentid = button.data('equipmentid')
			var equipmentname = button.data('equipmentname')
			var equipmentcategory = button.data('equipmentcategory')
			var equipmentquantity = button.data('equipmentquantity')
			var modal = $(this)

			modal.find('.modal-title').text('Update Equipment - ' + equipmentname + ' x ' + equipmentquantity)
			modal.find('.modal-body #EM-id').val(equipmentid)
			modal.find('.modal-body #EM-name').val(equipmentname)
			modal.find('.modal-body #EM-category').val(equipmentcategory)
			modal.find('.modal-body #EM-quantity').val(equipmentquantity)
			})
			</script>
			<!-- End Of User Modal -->
			<div class="col-sm-12"><?php include '_includes/footer.php'; ?></div>
		</div>

	</div>
	
</div>

<script>
	//set sidebar active indicator
	if(document.getElementById('equipment')){
		document.getElementById('equipment').classList.add('show')
	}
	if(document.getElementById('equipmentList')){
		document.getElementById('equipmentList').classList.add('blOrange')
	}
		$('#infomessage').fadeIn('fast').delay(3000).fadeOut('3000');


function searchTable() {
    var input, filter, found, table, tr, td, i, j;
    input = document.getElementById("equipmentTableSearch");
    filter = input.value.toUpperCase();
    table = document.getElementById("equipmenttable");
    tr = table.getElementsByTagName("tr");
    for (i = 1; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        for (j = 0; j < td.length; j++) {
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                found = true;
            }
        }
        if (found) {
            tr[i].style.display = "";
            found = false;
        } else {
            tr[i].style.display = "none";
        }
    }
}

//keyboard shortcut to search bar
document.onkeyup = function(e) {
  if (e.altKey && e.which == 83) {
  	document.getElementById(equipmentTableSearch.id).focus();
	document.getElementById(equipmentTableSearch.id).select();

  } 
};
	
</script>