Bootstrap Modal pass an ID is not working

Question

I have a problem to pass an id in my modal.

What I'm trying to do is that by clicking on the link (which corresponds to an event) it opens the details of this event. But I can not get the id and display nefusque the name of this event in my modal ...

I was inspired by Passing data to a bootstrap modal but the result is still negative ...

@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>
}

You may find the example here for datatables helpful: https://stackoverflow.com/questions/45368022/how-to-pass-datatable-data-to-a-bootstrap-modal — Carol Skelly, Nov 27 '18 at 13:33

score 2 · Accepted Answer · answered Nov 27 '18 at 12:23

2

You have :

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

written in your jquery code while you are trying to fetch id from data attribute i.e.:

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

which should be like:

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

so the whole line would be :

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

Now the following:

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

would work fine.

either you need to set data variable instead of "data" literal or use this.id like:

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

answered Nov 27 '18 at 12:23

Ehsan Sajjad

61,834
16
105
160

Now i only receive "Uncaught TypeError: $(...).modal is not a function" and my modal is not opening, any guess please? – Korpin Nov 27 '18 at 13:13
that seems to be script error, check if all the required js files are loading properly – Ehsan Sajjad Nov 27 '18 at 13:22
Okey, i had to had javascript.Noconflict to avoid this error, now i can open my modal again but my data is still not passing in my modal – Korpin Nov 28 '18 at 08:13
Thanks for your help, it works great had to change $('Name') by $('Event_name')... Quick question, isnt a problem that my 'id' is in fact the name of my event? – Korpin Nov 28 '18 at 10:17
you are doing `$('Name')` ? it should be `$('#Name')` – Ehsan Sajjad Nov 28 '18 at 10:21
have a look at : https://www.codeproject.com/Articles/1191769/Grid-View-with-AJAX-based-CRUD-Operations-in-ASP-N – Ehsan Sajjad Nov 28 '18 at 10:23
Yeah, its a typo but in my code i've write it with # ;-) Thanks for your link, i'll read this to improve myself! – Korpin Nov 28 '18 at 10:25

Bootstrap Modal pass an ID is not working

1 Answers1