MVC4 Ajax.ActionLink Breaks

Question

Answered!!

Okay, I am EXTREMELY new to MVC4 and am still in the learning stages of Ajax so I could really use some help with this one.... the more I work on it, the messier it gets. :( Here we go!

I have a small application that I'm using as practice. my main focus is the "Employees" page which contains a table displaying a list of employees that I made up. You can click on the employee new to view their About section, there are displays for their job position and start date, and then two columns (one for Edit and one for Delete). The About and Edit links work just fine. Now what I am trying to do is get the Ajax Delete link to pull up a module (that I built). The module displays a PartialView. Within the PartialView is a small table containing the information of the selected employee and an Ajax form with two buttons (Delete and Cancel). The delete button removes the selected employee from the list, closes and module, and replaces the old list of employees with the new. The cancel button simply closes the module. Almost everything works except when I go to click a link to delete another employee (without refreshing the page), I have to click the link twice (or in some cases, nothing happens at all). I've been at this darned thing for a while now. It's a mess and I don't think I'm doing it the best way possible. I've pasted my code that I thought was relevant (which is still quite a bit). If you need more to provide a possible answer, please let me know~ Thank you.

Note: I have already tried using methods other than .click() and none have worked in the way I want it to. So unless you know a nicer way of performing those method, don't worry about trying to suggest those. Just to save you all time.

EmployeesController: Delete

    [HttpGet]
    public ActionResult Delete(int id = 0)
    {
        var model = db.Employees.ToList().Where(m => m.ID == id);
        if (model == null)
        {
            return HttpNotFound();
        }
        return PartialView("_Delete", model);
    }

    [HttpPost, ActionName("Delete")]
    public PartialViewResult DeleteConfirmed(int id = 0)
    {
        Employee update = db.Employees.Find(id);            
        db.Employees.Remove(update);
        db.SaveChanges();
        return PartialView("_Employees", db.Employees.ToList());            
    }

Script File: Module

$(function () {
var openModule = function () {
    $("div[id = 'moduleBG']").attr("style", "display: inline");
    var width = $("div[id = 'body']").width();
    $("div[id = 'delete']").attr("style", "width: " + width + "px");
};

var closeModule = function () {
    $("div[id = 'moduleBG']").attr("style", "display: none");
    return false;
};

var ajaxSubmit = function () {
    $("div[id = 'moduleBG']").attr("style", "display: none");
};

$("a[name = 'module']").on("click", openModule);
$("input[id = 'cancelBtn']").click(closeModule);
$("input[id = 'deleteBtn']").click(ajaxSubmit);

});

Partial View: _Delete

@model IEnumerable<SiPrac.Models.Employee>

<div id="delete">
<div class="alertHeader">Are you sure you want to delete this?</div>

<table class="emp" style="display: inline-block">
    <tr>
        <th>@Html.DisplayNameFor(model => model.EmployeeName)</th>
        <th>@Html.DisplayNameFor(model => model.Title)</th>
        <th>@Html.DisplayNameFor(model => model.DateStarted)</th>
    </tr>
    @foreach (var item in Model)
    {
        string[] name = item.EmployeeName.Split(' ');
        string first = name[0];
        string last = name[1].Substring(0, 1);
        string full = first + " " + last + ".";

        <tr>
            <td>@full</td>
            <td>@Html.DisplayFor(modelItem => item.Title)</td>
            <td>@String.Format("{0: MM/dd/yyyy}", item.DateStarted)</td>
        </tr>
    }
</table>

@foreach (var item in Model)
{
    using (Ajax.BeginForm("Delete", "Delete", new { id = item.ID },
        new AjaxOptions()
        {
            HttpMethod="post",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "empData",
            Url = Url.Action("Delete")
        }, new { @id = "submitForm", @method = "post" }))
    {
    <p>
        <input id="deleteBtn" class="btn" type="submit" value="Delete" />
        <input id="cancelBtn" class="btn" type="button" value="Cancel" />
    </p>

    }
}
</div>

@Scripts.Render("~/bundles/Module")

Partial View: _Employees (This ActionLink is within a foreach)

@model IEnumerable<SiPrac.Models.Employee>

<div id="empList">
<table class="emp">
    <tr>
        <th>@Html.DisplayNameFor(model => model.EmployeeName)</th>
        <th>@Html.DisplayNameFor(model => model.Title)</th>
        <th>@Html.DisplayNameFor(model => model.DateStarted)</th>
    </tr>
    @foreach (var item in Model)
    {
        // Code to shorten name to just First Name and Last Initial
        // Cleans up the table to display nicely
        string[] name = item.EmployeeName.Split(' ');
        string first = name[0];
        string last = name[1].Substring(0, 1);
        string full = first + " " + last + ".";
        <tr>
            <td>@Html.ActionLink(full, "About", new { item.ID }, new { id = "empName" + item.ID, @class = "normLink" })</td>
            <td>@item.Title</td>
            <td>@String.Format("{0: MM/dd/yyyy}", item.DateStarted)</td>
            <td>@Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { @class = "normLink", @style = "width: inherit" })</td>
            <td>@Ajax.ActionLink("Delete", "Delete", new { id = item.ID },
            new AjaxOptions()
            {
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "moduleBG"
            }, new { @class = "normLink", @style = "width: inherit", @name = "module", @method = "get" })
            </td>
        </tr>
    }
</table>

<div id="create">
    <div class="createLink">
        @Html.ActionLink("Add New Employee", "Create", null, new { @style = "width: inherit" })
    </div>
    <div class="clear"></div>
</div>
</div>

@Scripts.Render("~/bundles/Module")

Answer 1

Okay, so I worked on this for what seemed like ages only to find the answer was simple. I just needed to load the script into the _Employees partial view! I guess this had to be done after the view was refreshed. I've updated my code for your viewing pleasure.