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">×</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.
Advertisement
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.