Table inside Modal is populated every row and not individually
Question
I have arrays inside objects, and I want to populate that specific array ("Edu") in the modal accordingly for each row. So, if a user clicks on a "Info" modal button, it should only display that certain array ("Edu"). However, all of my arrays are populated in every modal..
I believe my problem is how I am putting the values of the array inside the table when I append the table rows. It's putting everything inside the same table body.
Would someone give me a help or a guidance on this? I do not have much experience with jQuery and a help would be really appreciated.
Here is the HTML:
<html>
<head>
<title>Hello Student</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="parentTable">
<thead>
<tr class="category">
<th></th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody id="parentTableBody">
</tbody>
</table>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<h3>Info</h3>
<div class="well well-sm overflow-auto">
<table class="table table-striped table-hover table-condensed" id="schoolTable">
<thead>
<tr>
<th/>
<th>School</th>
<th>Grade</th>
<th>Job</th>
<th>Martial</th>
<th>Etc</th>
</tr>
</thead>
<tbody id="schoolModalBody">
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the Javascript + jQuery:
$(document).ready(function() {
var arr1 = generateItem();
if (arr1) {
var arr2 = [].concat(arr1);
var tr;
$.each(arr2, function(i, e) {
tr = $('<tr>');
tr.append("<td>" + "<button id='modalBtn' type='button' class='btn btn-info' data-toggle='modal' data-target='#myModal'>Info</button>" + "</td>");
tr.append("<td>" + (e.Name || "") + "</td>");
tr.append("<td>" + (e.Email || "") + "</td>");
tr.append("<td>" + (e.Phone || "") + "</td>");
$('#parentTableBody').append(tr);
populateSchoolInfo(e);
});
}
});
function populateSchoolInfo(kid) {
var tr;
$.each(kid.Edu, function(j, v){
tr = $('<tr>');
tr.append("<td>" + (v.School || "") + "</td>");
tr.append("<td>" + (v.Grade || "") + "</td>");
tr.append("<td>" + (v.Job || "") + "</td>");
tr.append("<td>" + (v.Martial || "") + "</td>");
tr.append("<td>" + (v.ETC || "") + "</td>");
$('#schoolModalBody').append(tr);
});
}
function generateItem() {
var kids = [{
Name: "Gina",
Email: "gina@email.com",
Phone: "211-456-1234",
Edu:[{School: "college", Grade: "Freshmen", Job: "Student", Martial: "S", ETC: " "}]
},
{
Name: "Mark",
Email: "mark@email.com",
Phone: "144-411-2312",
Edu:[{School: "highschool", Grade: "senior", Job: "cashier", Martial: "S", ETC: "honors"}]
},
{
Name: "Jake",
Email: "jake@email.com",
Phone: "333-211-1111",
Edu:[{School: "highschool", Grade: "senior", Job: "cashier", Martial: "S", ETC: "honors"}]
}
];
return kids;
}
Thank you
1 answers
solution1
2 ACCPTED 2018-08-28 18:31:48
So, if a user clicks on a "Info" modal button, it should only display that certain array ("Edu"). However, all of my arrays are populated in every modal..
This happens because you populate the modal table at dom ready.
You can listen for show.bs.modal event in order to hide every row and show only the interested one.
Code added:
$('#myModal').on('show.bs.modal', function (e) {
var idx = $(e.relatedTarget).closest('tr').index();
$('#schoolModalBody tr').hide().eq(idx).show();
});
Updated fiddle here
Because IDs need to be unique I suggest to remove id='modalBtn' in your for loop or if you need them at all costs i suggest to change the button in for loop like:
id='modalBtn" + i + "'
$(document).ready(function() { var arr1 = generateItem(); if (arr1) { var arr2 = [].concat(arr1); var tr; $.each(arr2, function(i, e) { tr = $('<tr>'); tr.append("<td>" + "<button id='modalBtn" + i + "' type='button' class='btn btn-info' data-toggle='modal' data-target='#myModal'>Info</button>" + "</td>"); tr.append("<td>" + (e.Name || "") + "</td>"); tr.append("<td>" + (e.Email || "") + "</td>"); tr.append("<td>" + (e.Phone || "") + "</td>"); $('#parentTableBody').append(tr); populateSchoolInfo(e); }); } $('#myModal').on('show.bs.modal', function (e) { var idx = $(e.relatedTarget).closest('tr').index(); $('#schoolModalBody tr').hide().eq(idx).show(); }); }); function populateSchoolInfo(kid) { var tr; $.each(kid.Edu, function(j, v){ tr = $('<tr>'); tr.append("<td>" + (v.School || "") + "</td>"); tr.append("<td>" + (v.Grade || "") + "</td>"); tr.append("<td>" + (v.Job || "") + "</td>"); tr.append("<td>" + (v.Martial || "") + "</td>"); tr.append("<td>" + (v.ETC || "") + "</td>"); $('#schoolModalBody').append(tr); }); } function generateItem() { var kids = [{ Name: "Gina", Email: "gina@email.com", Phone: "211-456-1234", Edu:[{School: "college", Grade: "Freshmen", Job: "Student", Martial: "S", ETC: " "}] }, { Name: "Mark", Email: "mark@email.com", Phone: "144-411-2312", Edu:[{School: "highschool", Grade: "senior", Job: "cashier", Martial: "S", ETC: "honors"}] }, { Name: "Jake", Email: "jake@email.com", Phone: "333-211-1111", Edu:[{School: "highschool", Grade: "senior", Job: "cashier", Martial: "S", ETC: "honors"}] } ]; return kids; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> <table id="parentTable"> <thead> <tr class="category"> <th></th> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody id="parentTableBody"> </tbody> </table> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <h3>Info</h3> <div class="well well-sm overflow-auto"> <table class="table table-striped table-hover table-condensed" id="schoolTable"> <thead> <tr> <th>School</th> <th>Grade</th> <th>Job</th> <th>Martial</th> <th>Etc</th> </tr> </thead> <tbody id="schoolModalBody"> </tbody> </table> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Close</button> </div> </div> </div> </div>
Just a quick question: If there are multiple arrays inside that one object,.....
In this case you can generate the rows in the modal table with an attribute so that all the rows belonging to the same student have the same attribute. On the other side, instead of using jQuery.eq(), you can filter by attribute:
$('#schoolModalBody tr').hide().filter('[studentidx=' + idx + ']').show();
$(document).ready(function () { var arr1 = generateItem(); if (arr1) { var arr2 = [].concat(arr1); var tr; $.each(arr2, function (i, e) { tr = $('<tr>'); tr.append("<td>" + "<button id='modalBtn" + i + "' type='button' class='btn btn-info' data-toggle='modal' data-target='#myModal'>Info</button>" + "</td>"); tr.append("<td>" + (e.Name || "") + "</td>"); tr.append("<td>" + (e.Email || "") + "</td>"); tr.append("<td>" + (e.Phone || "") + "</td>"); $('#parentTableBody').append(tr); populateSchoolInfo(i, e); }); } $('#myModal').on('show.bs.modal', function (e) { var idx = $(e.relatedTarget).closest('tr').index(); $('#schoolModalBody tr').hide().filter('[studentidx=' + idx + ']').show(); }); }); function populateSchoolInfo(idx, kid) { var tr; $.each(kid.Edu, function (j, v) { tr = $('<tr>', {studentidx: idx}); tr.append("<td>" + (v.School || "") + "</td>"); tr.append("<td>" + (v.Grade || "") + "</td>"); tr.append("<td>" + (v.Job || "") + "</td>"); tr.append("<td>" + (v.Martial || "") + "</td>"); tr.append("<td>" + (v.ETC || "") + "</td>"); $('#schoolModalBody').append(tr); }); } function generateItem() { var kids = [{ Name: "Gina", Email: "gina@email.com", Phone: "211-456-1234", Edu: [{School: "college", Grade: "Freshmen", Job: "Student", Martial: "S", ETC: " "}, {School: "college2", Grade: "Freshmen2", Job: "Student2", Martial: "S2", ETC: "2"}, {School: "college3", Grade: "Freshmen3", Job: "Student3", Martial: "S3", ETC: "3"}] }, { Name: "Mark", Email: "mark@email.com", Phone: "144-411-2312", Edu: [{School: "highschool", Grade: "senior", Job: "cashier", Martial: "S", ETC: "honors"}] }, { Name: "Jake", Email: "jake@email.com", Phone: "333-211-1111", Edu: [{School: "highschool", Grade: "senior", Job: "cashier", Martial: "S", ETC: "honors"}] } ]; return kids; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <table id="parentTable"> <thead> <tr class="category"> <th></th> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody id="parentTableBody"> </tbody> </table> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <h3>Info</h3> <div class="well well-sm overflow-auto"> <table class="table table-striped table-hover table-condensed" id="schoolTable"> <thead> <tr> <th>School</th> <th>Grade</th> <th>Job</th> <th>Martial</th> <th>Etc</th> </tr> </thead> <tbody id="schoolModalBody"> </tbody> </table> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Close</button> </div> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Datatable with a nested table inside every row
Add row to a table populated by thymeleaf
onClick table row with onClick Button and Bootstrap Modal inside
How to populate modals individually from input in every row?
Multiple Modal on Table Row
Acess the table data <td> row by row <tr> individually
Jquery Use Row of Table Populated By PHP in Loop
Create clickable row of a js populated table
MUI-Datatable: TableHead inside Expandable Row keeps on repeating for every row of the table and table does not center
I have a clickable row that opens a modal, I would like the modal to be populated with the contents of the row
Related Tags