модалы, показывающие пробел после вызова ajax - PullRequest
Новая
       3

модалы, показывающие пробел после вызова ajax

1 голос
/ 24 января 2020

Я разрабатываю страницу в php, которая имеет несколько динамических c модалов для отображения pdf-файлов на самой странице с соответствующим названием и именами авторов. Все данные поступают из базы данных, разработанной в MySQL. Кнопки триггера также должны быть динамическими c. Я попробовал следующий код. Проблема в том, что я получаю модальные бланки. Я могу распечатать данные на самой странице fetch-reader.php. Я думаю, что я делаю что-то не так в AJAX или модальном части. Пожалуйста, проведите меня через него. 

<?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>

в <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);
            }
        });
    });
});

в 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);
}

Пожалуйста, ведите меня любым другим способом, который может служить моя цель, но я не хочу использовать какие-либо сторонние инструменты для этой цели.

1 Ответ

2 голосов
/ 24 января 2020

Я думаю, что вы отправляете неверные данные в ajax. Попробуйте это в своем вызове "$. ajax": 

data: { 'rowid': rowid }

И попробуйте проверить в консоли просмотра, если запрос показывает какую-либо ошибку. На ваш ajax звонок вы проверяете только на успешное возвращение, а не на неудачу.

...