Jquery: Works when i step thru, errors when i just let it run

Question

I am creating roles for my mvc application. When i step thru the code, everything works fine. When i don't run the debugger tools i get an alert (it is undefined if i try to interrogate the xHP.responseMessage). Any ideas?

this answer looks like it may be applicable but success is a callback so i'm not sure how it would apply

javascripts works when I step through doesnt if I dont

@model Microsoft.AspNet.Identity.EntityFramework.IdentityRole

<div class="row">
    <form id="frmRoleEditor" class="form-inline">

        <div class="form-group">
            @Html.LabelFor(m => m.Name, new { @class = "col-sm-3" })
            <div class="col-sm-9">
                @Html.TextBoxFor(m => m.Name, new { @class = "form-control", required = "true", minlength = "2", maxlength = "256" })
            </div>
        </div>
        <div class="form-group">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>&nbsp;
            <input type="submit" class="btn btn-success" value="Update" />
        </div>
    </form>
</div>

<script type="text/javascript">

    //$(function () {

    //    $("#frmRoleEditor").validate();

    //});

</script>

        [HttpPost]
        public JsonResult RoleEditor(IdentityRole model)
        {

            try
            {
                using (ApplicationDbContext context = new ApplicationDbContext())
                {
                    var exists = context.Roles.SingleOrDefault(r => r.Name == model.Name);

                    if (exists == null)
                    {
                        context.Roles.Add(model);
                        context.SaveChanges();
                    }

                }

                var redirectUrl = new UrlHelper(Request.RequestContext).Action("Roles", "Admin");
                return Json(new { success = true, Url = redirectUrl });

            }
            catch (Exception ex)
            {

                throw;
            }




        }

$(function () {

    $("#btnNewRole").on("click", function () {

        $("#modalRole").modal("show");

    });

    $("body").on("submit", "#frmRoleEditor", function () {

        var name = $("#Name").val();
        var model = {
            Name: name
        };

        $.ajax({
            url: "/Admin/RoleEditor",
            type: "POST",
            data: model,
            success: function (data) {
                if (data.success) {
                    window.location.href = data.Url;
                }
            },
            error: function (xHP, status, error) {
                alert('wtf');
            }
        });

    });

});

UPDATE:

1. It happens in Chrome or firefox, Edge is ok
2. when i look at the network tab i see a status of (canceled)
3. if i set a breakpoint in the controller, i get the error code on the client before i step thru the code on the server indicating that the link above is pertinent, but i still don't really understand how