Simple Confirmation Modal/Pop-up -MVC 5/Bootstrap 3

Question

I am trying to follow along with simple Modal/Pop-up guides in order have a nice Delete Confirmation dialogue but I can never seem to get any of them to work.

The one I am currently working on simply fades the screen but no dialogue appears. This one is taken from: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php

<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Launch Demo Modal</a>

<!-- Modal HTML -->
<div id="myModal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Confirmation</h3>
    </div>
    <div class="modal-body">
        <p>Do you want to save changes you made to document before closing?</p>
        <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

My current deleteFunction works as such:

Button

<span class="item-delete-button">
      <button type="button" onclick="deleteFunction(this)" class="btn btn-danger col-lg-3 col-lg-offset-3"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
</span>

JQuery

function deleteFunction(element) {
        var newID = $(element).closest("td").find("span.ID").text();

        $(element).closest("table").removeClass("table-hover");
        $(element).closest("tr").css('background-color', 'red');     

        $(document).ready(function () {
            var answer = confirm("Are you sure you want to delete this movie?");
            if (answer) {
                $.post(
            '@Url.Action("customDelete", "Movie")',
            {
                'id': newID
            },
            function (data) { },
            "json"
            );
                $(element).closest("tr").remove();
                return true;
            } else {
                $(element).closest("tr").css('background-color', 'initial');
                return false;
            }
        });
    }

All I want is a simple little Delete Confirmation.

I have looked at over 20 some guides now and still cannot get anything to implement correctly. (running Debug in Chrome as well)

Here is my entire View, maybe something is conflicting...? (new to all of this)

Thank you for any and all help!

@model IEnumerable<WebApplication2.Entities.Movie>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    table tr button {
        opacity: 0.5;
        float: right;
    }

    table tr:hover button {
        opacity: 1;
    }
</style>

<br />
<br />
<br />
<br />
<div class="panel panel-primary" style="width:100%">
    <div class="panel-heading">
        <span style="font-size: 30px; font-style:oblique"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-film"></span>Movies</span></span>
    </div>

    <div class="col-lg-offset-10 col-lg-2">
        <button type="button" style="margin-top:3px; margin-bottom:3px" class="btn btn-success btn-block" onclick="location.href='@Url.Action("Create")';return false;"><span style="font-size:larger"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Movie</span></button>

    </div>

    <table class="table table-striped table-hover table-responsive table-condensed">




        <tr>
            <th>
                <h4 style="font-size:x-large"><span style="font-weight:bolder">Title</span></h4>
            </th>
            <th>
                <h4 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span></h4>
            </th>
            <th>
                <h4 style="font-size:x-large"><span style="font-weight:bolder">@Html.DisplayNameFor(model => model.Description)</span></h4>
            </th>
            <th>
                @using (Html.BeginForm("Index", "Movie"))
                {
                    <div class="dropdown">
                        <select class="btn btn-group-lg btn-default col-lg-4" style="margin-top: 15px; width:40%; height: 36px; opacity: 1" data-toggle="dropdown" name="Filter">
                            <option value="0" disabled selected>Filter By...</option>
                            <option value="1">Movie Name</option>
                            <option value="2">Description</option>
                        </select>
                    </div>

                    <input type="text" name="searchString" class="col-lg-6" style="margin-top: 16px; width:48%; text-align:center; height:35px; font-size:20px" placeholder="enter text" />
                    <button type="submit" class="btn btn-group-lg btn-primary col-lg-2 glyphicon glyphicon-arrow-right" style="margin-top: 15px; width:12%; height:36px; opacity:1" value="" />
                }
            </th>
        </tr>

        @foreach (var item in Model)
        {

            <tr>

                <td class="col-lg-2">
                    <span class="item-display">
                        <span style="font-size: 17px;">
                            @Html.DisplayFor(modelItem => item.Name)
                        </span>
                    </span>
                    <span class="item-field">
                        @Html.EditorFor(modelItem => item.Name)
                    </span>

                </td>


                <td class="col-lg-3">
                    <span class="item-display">
                        <span style="font-size: 17px;">
                            @Html.DisplayFor(modelItem => item.ReleaseDate)
                        </span>
                    </span>
                    <span class="item-field">
                        @Html.EditorFor(modelItem => item.ReleaseDate)
                    </span>
                </td>


                <td class="col-lg-3">
                    <span class="item-display">
                        <span style="font-size: 17px; font-style:italic">
                            @Html.DisplayFor(modelItem => item.Description)
                        </span>
                    </span>
                    <span class="item-field">
                        @Html.EditorFor(modelItem => item.Description)
                    </span>
                </td>


                <td class="col-lg-3 col-lg-offset-1">
                    <span style="visibility:hidden" class="ID col-lg-1">@Html.DisplayFor(modelItem => item.ID)</span>

                    <span class="item-edit-button">
                        <button type="button" onclick="editFunction(this)" class=" btn btn-warning col-lg-3 col-lg-offset-0"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
                    </span>

                    <span class="item-save-button">
                        <button type="button" onclick="saveFunction(this)" class="btn btn-success col-lg-3 col-lg-offset-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Save</button>
                    </span>
                    @*<span class="item-delete-button">
                            <button type="button" onclick="deleteFunction(this)" class="btn btn-danger col-lg-3 col-lg-offset-3"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
                        </span>*@



                    <!-- Button HTML (to Trigger Modal) -->
                    <span class="item-delete-button">
                        <a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Launch Demo Modal</a>
                    </span>
                    <!-- Modal HTML -->
                    <div id="myModal" class="modal hide fade">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h3>Confirmation</h3>
                        </div>
                        <div class="modal-body">
                            <p>Do you want to save changes you made to document before closing?</p>
                            <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
                        </div>
                        <div class="modal-footer">
                            <a href="#" class="btn">Close</a>
                            <a href="#" class="btn btn-primary">Save changes</a>
                        </div>
                    </div>


                </td>
            </tr>
            <tr>

                <td colspan="12">
                    <p style="font-size: 17px; font-style: italic; font-family: 'Roboto', sans-serif">
                        Movie ID: @Html.DisplayFor(modelItem => item.ID)
                        <br />
                        Placeholder
                    </p>
                </td>
            </tr>

        }
    </table>
    <span style="font-style: italic; font-size: 15px; font-family: 'Roboto', sans-serif; padding-top:0px" />Click Movie for details</span>
