Bootstrap 5 Modal not receiving data from PHP with AJAX

Question

I have a modal in bootstrap 5 that i'm trying to populate with custom data from a mysql database depending on the option i'm selecting.

So I have a table that is populated with some data using PHP and MYSQL. The last column of the table is a button called "Actions" and I want to have a modal opened when I press this button that is filled with the information from the row where I pressed the button (every row contains this button as the last column).

As you can see in the below code, I have the exact same code as I found out in the sollution in this question: Pass PHP variable to bootstrap modal

Here is my code:

In the main index file:

...
...
<tbody>
    <?php $categories = Category::find_all();
    foreach ($categories as $category) { ?>

        <tr>
            <th scope="row"><?php echo $category->id; ?></th>
            <td><?php echo $category->cat_name; ?></td>
            <td><?php echo $category->cat_creation_date; ?></td>
            <td><?php echo $category->cat_created_by; ?></td>
            <td><a type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#bsMyModal" data-id="<?php echo $category->id; ?>">Actions</a></td>
        </tr>
    <?php } ?>

</tbody>
...
...

Modal code (in the same file as the above table):

<div class="modal fade" id="bsMyModal" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Edit Data</h4>
                </div>
                <div class="modal-body">
                    <div class="fetched-data"></div> //Here Will show the Data
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

JS code (just below the end of body in the same file)

</body>

<script>
$(document).ready(function(){
    $('#bsMyModal').on('show.bs.modal', function (e) {
        var rowid = $(e.relatedTarget).data('id');
        $.ajax({
            type : 'post',
            url : 'fetch_record.php', //Here you will fetch records 
            data :  'rowid='+ rowid, //Pass $id
            success : function(data){
                $('.fetched-data').html(data);//Show fetched data from database
            }
        });
     });
});

</script>

Also the fetch_record.php file which is a basic file just to have this working:

<?php
 require_once "backend/init.php"; 

if($_POST['rowid']) {
    $id = $_POST['rowid']; //escape string
    echo $id;
 }
?>

Now the problem.. nothing happens

The modal openes when I press the Actions button, but I don't get any information (in this specific case I should be getting the category id printed out before the "//Here Will show the Data" text in the modal code.

I looked at the console and I've seen this message:

ajax:681 Uncaught ReferenceError: $ is not defined
    at ajax:681:1
(anonymous) @ ajax:681

If i click the link at @ ajax:681, it points me to this:

enter image description here

What am I doing wrong?...

Thank you!

Answer 1

Stupid mistake...

I tought about searching for the console error and come upon this:

Uncaught ReferenceError: $ is not defined?

And yes.. I was using the script before referencing the jQuery.. I moved it after the jQuery include and now it works.

Dumb