ajax JavaScript not deleting from DataTable (using API's)

Question

Newbie ALERT

Basically I have a web application that has a dropdown list. When you select an item in the drop-down list the table is drawn to show all the credentials that are tied to that drop-down option.

Problem: When running, everything functions properly except for the JavaScript piece that does not remove the line in the table, but deletes the record on the back-end. So once i refresh and go back to that credential type the one I deleted is gone.

I've tried a lot of different stuff, but i pretty new to JavaScript and C#, don't know if there is a better way of doing this. Probably supplied too much information but i rather too much than not enough! :)

Any help, tips, ideas are greatly appreciated.

Credential API Controller: Delete Function

[HttpDelete]
public IHttpActionResult DeleteCustomer(int id)
    {
        var credentialInDb = _context.Credentials.SingleOrDefault(c => c.Id == id);

        if (credentialInDb == null)
            return NotFound();

        _context.Credentials.Remove(credentialInDb);
        _context.SaveChanges();


        return Ok();
    }

Model for Credential

public class Credentials
{
    public int Id { get; set; }

    [Required]
    [StringLength(255)]
    public string Name { get; set; }

    [Required]
    [StringLength(255)]
    public string Username { get; set; }

    [Required]
    [StringLength(255)]
    public string Password { get; set; }


    public string Website { get; set; }


    public string Notes { get; set; }


    public CredentialType CredentialType { get; set; }

    [Display(Name = "Credential Type")]
    public int CredentialTypeId { get; set; }

}   

ViewModel for CredentialFormViewModel
This allows the selectedCredential variable for the page below

public class CredentialFormViewModel
{
    public IEnumerable<CredentialType> CredentialTypes { get; set; }
    public Credentials Credentials { get; set; }

    public int SelectedCredentialTypeId { get; set; }

}

View that displays the DataTable:

 @model Appp.ViewModels.CredentialFormViewModel


@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Select a Credential Type</h2>
@Html.DropDownListFor(m => m.SelectedCredentialTypeId, new     SelectList(Model.CredentialTypes, "Id", "Name"), "Select Credential Type", new {     @class = "form-control", onchange = "SelectCredType()" })


<br/>
<table id="credentials" class="table table-bordered table-hover">
    <thead>
    <tr>
        <th>Credential</th>
        <th>Username</th>
        <th>Password</th>
        <th>Website</th>
        <th></th>     
    </tr>
    </thead>
    <tbody>
   </tbody>
</table>


@section scripts
{
<script>

    function SelectCredType() {
        var credId = $('#SelectedCredentialTypeId').val();
        if ($.fn.dataTable.isDataTable("#credentials")) {
            if (credId == "") {
                var table = $("#credentials").DataTable();
                table.destroy();

            } else {
                var table = $("#credentials").DataTable();
                table.destroy();
                SelectCredType();
            }
        } else {
            $(document)
                .ready(function() {
                        var table = $("#credentials")
                            .DataTable({
                                ajax: {
                                    url: "/api/credentials?credentialTypeId=" + credId,
                                    dataSrc: ""
                                },
                                columns: [
                                    {
                                        data: "name",

                                    },
                                    {
                                        data: "username"
                                    },
                                    {
                                        data: "password"
                                    },
                                    {
                                        data: "website"
                                    },
                                    {
                                        data: "id",
                                        render: function(data, type, credentials) {
                                            return "<button class='btn btn-primary btn-xs js-delete' data-credential-id=" + credentials.id + ">Delete</button>";
                                        }
                                    }
                                ]
                            });
                    }
                );
        }
    };


    $("#credentials")
        .on("click",
            ".js-delete",
            function() {
                var button = $(this);

                bootbox.confirm("Are you sure you want to delete this?",
                    function(result) {
                        if (result) {
                            $.ajax({
                                url: "/api/Credentials/" + button.attr("data-credential-id"),
                                method: "DELETE",
                                sucess: function() {
                                        table.row(button.parents("tr")).remove().draw();
                                }
                            });
                        }
                    });

            });
        </script>
}

Answer 1

First issue

Your JavaScript code does not work because the table variable is undefined within your delete function.

There are many ways you could approach to fix that. But first you will need to get your head around variable scopes in JavaScript.

Your simplest solution is to make table a globally-scoped variable that way you can access the instance from any function you create. So instead of defining it here:

 ... 
       $(document)
            .ready(function() {
                    var table = $("#credentials")
 ...

Move it up to the top of your script file:

var table;

function SelectCredType() {
    ...
        $(document)
            .ready(function() {
                    table = $("#credentials")
    ...
}

Now when you access it from your Delete function, it will be defined.

Note: I would also change the name of the table variable to something else as global variables in JavaScript will conflict with any script you import which can lead to a debugging nightmare. Best to name it something that will be most likely unique, eg. coberlinTable.

Second Issue

I don't know if you did a cut and past error, but you have misspelled success in your ajax Delete function.