Partial view modal popup is not working at first postback

Question

I have a pop up in a partial view is not working when it post back. I am using jquery ajax and that partial view is calling when I click on the user record in the table.

Here is my code on which click partial view will be called.

 <td><a href="#" class="details" data-id="@item.TeamId" data-dialogmodalbind=".dialog_content3">
 @Html.DisplayFor(modelItem => item.Description)</a>
</td>

here is my code where i calling the partial view

<div id="detailsPlace" class="dialog_content3" style="display:none">

    </div>

Here is my jquery code

<script type="text/javascript">
     $(function ()
    {
        $('.details').click(function ()
        {  
            var $buttonClicked = $(this);
            var id = $buttonClicked.attr('data-id');

            $.ajax(
                {
                url: '@Url.Action("Details","Team")',
                    type: "POST",
                    dataType: "html",
                data: { id: id },
                success: function (partialView)
                {
                    //event.preventDefault();
                    $('#detailsPlace').html(partialView);
                }
            });
        });
    });

</script>

Here is my Partial View

@model App.ViewModels.ViewDetailTeam
@using App.Helpers
@{HtmlHelpers.getDynamicLabels(Model.DynamicLabel);}

    <div class="dialogModal_header"> @Model.TeamDetails.TeamName</div>
    <div class="dialogModal_content">
        <div class="main-content">
            <div class="navi-but">
                <a href="#"><span class="previous">Previous</span></a>
                <a href="#"><span style="padding-right:7px">Next</span><span class="next"></span></a>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="Images/settings.png" /> </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="@Url.Action("Edit", "Team", new { id = Model.TeamDetails.TeamId })">Edit</a></li>
                        <li><a href="@Url.Action("Delete", "Team", new { id = Model.TeamDetails.TeamId })">Delete</a></li>
                    </ul>
                </li>

            </div><br /><br />


                <div style="float:left;margin-top:15px;">
                     @Html.CustomLabel("lblTeam","CT Team Name:")
                </div>
                <div style="margin-top:15px; margin-left:115px;">
                    @Model.TeamDetails.TeamName
                </div>

                <div style="float:left;margin-top:15px;">
                     @Html.CustomLabel("lblDescription","Description:")
                </div>
                <div style="margin-top:15px; margin-left:115px;">
                    @Model.TeamDetails.Description

                </div>
            <div style="float:left;margin-top:15px;">@Html.CustomLabel("lblCTUserCount","User Count:") </div>
                <div style="margin-top:15px; margin-left:115px;">
                    @Model.TeamDetails.UserCount


                </div>
            </div>
        </div>

Controller

 public ActionResult Details(int id)
        {
            Session[ApplicationConstants.CurrentPageId] = 111;
            FlightCoreModel.User loggedInUser = new FlightCoreModel.User();
            int PageId = Convert.ToInt16(Session[ApplicationConstants.CurrentPageId]);
            if (Session[ApplicationConstants.UserModel] != null)
            {
                loggedInUser = (FlightCoreModel.User)Session[ApplicationConstants.UserModel];
            }
            if (loggedInUser.UserId > 0)
            {
                ViewDetailTeam viewDetailTeam = new ViewDetailTeam(FlightDbContext, loggedInUser.UserId, PageId);
                ViewData["DetailModel"] = viewDetailTeam;
                viewDetailTeam.Retrieve(id);
                return PartialView("_TeamDetails", viewDetailTeam);
                //return View(viewDetailTeam);
            }
            else
            {
                return RedirectToAction("SignIn", "Account", new { area = "" });
            }   

        }

Answer 1

Change the javasript like Below. This will help you to access the html code which has been got by a ajax functions.

$(document).on('click','.details', function () {
    {  
        var $buttonClicked = $(this);
        var id = $buttonClicked.attr('data-id');

        $.ajax(
            {
            url: '@Url.Action("Details","Team")',
                type: "POST",
                dataType: "html",
            data: { id: id },
            success: function (partialView)
            {
                //event.preventDefault();
                $('#detailsPlace').html(partialView);
            }
        });
    });