PartialView dosen't appear on click

Question

I have trouble getting my partial view appear in the "div" when I click on a button. I can see that it fetches the data when I debug, but does not display it. Anybody that might now the problem?.

View

@model IEnumerable<ActiveDirectorySearch.Models.UserModel>

<div id="searchList">
    <table>
        @foreach (var user in @Model)
        {
            <tr>
                <td>
                    <ul class="user" data-user-id="@user.DistinguishedName">
                        <li><b>@user.DisplayName</b></li>
                        <li><i>Cdsid:</i> @user.CdsId</li>
                        <li><i>Name:</i> @user.GivenName  @user.SurName</li>
                        <li><i>Title:</i> @user.Title</li>
                        <li><i>Department:</i> @user.Department</li>
                        <li><i>MemberOf:</i> <a href="#/?searchTerm=@user.DistinguishedName" class="LoadGroupsViewButton">Groups</a></li>
                        <li class="userInfo"><a href="More Info">More Info</a></li>
                        <li>
                        </li>
                    </ul>
                </td>
            </tr>
        }
    </table>
    <div class="col-md-6 col-md-offset-3 display-groups">

    </div>
</div>

Controller

    public ActionResult GetUserInfo(string searchTerm)
    {
        GroupRepository groupRepository = new GroupRepository();
        var groups = groupRepository.FindGroups(searchTerm);

        return PartialView(groups);
    }

Script

<script>
    $(function () {
        $('.LoadGroupsViewButton').click(function () {
            var self = this;
            var $user = $(self).closest('.user');
            var userDistinguisedName = $user.data("user-id");
            $.ajax({
                method: "GET",
                url: 'Home/GetUserInfo',
                data: { searchTerm: userDistinguisedName }
            }).done(function (data) {
                $(self).find('.display-groups').html(data);
            });
        });
    });
</script>

Answer 1

change your code from

$(self).find('.display-groups').html(data);

to

$("#searchList").find('.display-groups').html(data);

as here 'self' is the DOM element that triggered the event because of this piece of code

var self = this;

So it will not find div having class 'display-groups'