Bootstrap Модальный пароль ID не работает - PullRequest
Новая
       42

Bootstrap Модальный пароль ID не работает

0 голосов
/ 27 ноября 2018

У меня проблема с передачей идентификатора в моем модале.

Я пытаюсь сделать так, чтобы, щелкнув ссылку (соответствующую событию), он открывает подробности этого события.Но я не могу получить идентификатор и отобразить nefusque имя этого события в моем модале ...

Я был вдохновлен Передача данных в модал начальной загрузки , но результат все еще отрицательный... 

@model jak.formulaire.Models.Events

<div class="container">
    @* Datatable of Events member *@
    <div>
        <table id="example" class="table table-hover" style="width:100%; margin-top:2%">
            <thead>
                <tr>
                    <th scope="col">Event Name</th>
                    <th scope="col">Start Date</th>
                    <th scope="col">End Date</th>
                    <th scope="col">Status</th>

                </tr>
            </thead>
        </table>
    </div>
</div>

@* Modal Details *@
<div class="modal" role="dialog" id="myModal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Details</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <div id="myModalContent">
                    <form id="myForm">
                        <div class="form-horizontal">
                            <div class="form-group">
                                @Html.LabelFor(model => model.Event_Name, htmlAttributes: new { @class = "control-label col-md-4" })
                                <div class="col-md-8">
                                    @Html.EditorFor(model => model.Event_Name, new { htmlAttributes = new { @class = "form-control", @placeholder = "Name", @id = "Name" } })
                                </div>
                                @Html.ValidationMessageFor(model => model.Event_Name, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </form>
                </div>


                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


@section Scripts{

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

    <script>
        $(document).ready(function () {
            $('#example').DataTable({

                ajax: {
                    "url": '@Url.Action("GetHistoric", "Events")',
                    "dataSrc": "",
                    "type": "GET",
                    "datatype": "json"
                },
                columns: [
                    {
                        'data': 'Name', "render": function (data) {
                            return '<a href="#" class="open-Details" data-toggle"modal" data-id="' + data + '" id="' + data + '">' + data + '</a>';
                        },
                    },
                    { 'data': 'Date_Begin_cU' },
                    { 'data': 'Date_End_cU' },
                    { 'data': 'Status' },

                ],
                "paging": false,
                "info": false,
                "searching": false
            });
            $(document).on("click", ".open-Details", function () {
                $('#Name').val(this.id);
                $('#myModal').modal('show');
            });


        });
    </script>
}

1 Ответ

0 голосов
/ 27 ноября 2018

В вашем коде jquery записано: 

data-id="data" id="' + data + '"

, когда вы пытаетесь получить идентификатор из атрибута данных, т. Е.1008 *

так что вся строка будет выглядеть так: 

return '<a href="#" class="open-Details" data-toggle"modal" data-id="'+data+'" id="' + data + '">' + data + '</a>';

Теперь следующее: 

$('#Name').val($(this).data("id"));

будет работать нормально.

либо вам нужно установить data переменная вместо "data" литерал или использование this.id, например: 

$('#Name').val(this.id);
...