Pass PHP variable with key to Bootstrap Modal

Question

The Problem:

I want to get the reservationid out of the clicked td into my Bootstrap modal.

JS Code:

$('#reservationtable tbody td').on('click', function () {
        if($(this).hasClass("reserved") || $(this).hasClass("reserved-right")){
            var reservationid = $(this).attr('id');

            $.ajax({
                cache: false,
                type: 'POST',
                url: 'abfragereservierung.php',
                data: 'reservationid='+reservationid,
                success: function(data)
                {
                    $('#abfrageresrvierung').show();
                }
            });
        }
    });

HTML Code:

<td class="reserved" data-id="'. $counter['1']->reservationid .'">
<td class="reserved" data-id="'. $counter['2']->reservationid .'">
<td class="reserved" data-id="'. $counter['3']->reservationid .'">

Inside of the $counter variable is for each key (1,2,3) a Object of the type Reservation

Bootstrap Modal:

<?php

session_start();

require_once("C:/xampp/htdocs/platzverwaltungssystemprotoyp/app/Models/User.php");
require_once("C:/xampp/htdocs/platzverwaltungssystemprotoyp/app/Controllers/ReservierungsController.php");
require_once("C:/xampp/htdocs/platzverwaltungssystemprotoyp/app/Controllers/UserController.php");
require_once("C:/xampp/htdocs/platzverwaltungssystemprotoyp/app/Models/Reservierung.php");

$resController = new ReservierungsController();

//PLACE WHERE I WANT TO GET THE RESERVATIONID

?>

    <div class="modal fade" id="abfragereservierung" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        .....

UPDATE:

Now i see a POST request with the correct reservationid in it. But i can't use it via $_POST['reservationid']

MODAL:

 <?php

session_start();

require_once("C:/xampp/htdocs/platzverwaltungssystemprotoyp/app/Models/User.php");
require_once("C:/xampp/htdocs/platzverwaltungssystemprotoyp/app/Controllers/ReservierungsController.php");
require_once("C:/xampp/htdocs/platzverwaltungssystemprotoyp/app/Controllers/UserController.php");
require_once("C:/xampp/htdocs/platzverwaltungssystemprotoyp/app/Models/Reservierung.php");

$userController = new UserController();
$resController = new ReservierungsController();
if($_POST['reservationid'] != ""){
    $reservierung = $resController->getReservierungFromId($_POST['reservationid']);
}

?>

<form method="post">
    <div class="modal fade" id="abfragereservierung" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Reservierung Nr. <?php echo $reservierung->reservationid ?></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h6>Daten</h6>
                    <div id="reservationdata">
                        <table class="table table-hover">
                            <tbody>
                            <tr>
                                <th>Name</th>
                                <td><p><?php echo $userController->getUserFromId($_POST['reservationid'])->nachname ?></p></td>
                            </tr>
                            <tr>
                                <th>Platz</th>
                                <td><p><?php echo $reservierung->tenniscourts_tenniscourtid ?></p></td>
                            </tr>
                            <tr>
                                <th>Datum</th>
                                <td><p><?php echo $reservierung->reservierung_am ?></p></td>
                            </tr>
                            <tr>
                                <th>Uhrzeit von</th>
                                <td><p><?php echo $reservierung->reservierungsanfang ?></p></td>
                            </tr>
                            <tr>
                                <th>Uhrzeit bis</th>
                                <td><p><?php echo $reservierung->reservierungsende ?></p></td>
                            </tr>
                            <tr>
                                <th>Bemerkung</th>
                                <td><p><?php echo $reservierung->bemerkung ?></p></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Abbrechen</button>
                    <button class="btn btn-warning" type="submit" name="submit" id="submit" value="submit">Reservierung stornieren</button>
                </div>
            </div>
        </div>
    </div>
</form>

its a data-id attribute var reservationid = $(this).attr('data-id'); — Hassan Kalhoro, Sep 28 '20 at 09:25
What error do you get ? What is the value contained in `reservationid` ? — executable, Sep 28 '20 at 09:25
Or you could use [`.data('id')`](https://api.jquery.com/data) instead of `.attr('data-id')`. — KIKO Software, Sep 28 '20 at 09:27
@executable there is the id of the reservation like '23', '54', ...in reservationid — Gulaschsuppe123, Sep 28 '20 at 09:37
@HassanKalhoro but if it would be successfull the modal would open right? Because it doesn't open — Gulaschsuppe123, Sep 28 '20 at 09:38
it has to be `$('#myModal').modal('show');` Plus, when sending data via ajax without specifiying the data type it should be in JSON. So you want your data to be `data: {reservationid: reservationid}` — Lapskaus, Sep 28 '20 at 09:41
@Lapskaus i implemented your changes but still the modal doesn't open — Gulaschsuppe123, Sep 28 '20 at 09:53
i get this error in the console: jquery.min.js:2 POST http://localhost/platzverwaltungssystemprotoyp/app/Views/reservierung/abfragereservierung.php 404 (Not Found) — Gulaschsuppe123, Sep 28 '20 at 09:54
The ajax call can not find the resource ` url: 'abfragereservierung.php',` check the path. In Addition to that add an error handler to your ajax call to get the errors `error: function(response) {console.log(response)})` — Lapskaus, Sep 28 '20 at 09:58
@Lapskaus should the path reference to the modal itself or to the site where the modal is included? — Gulaschsuppe123, Sep 28 '20 at 09:59
Neither - unless your `abfragereservierung.php` generates the modal code and returns it as a response. The modal has to be on the page where you are calling the ajax code from. — Lapskaus, Sep 28 '20 at 10:05
@Lapskaus i changed a bit of the code and tried it but now i can't get the value out of the $_POST['reservationid'], can you please have a look on my update? — Gulaschsuppe123, Sep 28 '20 at 10:45
And where should that value come from ? From the form within your modal ? There is not a single input field in that form. You need to populate an input field with that data before opening your modal in the ajax call. Something like `$('#abfrageresrvierung').find('#reservationid').val( reservationid );` — Lapskaus, Sep 28 '20 at 11:09

score 0 · Answer 1 · answered Sep 28 '20 at 09:26

0

It should be var reservationid = $(this).attr('data-id');

answered Sep 28 '20 at 09:26

Ray Caballero

435
1
7
14

also, you can use $(this).data("id") instead of that – Jerson Sep 28 '20 at 09:29
yep. you can use either of the two – Ray Caballero Sep 28 '20 at 09:31
@RayCaballero thanks for this correcting but if the ajax would be successfull it would open the modal right? Because the modal doesn't open – Gulaschsuppe123 Sep 28 '20 at 09:38
@Gulaschsuppe123, as per your code the modal should open if it is successful. Check your AJAX or post another question about it here so we can help you. – Ray Caballero Sep 28 '20 at 09:45
Keep in mind, that there is a difference in `.data()` and `.attr()` the expected results may be [confusing when you mix them up](https://stackoverflow.com/questions/7261619/jquery-data-vs-attr) – Lapskaus Sep 28 '20 at 09:46

Pass PHP variable with key to Bootstrap Modal

1 Answers1