Pass values into Bootboxjs dialog confirm box

Question

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 which is the student id for that row.

What did I do?

• I added a variable 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?

Answer 1

Here's a clean way of achieving this:
You need to do the following:

1. Change your PHP code in order to generate the HTML structure I've shown below.
2. Set a 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.
3. You need to reference the student that was clicked and then pick the student ID of the student. In your case you will be having multiple <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.
4. Once the click event is triggered find the parent and its children based on class names ex. 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.' &nbsp;</td>
        <td class="Date" data-date="'.$d->Date.'">Date: '.$d->Date.' &nbsp;</td>
        <td class="Name" data-name="'.$d->Name.'">Name: '.$d->Name.' &nbsp;</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 &nbsp;</td>
    <td class="Date" data-date="2021-01-01">Date: 2021-01-01 &nbsp;</td>
    <td class="Name" data-name="Student One">Name: Student One &nbsp;</td>
    <td><a class="show-confirmation">click to confirm</a></td>
  </tr>

  <tr class="Student">
    <td class="StudentID" data-id="122">ID: 122 &nbsp;</td>
    <td class="Date" data-date="2021-01-02">Date: 2021-01-02 &nbsp;</td>
    <td class="Name" data-name="Student Two">Name: Student Two &nbsp;</td>
    <td><a class="show-confirmation">click to confirm</a></td>
  </tr>

  <tr class="Student">
    <td class="StudentID" data-id="133">ID: 133 &nbsp;</td>
    <td class="Date" data-date="2021-01-03">Date: 2021-01-03 &nbsp;</td>
    <td class="Name" data-name="Student Three">Name: Student Three &nbsp;</td>
    <td><a class="show-confirmation">click to confirm</a></td>
  </tr>

  <tr class="Student">
    <td class="StudentID" data-id="144">ID: 144 &nbsp;</td>
    <td class="Date" data-date="2021-01-04">Date: 2021-01-04 &nbsp;</td>
    <td class="Name" data-name="Student Four">Name: Student Four &nbsp;</td>
    <td><a class="show-confirmation">click to confirm</a></td>
  </tr>
</table>

Answer 2

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.

Answer 3

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);
    });
  })
});

Answer 4

PROBLEM

1. Incorrect selector, use .StudentID instead #StudentID
2. Get text method is incorrect, use text() instead val()

SOLUTION

<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>