</div>

<script>


    $(function () {
        $("td[colspan=12]").find("p").hide();
        $("td[colspan=12]").addClass("nopadding");

        $("tr").click(function () {
            var $target = $(this);
            var $detailsTd = $target.find("td[colspan=12]");
            if ($detailsTd.length) {
                $detailsTd.find("p").slideUp();
                $detailsTd.addClass("nopadding");
            } else {
                $detailsTd = $target.next().find("td[colspan=12]");
                $detailsTd.find("p").slideToggle();
                $detailsTd.toggleClass("nopadding");
            }
        });
    });
</script>

<script>
    function editFunction(element) {
        $(element).closest("span").hide();
        $(element).closest("td").find("span.item-save-button").show();
        $(element).closest("td").find("span.item-delete-button").hide();

        $(element).closest("td").prev("td").find("span.item-display")
            .hide()
            .next("span.item-field")
            .show();

        $(element).closest("td").prev("td").prev("td").find("span.item-display")
            .hide()
            .next("span.item-field")
            .show();

        $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display")
            .hide()
            .next("span.item-field")
            .show();
    }

    function saveFunction(element) {
        var three = $(element).closest("td").prev("td").find("span.item-field").find(":input:first").val();
        var two = $(element).closest("td").prev("td").prev("td").find("span.item-field").find(":input:first").val();
        var one = $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-field").find(":input:first").val();

        if (one == "" || three == "" || two == "") {
            if (one == "") {
                alert("invalid name");
            }
            if (two == "") {
                alert("invalid date");
            }
            if (three == "") {
                alert("invalid desc");
            }

        } else {
            $(element).closest("span").hide();
            $(element).closest("td").find("span.item-edit-button").show();
            $(element).closest("td").find("span.item-delete-button").show();

            $(element).closest("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").find("span.item-field").find(":input:first").val());
            $(element).closest("td").prev("td").find("span.item-display")
                .show()
                .next("span.item-field")
                .hide();

            $(element).closest("td").prev("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").prev("td").find("span.item-field").find(":input:first").val());
            $(element).closest("td").prev("td").prev("td").find("span.item-display")
                .show()
                .next("span.item-field")
                .hide();

            $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").prev("td").prev("td").find("span.item-field").find(":input:first").val());
            $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display")
                .show()
                .next("span.item-field")
                .hide();

            var newID = $(element).closest("td").find("span.ID").text();
            var newName = $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display").text();
            var newRelease = $(element).closest("td").prev("td").prev("td").find("span.item-display").text();
            var newDescription = $(element).closest("td").prev("td").find("span.item-field").find(":input:first").val();

            $.post(
                '@Url.Action("customEdit", "Movie")',
                 {
                     'id': newID,
                     'name': newName,
                     'date': newRelease,
                     'desc': newDescription
                 },
                function (data) { },
                "json"
            );
        }
    }


    function deleteFunction(element) {
        var newID = $(element).closest("td").find("span.ID").text();

        $(element).closest("table").removeClass("table-hover");
        $(element).closest("tr").css('background-color', 'red');

        $(document).ready(function () {
            var answer = confirm("Are you sure you want to delete this movie?");
            if (answer) {
                $.post(
            '@Url.Action("customDelete", "Movie")',
            {
                'id': newID
            },
            function (data) { },
            "json"
            );
                $(element).closest("tr").remove();
                return true;
            } else {
                $(element).closest("tr").css('background-color', 'initial');
                return false;
            }
        });
    }

</script>
@Scripts.Render("~/bundles/myscript")

Answer 1

Not sure why this was so hard, but eventually I got it to work.

Button

<!-- Modal Button-->
<span class="item-delete-button">
<button class="btn btn-danger col-lg-3 col-lg-offset-3" data-toggle="modal" data-target="#@item.ID" onclick="deleteStart(this)">
        Delete
</button>
</span>

Modal

<div class="modal fade" id="@item.ID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
           <div class="modal-content">
                <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                     <h4 class="modal-title" id="myModalLabel">Delete</h4>
                 </div>
                 <div class="modal-body">
                      <span style="font-size: 20px">Are you sure you want to delete Employee: @Html.DisplayFor(modelItem => item.YOUR_ITEM)?</span>
                  </div>
                  <div class="modal-footer">
                       <button type="button" onclick="deleteStopped(this)" class="btn btn-default" data-dismiss="modal">Cancel</button>
                       <button type="button" onclick="deleteFunction(this)" class="btn btn-danger">Confirm Delete</button>
                  </div>
             </div>
       </div>
</div>

NOTE: #@item.ID, is my @model's ID for my View, as my View built a List of items from my database.