javascriptphpbootbox

Pass values into Bootboxjs dialog confirm box

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?

Could someone please kindly guide me to accomplish this method?

Solution

  • 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/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 &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>