I have a PHP
foreach loop like this:
<?php
foreach ($student->student as $d) {
echo
'<tr>'
'<td class="StudentID">' . $d->ID . '</td>' .
'<td>' . $d->Date . '</td>' .
'<td>' . $d->Name . '</td>' .
'<td><a class="show-confirmation">'. "click to confirm" . '</a></td>' .
'</tr>';
}
?>
I am using a bootbox js
for a dialog box like this:
<script>
$(document).on("click", ".show-confirmation", function(e) {
var StudentID = $('#StudentID').val();
bootbox.confirm("Confirm, student ID? " + StudentID, function(result) {
console.log('This was logged in the callback: ' + result);
console.log('StudentID: ' + StudentID);
});
});
</script>
what I am trying to accomplish is when I click on click to confirm
which has class="show-confirmation"
, I want to get the value of $d->ID
on the bootbox js
confirm dialog box. Since this is a for each
loop, I want to pass a new student id each time on the dialog confirm box.
On the confirm dialog, I want to see Confirm, student ID? + 15
Confirm, student ID? + 15
which is the student id for that row.
What did I do?
var StudentID = $('#StudentID').val();
hoping to fetch the student id value from the class StudentID
eg: <td class="StudentID">
but it is undefined
when I am accessing it.Could someone please kindly guide me to accomplish this method?
Your $('#StudentID')
is looking for an element with that as an id attribute which you have set up as a class instead. Change to $('.StudentID')
instead.
Here's a clean way of achieving this:
You need to do the following:
data
attribute on the elements to hold data that you require in code. This way you can shown fancy formatted data to user in the element's innerHTML
and have data that can be directly used in code as data attribute values.<td class="StudentID">
and $('.StudentID').val()
will not be able to identify which was the clicked item from all the student rows. Hence if you notice I have created a class called Student
on the parent tr
.StudentID
or Date
or Name
and pick the data attributes you require in code. Below is a working sample:
# PHP CODE
<?
echo '<table>';
foreach ($student->student as $d) {
echo
'<tr class="Student">
<td class="StudentID" data-id="'.$d->ID.'">ID: '.$d->ID.' </td>
<td class="Date" data-date="'.$d->Date.'">Date: '.$d->Date.' </td>
<td class="Name" data-name="'.$d->Name.'">Name: '.$d->Name.' </td>
<td><a class="show-confirmation">click to confirm</a></td>
</tr>';
}
echo '</table>';
?>
$(function() { $(".show-confirmation").on("click", function(e) { let student = $(this).closest('.Student'); let StudentID = student.find('.StudentID').data('id'); let date = student.find('.Date').data('date'); let name = student.find('.Name').data('name'); bootbox.confirm(`Confirm, student? ${StudentID}`, function(result) { console.log('This was logged in the callback: ' + result); console.log('StudentID: ' + StudentID); console.log('Date:' + date); console.log('Name:' + name); }); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js"></script> <table> <tr class="Student"> <td class="StudentID" data-id="111">ID: 111 </td> <td class="Date" data-date="2021-01-01">Date: 2021-01-01 </td> <td class="Name" data-name="Student One">Name: Student One </td> <td><a class="show-confirmation">click to confirm</a></td> </tr> <tr class="Student"> <td class="StudentID" data-id="122">ID: 122 </td> <td class="Date" data-date="2021-01-02">Date: 2021-01-02 </td> <td class="Name" data-name="Student Two">Name: Student Two </td> <td><a class="show-confirmation">click to confirm</a></td> </tr> <tr class="Student"> <td class="StudentID" data-id="133">ID: 133 </td> <td class="Date" data-date="2021-01-03">Date: 2021-01-03 </td> <td class="Name" data-name="Student Three">Name: Student Three </td> <td><a class="show-confirmation">click to confirm</a></td> </tr> <tr class="Student"> <td class="StudentID" data-id="144">ID: 144 </td> <td class="Date" data-date="2021-01-04">Date: 2021-01-04 </td> <td class="Name" data-name="Student Four">Name: Student Four </td> <td><a class="show-confirmation">click to confirm</a></td> </tr> </table>
The problem is
First, you should use .StudentID
instead of #StudentID
. Because it is class name and not id. So, it should be.
var StudentID = $('.StudentID').val();
And, .val()
is used for input. It should works if your element looks like this
<input class="StudentID" value="id goes here" />
Instead, you should use .html()
or .text()
. The differences is, .html()
also return the HTML tag, while .text()
only return the text node.
So, your JS should be look like this
var StudentID = $('.StudentID').text();
But, the next thing is you are have bunch of StudentIDs which you will get concatenated text. So, you should use .each()
. And also, it is quite hard to make the button can access the right id. It is because the id is not inside the button. So, your elements should have same identifiable parent element.
So, your code should look like this.
<?php
foreach ($student->student as $d) {
// add class to tr
echo
'<tr class="student">'
'<td class="StudentID">' . $d->ID . '</td>' .
'<td>' . $d->Date . '</td>' .
'<td>' . $d->Name . '</td>' .
'<td><a class="show-confirmation">'. "click to confirm" . '</a></td>' .
'</tr>';
}
?>
$(".student").each((i, el) => {
const id = $(el).find(".StudentID").text();
const btn = $(el).find(".show-confirmation");
btn.on('click', () => {
bootbox.confirm("Confirm, student ID? " + id, (result) => {
console.log('This was logged in the callback: ' + result);
console.log('StudentID: ' + id);
});
})
});
.StudentID
instead #StudentID
text()
instead val()
<script>
$(document).on("click", ".show-confirmation", function(e) {
var StudentID = $(".StudentID").text();
bootbox.confirm("Confirm, student ID? " + StudentID, function(result) {
console.log("This was logged in the callback: " + result);
console.log("StudentID: " + StudentID);
});
});
</script>
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.