modals showing blank after ajax call

I am developing a page in php that has multiple dynamic modals for displaying pdf files in the page itself with respective title and author names. All the data comes from a database designed in MySQL. The trigger buttons are also meant to be dynamic. I have tried the following code. The problem is I am getting the modals blank. I am able to print the data in fetch-reader.php page itself. I think I am doing something wrong in AJAX or modal part. Please guide me through it.

<?php $sqlGal = "select * from articles where year = '2019'";

$queryGal = $con->query($sqlGal);

if ($queryGal->num_rows > 0) {

    while ($row = $queryGal->fetch_array()) { ?>

    <div class="col-md-3 gallery-grid">

        <h3 style="height: 200px; vertical-align: bottom; margin: 0; display: table-cell;"><?php echo($row['title']) ?></h3>

        by<h4><?php echo($row['name']) ?></h4>

        <a href="#myReader" class="btn btn-success" id="readerID" data-toggle="modal" data-id="<?php echo($row['id']); ?>"> <i class="fa fas fa-book-open"></i> Read</a>

    </div>

    <?php }
}
?><div class="clearfix"></div>

<div class="modal fade" id="myReader" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 id="articleName"></h3>
                <h4 id="name"></h4>
                <h6 id="position"></h6>
                <h6 id="address"></h6>
            </div>
            <div class="modal-body">
                <object data="" id="reader" width="100%" height="450px"></object></div>
            </div>
        </div>
    </div>
</div>

in <script> part

$(document).ready(function() {
    $('#myReader').on('show.bs.modal', function(e) {
        var rowid = $(e.relatedTarget).data('id');
        $.ajax({
            type: 'get',
            url: 'include/fetch_reader.php',
            data: 'rowid='+rowid,
            dataType: 'json',
            success : function(response) {
                $('#articleName').text(response.title);
                $('#name').text(response.name);
                $('#position').text(response.position);
                $('#address').text(response.address);
                var add = "uploads/articles/" + response.yearSl + ".pdf";
                $('#reader').prop('data', add);
            }
        });
    });
});

in fetch-reader.php

<?php
require_once('connect.php');
if ($_GET['rowid']) {
    $id = $_GET['rowid'];
    $sql = "SELECT `title`, `name`, `position`, `address`, `yearSl` FROM articles WHERE `id` = '".$id."'";
    $result = $con->query($sql);
    if ($result->num_rows > 0) {
        $row = $result->fetch_array();
    }
    $connect->close();
    header('Content-Type: application/json');
    echo json_encode($row);
}

Please guide me any other way which can serve my purpose, but I don’t want to use any third-party tools for the purpose.

Answer

I think you are sending the wrong data in ajax. Try this into your “$ .ajax” call:

data: { 'rowid': rowid } 

And try checking into browse console if the request shows any error. Into your ajax call you check only for success return, not for fail.