Add Popup Modal on link to open when User click on User column

Question

Ok, so I have Index Page where it's is listed all ticket and I have column User. I add <a> tag in this column

{
            "data": "applicationUser.name",
            "width": "10%",
            "targets": [1],
            "render": function (data) {
                return '<a class="text-info" href="' + data + '" target_blank>' + data + '</a>'
            }
        },

And also I create function to popup Modal

$(".table-info").click(function () {
    var id = $(this).attr("userDetails");
    $.get("/Manager/Ticket/UserDetails?id=" + id, function (result) {
        $("#container").append(result);
        $("#userDetails").modal({ show: true })
    })
})

And here is Modal Popup which I create PartialView.cshtml

@model VmSTicketing.Models.ViewModels.TicketVM

<div class="modal fade" id="userDetails">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                <h3 class="modal-title">Podaci o Useru</h3>
            </div>
            <div class="modal-body">
                <div class="row dataTable">
                    <div class="col-md-4">
                        <label class="control-label">Ime i Prezime</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" class="form-control" asp-for="Ticket.ApplicationUser.Name" disabled id="ImePrezime" name="ImePrezime">
                    </div>
                </div>

                <br>

                <div class="row dataTable">
                    <div class="col-md-4">
                        <label class="control-label">Email Adresa</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" class="form-control" asp-for="Ticket.ApplicationUser.Email" disabled id="Email" name="Email">
                    </div>
                </div>

                <br>

                <div class="row dataTable">
                    <div class="col-md-4">
                        <label class="control-label">Broj Telefona</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" asp-for="Ticket.ApplicationUser.PhoneNumber" class="form-control" disabled id="BrTel" name="BrTel">
                    </div>
                </div>
                <br />

                <div class="row dataTable">
                    <div class="col-md-4">
                        <label class="control-label">Klijent</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" asp-for="Ticket.ApplicationUser.Client" class="form-control" disabled id="klijent" name="klijent">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Here is IndexPage for my table structure:

@model IEnumerable<VmSTicketing.Models.Ticket>

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/AdminLTE/_Layout.cshtml";

}


<br />
<div class="row">
    <div class="col-6">
        <h2 class="text-primary">Lista tiketa</h2>
    </div>
    <div class="col-6 text-right">
        <a class="btn btn-primary" asp-action="Upsert"><i class="fas fa-plus"></i> &nbsp; Novi tiket</a>
    </div>
</div>

<br />

<div class="p-4 border rounded">
    <table id="tblData" class="table table-striped table-bordered" style="width:100%">
        <thead class="thead-dark">
            <tr class="table-info">
                <th>Opis</th>
                <th>Datum i vrijeme slanja</th>
                <th>Vrsta Tiketa</th>
                <th>Status</th>
                <th>Datum i vrijeme zavrsetka</th>
                <th>Korisnik</th>
                <th></th>
            </tr>
        </thead>
    </table>
</div>

<partial name="UserDetails" />


@section Scripts{
    <script src="~/js/ticket.js"></script>
}

So far this modal work but when I click in table header not in User link. I try to figure out what I make wrong but unfortunately I can not see where the error is. So I want to add this function for popup to be load when User click on <a> tag And here is my code ticket.js where I call my datatable

function loadDataTable() {
    dataTable = $('#tblData').DataTable({
        "ajax": {
            "url": "/Manager/Ticket/GetAll"
        },
        "columns": [
            { "data": "description", "width": "10%" },
            { "data": "dateAndTime", "width": "15%" },
            { "data": "ticketType.name", "width": "10%" },
            { "data": "status", "width": "10%" },
            { "data": "answered", "width": "15%" },
            {
                "data": "applicationUser.name",
                "width": "10%",
                "targets": [1],
                "render": function (data) {
                    return '<a class="text-info" href="' + data + '" target_blank>' + data + '</a>'
                }
            },
            {
                "data": "id",
                "render": function (data) {
                    return `
                            <div class="text-center">
                                <a href="/Manager/Discussion/OpenDiscussion/${data}" class="btn btn-primary text-white" style="cursor:pointer">
                                    <i class="fas fa-comments"></i>
                                </a>
                                <a href="/Manager/Ticket/Details/${data}" class="btn btn-success text-white" style="cursor:pointer">
                                    <i class="fas fa-info"></i>
                                </a>
                                <a onclick=Delete("/Manager/Ticket/Delete/${data}") class="btn btn-danger text-white" style="cursor:pointer">
                                    <i class="fas fa-trash-alt"></i> 
                                </a>                              
                            </div>
                           `;
                }, "width": "15%"
            }
        ]
    });
}

I am not sure how to assign this function to be load on tag ?? Any suggestion ??

Not very clear what it is you need here. Are you wanting same event listener for ``? — charlietfl, Mar 10 '21 at 14:10
Yes, I have everything prepare and liste in my post but I have no idea how to call this function to call on link — UnKnowUser, Mar 10 '21 at 14:13
Realated: [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) also [Understanding Event Delegation](https://learn.jquery.com/events/event-delegation/) — charlietfl, Mar 10 '21 at 14:14

Ehsan Sajjad · Accepted Answer · 2021-03-10T14:25:05.440

1

You actually need to adjust your render function applicationUser.username property in datatable js.

You can add a class for user-details :

"data": "applicationUser.name",
"render": function (data) {
   return '<a id="' + data + '" class="text-info user-details" href="' + data + '" target_blank>' + data + '</a>'
            }

and your event listener should go like following so that it should only be triggered when a data row is clicked but no the table header row :

$(".table-info").click("click" , "a.user-details",function () {
    var id = this.id;
    $.get("/Manager/Ticket/UserDetails?id=" + id, function (result) {
        $("#container").append(result);
        $("#userDetails").modal({ show: true })
    });
});

Currently your event triggers on the class table-info which is also applied on the <tr> for the <th> which is ending up not the behavior which is needed.

edited Mar 10 '21 at 14:25

answered Mar 10 '21 at 14:16

Ehsan Sajjad

61,834
16
105
160

Doesn't work ! It display `This localhost page can’t be found` – UnKnowUser Mar 10 '21 at 14:19
1

@UnKnowUser this is how it will go, you further need to see what's the url being generated for hyperlink to fix it – Ehsan Sajjad Mar 10 '21 at 14:20
Thank you :) Not it's better. Now, I am going to debug and see where is another mistake – UnKnowUser Mar 10 '21 at 14:22
1

@UnKnowUser also need to add ``id="'+data+'"`` in the `` which is in `render` function, i have updated the code in answer for render function, hope it fixes the problem – Ehsan Sajjad Mar 10 '21 at 14:23
Thank you so much ! Unfortunettly, location is not find. And I try to find where is the problem. Most probably in my controller and redirect – UnKnowUser Mar 10 '21 at 14:29
I get error message in console `Uncaught TypeError: Cannot create property 'guid' on string 'a.userDetails' ` – UnKnowUser Mar 10 '21 at 14:35

Add Popup Modal on link to open when User click on User column

1 Answers1