Issue
I am making and trying out a web system crude with modals, I'm having trouble with getting data from my datatables to modal because of the table structure and script, i know it has to do something with the structure of the table and the script, I need help in figuring the best way to maintain the table structure and correct the script syntax since I don't have any idea on how to adjust or change the script syntax to match the table
any suggestions or solutions will be much appreciated, Thank you in advance
here's an example image of the output I want to accomplish when i press Update button:
here's my code snippet for data table:
<section class="content">
<div class="container-fluid">
<div class="card card-info elevation-2">
<br>
<div class="col-md-12">
<table id="datatables" class="table table-bordered">
<thead class="btn-cancel">
<tr>
<th>ID No.</th>
<th>Profile Info</th>
<th>Contact Info</th>
<th>Address</th>
<th>Monthly Pension</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<!-- Table data query main -->
<tbody>
<?php
$count=1;
$sel_query="Select * from senior";
$result = mysqli_query($db,$sel_query);
while($row = mysqli_fetch_assoc($result)) { ?>
<tr>
<td><?php echo $row['SeniorID']; ?></td>
<td>
<p class="info"><small class="text-danger">Name:</small><?php echo $row['fname'];?> <?php echo $row['mname'];?> <?php echo $row['lname']; ?></p>
<p class="info"><small class="text-danger">Gender:</small><?php echo $row['gender']; ?></p>
<p class="info"><small class="text-danger">Age:</small> <?php echo $row['age']; ?></p>
</td>
<td>
<p class="info"><small class="text-danger">Contact Person: </small><?php echo $row['econtactpers'];?></p>
<p class="info"><small class="text-danger">Contact Number: </small><?php echo $row['econtactnum'];?></p>
<p class="info"><small class="text-danger">Contact Address: </small><?php echo $row['econtactadd'];?></p>
</td>
<td><?php echo $row['address'];?></td>
<td class=" text-center"><span class="badge bg-warning"> </small><?php echo $row['mopension'];?></span></td>
<td class=" text-center"><span class="badge bg-success">Active</span></td>
<td class="text-center">
<!--data-target="#editmodal" -->
<a class="btn btn-sm btn-success editbtn" data-toggle="modal"><i
class="fa fa-edit editbtn"></i>Update</a>
<!--data delete="#deletemodal" -->
<a class="btn btn-sm btn-danger deletebtn" data-toggle="modal"><i
class="fa fa-trash-alt deletebtn"></i>Delete</a>
</td>
<?php $count++; } ?>
</tr>
</td>
</tbody>
</table>
</div>
</div>
</div>
</section>
and the problem here is the data im getting are in the wrong text area and it just copies the data from the table
modal code snippet here:
<!-- Update Modal -->
<div id="editmodal" class="modal animated rubberBand delete-modal" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-body text-center">
<form action="updatesenior.php" method="POST">
<input type="hidden" name="update_senid" id="update_senid">
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="card-header">
<span class="fa fa-user"> Profile Information</span>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>Senior ID</label>
<input type="text" name="SeniorID" id="SeniorID" class="form-control" placeholder="SNR-123">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>First Name</label>
<input type="text" name="fname" id="fname" class="form-control" placeholder="first name">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Middle Name</label>
<input type="text" name="mname" id="mname" class="form-control" placeholder="middle name">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Last Name</label>
<input type="text" name="lname" id="lname" class="form-control" placeholder="last name">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Gender</label>
<select class="form-control" name="gender" id="gender">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Birthday</label>
<input type="date" name="bday" id="bday" class="form-control">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Age</label>
<input type="number" name="age" id="age" class="form-control" placeholder="Age">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Birth Place</label>
<input type="text" name="birthplace" id="birthplace" class="form-control" placeholder="Birth Place">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Address</label>
<textarea class="form-control" name="address" id="address"></textarea>
</div>
</div>
<div class="col-md-12">
<div class="card-header">
<span class="fa fa-phone"> Contact Information</span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Contact Number</label>
<input type="text" name="contactnum" id="contactnum" class="form-control" placeholder="Contact Number">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>With Pension</label>
<input type="text" name="wpension" id="wpension" class="form-control" placeholder="With Pension">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Monthly Pension</label>
<input type="text" name="mopension" id="mopension" class="form-control" placeholder="Monthly Pension">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Status</label>
<select class="form-control" name="status" id="status" placeholder="Active">
<option>Active</option>
<option>Inactive</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Emergency Contact Person</label>
<input type="text" class="form-control" name="econtactpers" id="econtactpers"
placeholder="Emergency Contact Person">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Emergency Contact Number</label>
<input type="text" class="form-control" name="econtactnum" id="econtactnum"
placeholder="Emergency Contact Number">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Emergency Contact Address</label>
<input type="text" class="form-control" name="econtactadd" id="econtactadd"
placeholder="Emergency Contact Address">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<a href="manage-senior.php" class="btn btn-cancel" data-dismiss="modal">Cancel</a>
<button type="submit" name="updatedata" class="btn btn-primary">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
script code snippet here:
<!-- edit/update -->
<script>
$(document).ready(function() {
$('.editbtn').on('click', function() {
$('#editmodal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function(){
return $(this).text();
}).get();
console.log(data);
$('#SeniorID').val(data[0]);
$('#fname').val(data[1]);
$('#mname').val(data[2]);
$('#lname').val(data[3]);
$('#gender').val(data[4]);
$('#bday').val(data[5]);
$('#age').val(data[6]);
$('#birthplace').val(data[7]);
$('#address').val(data[8]);
$('#contactnum').val(data[9]);
$('#wpension').val(data[10]);
$('#mopension').val(data[11]);
$('#status').val(data[12]);
$('#econtactpers').val(data[13]);
$('#econtactnum').val(data[14]);
$('#econtactadd').val(data[15]);
});
});
</script>
i tried searching for solutions from several websites like w3schools for the table structure and script but still didn't get the output i want to happen
Solution
The issue is that for some of the various <td> elements, contain other sub-element(s) such as <small>, <a>, <p> and not only text like the senior id and address columns, so the .text() fetch is getting ALL related texts, including what is used to label the fields within each <td>.
So, it is possible to extract the expected data, but in the example below, I had to wrap the data within <span> tags in some sub-elements to help extract only that portion of the data.
Because the Senior ID and Address columns do not have any sub-elements, the data from these can be extracted as-is without needing to add a <span> tag.
Try the example below:
(it's a rough example, I don't have all the UI modal elements available)
- When
Updateis clicked, the personal information area will get populated. (Know that I only covered the first row from the first image to use in the example, so not all fields are covered) - I added function
getChildTextsto get an array of texts when<span>sub-element(s) are found. - The code changes applied are within the
mapfunction that you have and the added function mentioned with item 2. Plus in the HTML where the<span>tags were added to surround the data within the sub-elements. - The
console.logwill show the fetched array items. (it is possible to scroll above the console output to see the personal information fields populated, though it will be a small area)
$(document).ready(function() {
$('.editbtn').on('click', function() {
//$('#editmodal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function(){
// Look for <span> tag(s)
var spanElements = $(this).find('span');
if (spanElements.length) {
// Get a text array from the span(s)
return getChildTexts(spanElements);
} else if ($(this).find('a').length) {
// ignore the td with links
} else {
// no sub-element(s), get the text
return $(this).text();
}
}).get();
console.log(data);
$('#SeniorID').val(data[0]);
$('#fname').val(data[1]);
$('#mname').val(data[2]);
$('#lname').val(data[3]);
$('#gender').val(data[4]);
// $('#bday').val(data[5]);
$('#age').val(data[5]);
// $('#birthplace').val(data[7]);
$('#address').val(data[9]);
$('#contactnum').val(data[8]);
// $('#wpension').val(data[10]);
$('#mopension').val(data[10]);
$('#status').val(data[11]);
// $('#econtactpers').val(data[13]);
// $('#econtactnum').val(data[14]);
// $('#econtactadd').val(data[15]);
});
});
function getChildTexts(elements) {
var childTexts = [];
elements.each(function(i, e) {
childTexts.push($(e).text());
});
return childTexts;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>SNR-123</td>
<td>
<p class="info"><small class="text-danger">Name:</small><span>This</span> <span>is</span> <span>Atest</span></p>
<p class="info"><small class="text-danger">Gender:</small><span>Female</span></p>
<p class="info"><small class="text-danger">Age:</small> <span>65</span></p>
</td>
<td>
<p class="info"><small class="text-danger">Contact Person: </small><span>PaulT</span></p>
<p class="info"><small class="text-danger">Contact Number: </small><span>555-1212</span></p>
<p class="info"><small class="text-danger">Contact Address: </small><span>1313 somewhere</span></p>
</td>
<td>549 Heehaw street</td>
<td class=" text-center"><span class="badge bg-warning">500</span></td>
<td class=" text-center"><span class="badge bg-success">Active</span></td>
<td class="text-center">
<!--data-target="#editmodal" -->
<a class="btn btn-sm btn-success editbtn" data-toggle="modal"><i class="fa fa-edit editbtn"></i>Update</a>
<!--data delete="#deletemodal" -->
<a class="btn btn-sm btn-danger deletebtn" data-toggle="modal"><i class="fa fa-trash-alt deletebtn"></i>Delete</a>
</td>
</tr>
</table>
<div>
<div class="card-header">
<span class="fa fa-user"> Profile Information</span>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>Senior ID</label>
<input type="text" name="SeniorID" id="SeniorID" class="form-control" placeholder="SNR-123">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>First Name</label>
<input type="text" name="fname" id="fname" class="form-control" placeholder="first name">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Middle Name</label>
<input type="text" name="mname" id="mname" class="form-control" placeholder="middle name">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Last Name</label>
<input type="text" name="lname" id="lname" class="form-control" placeholder="last name">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Gender</label>
<select class="form-control" name="gender" id="gender">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Birthday</label>
<input type="date" name="bday" id="bday" class="form-control">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Age</label>
<input type="number" name="age" id="age" class="form-control" placeholder="Age">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Birth Place</label>
<input type="text" name="birthplace" id="birthplace" class="form-control" placeholder="Birth Place">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Address</label>
<textarea class="form-control" name="address" id="address"></textarea>
</div>
</div>
<div class="col-md-12">
<div class="card-header">
<span class="fa fa-phone"> Contact Information</span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Contact Number</label>
<input type="text" name="contactnum" id="contactnum" class="form-control" placeholder="Contact Number">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>With Pension</label>
<input type="text" name="wpension" id="wpension" class="form-control" placeholder="With Pension">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Monthly Pension</label>
<input type="text" name="mopension" id="mopension" class="form-control" placeholder="Monthly Pension">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Status</label>
<select class="form-control" name="status" id="status" placeholder="Active">
<option>Active</option>
<option>Inactive</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Emergency Contact Person</label>
<input type="text" class="form-control" name="econtactpers" id="econtactpers"
placeholder="Emergency Contact Person">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Emergency Contact Number</label>
<input type="text" class="form-control" name="econtactnum" id="econtactnum"
placeholder="Emergency Contact Number">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Emergency Contact Address</label>
<input type="text" class="form-control" name="econtactadd" id="econtactadd"
placeholder="Emergency Contact Address">
</div>
</div>
</div>Hope that helps, feel free to ask any questions about the handling.
Side note:
I noted at the loop that creates the rows, that the closing row's </tr> is outside the loop's closing }, and there is a stray closing </td> tag after that. The browser apparently handles that gracefully, but worth a little clean-up.
Answered By - Paul T.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.