Bootstrap 4 Модальное изменяющееся содержимое не работает - PullRequest
Новая
       11

Bootstrap 4 Модальное изменяющееся содержимое не работает

0 голосов
/ 02 марта 2020

У меня возникла небольшая проблема, когда я не могу получить модал для чтения данных из таблицы HTML и ввода их в Bootstrap 4 Модал. Я пробовал несколько способов, как показано в фрагментах кода ниже.

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

HTML: 

@{
    ViewData["Title"] = "PlayTest";
}

@model ViewModel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="~/css/site.css" type="text/css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" id="bootstrap-css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>@ViewData["Title"]</h1>
        <br />
        <br />

        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Gender</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="name">John</td>
                    <td class="age">45</td>
                    <td>Male</td>
                    <td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" data-name="John">View</button></td>
                </tr>
                <tr>
                    <td class="name">Samantha</td>
                    <td class="age">32</td>
                    <td>Female</td>
                    <td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">View</button></td>
                </tr>
            </tbody>
        </table>

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Name</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <p class="ageMessage">Age</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>

JS: 

<script type="text/javascript">
    $(document).ready(function () {
        $('#myModal').on('show.bs.modal', function (e) {
            var button = $(e.relatedTarget);
            var _name = button.data('name');

            var row = button.parents('tr');
            //var name = row.find('.name').text();
            var age = row.find('.age').text();

            $(this).find('.modal-title').val(_name);
            //$(this).find('.modal-title').val(name);
            $(this).find('.ageMessage').val('Your age is: ' + age + '!');
        })
    })
</script>

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

1 Ответ

0 голосов
/ 02 марта 2020

Я заметил, что ваш JavaScript использует myModel в качестве идентификатора, но ваш модальный имеет идентификатор myModal.

Ваша JQuery функция не будет вызываться, так как прослушиватель событий не слушая ваш модал.

Вместо $('#myModel') используйте это -> $('#myModal')?

...