modals showing blank after ajax call - php

Question

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>
<i class="fa fas fa-book-open"></i> Read
</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">×</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 1

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.