Home Parent View toggles Partial Views - on click triggers multiple times
Reply: 0

Parent View toggles Partial Views - on click triggers multiple times

ribald
1#
ribald Published in 2017-09-14 02:20:21Z

I have Parent View and 2 Partial Views. I have buttons on each partial view that is registered for an on click event on the parent page. They do ajax calls to get their respective partial view.

Controller

        [HttpPost]
        public ActionResult GetEmployee(int id)
        {
            HumanResourcesManager man = new HumanResourcesManager();
            var emp = man.GetEmployee(id);
            EmployeeModel empModel = new EmployeeModel(emp);
            return PartialView("_EmployeeDetails", empModel);
        }

        [HttpPost]
        public ActionResult GetEmployeeForEdit(int id)
        {
            HumanResourcesManager man = new HumanResourcesManager();
            var emp = man.GetEmployee(id);
            ViewBag.States = man.GetStates();
            EmployeeModel empModel = new EmployeeModel(emp);
            return PartialView("_EmployeeEdit", empModel);
        }

Parent View

  @model HumanResources.Web.Models.EmployeeModel
  <p>
     Selected Employee: @Html.TextBox("EmployeeSearch")
   </p>
<script type="text/javascript">

    $("#EmployeeSearch").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "@(Url.Action("FindEmployee", "Employee"))",
                    type: "POST",
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                            response($.map(data, function (item) {
                            return { label: item.DisplayName, value: item.DisplayName, id: item.Id };
                        }))
                    }
                })
            },
            select: function (event, ui) {
                if (ui.item) {
                    GetEmployeeDetails(ui.item.id);
                }
            }
        });



    function GetEmployeeDetails(id) {

        $("partialView").empty();
        $.ajax({
            type: "POST",
            url: "@(Url.Action("GetEmployee", "Employee"))",
            data: { id: id },
            success:function(result)
            {
                $("#partialView").html(result);
            },
            failure: function (response) {
                alert(response.d);
            }
        });

        @*$(document).on('click', "#empEdit", function(){
            $.ajax({
                type: "POST",
                url: "@(Url.Action("GetEmployeeForEdit", "Employee"))",
                data: @Html.Raw(Json.Encode(Model)),
                success:function(result)
                {
                    $("#partialView").html(result);
                },
                failure: function (response) {
                    alert(response.d);
                }
            })
        });*@

        $(document).on('click', "#empEdit", function(){
            $.ajax({
                type: "POST",
                url: "@(Url.Action("GetEmployeeForEdit", "Employee"))",
                data: {id: $("#editEmployeeId").val()},
            success:function(result)
            {
                $("#partialView").html(result);
            },
            failure: function (response) {
                alert(response.d);
            }
        })
    });

        $(document).on('click', "#empEditCancel", function(){
            GetEmployeeDetails($("#editEmployeeId").val());
        });

}
</script>

<div id="partialView">
</div>

Partial View - Details The details is intended to display details and an edit button. The JavaScript I have in the Parent View.

@model HumanResources.Web.Models.EmployeeModel
@{ 
    Layout = null;
}


    @Html.HiddenFor(model => model.Employee.Id, new { id = "editEmployeeId" })

    @Html.DisplayTextFor(model => model.Employee.FirstName)

    <input id="empEdit" type="button" value="Edit"/>

Partial View - Edit The Edit View displays the same values as the details partial view, but as editable fields.

    @model HumanResources.Web.Models.EmployeeModel 
 @{
     Layout = null; 
}

@using (Html.BeginForm("Save", "Employee")) {

@Html.HiddenFor(model => model.Employee.Id, new { Id = "editEmployeeId" })

<div class="container">

    <input type="submit" value="Save" />

    <input id="empEditCancel" type="button" value="Cancel"/>
</div> 
}

My Issue

Editing and cancelling (toggling between the two partial views) once works fine. Editing and cancelling more than once it seems that the functions for the on click are called increasingly number of times by a factor of 2. Causing the alerts to be called multiple times.

What am I doing wrong?

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.897633 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO