Bootstrap Modal Confirmation - Delete action not working

Question

I'm trying to create a simple ASP.Net Core Razor Page application to execute some database stuff, like adding, editing and deleting items. In this case the records are 'applications'. I created a Index.cshtml which populates loads a partial view (_ViewAllPartial.cshtml).

@page
@model MasterDataManagement.Web.Pages.Application.IndexModel
@{
    ViewData["Title"] = "Applications";
}

<h1>Overview Applications:</h1>

<div class="card">
    <div class="col-sm-12" style="padding:20px">
        <a onclick="jQueryModalGet('?handler=CreateOrEdit','Create Application')" class="btn btn-outline-success">
            New...
        </a>
    </div>
    <div id="viewAll" class="card-body table-responsive"></div>
</div>


@section Scripts
{
    <script>
        $(document).ready(function () {
            $('#viewAll').load('?handler=ViewAllPartial');
        });
        $(function () {
            $('#reload').on('click', function () {
                $('#viewAll').load('?handler=ViewAllPartial');
            });
        });
    </script>
}

In the partial view the items are loaded from the database and shown in a list:

@using MasterDataManagement.Models
@model IEnumerable<Application>

<div class="table">
    <table class="table table-hover" id="applicationTable">
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Description</th>
                <th scope="col">Owner</th>
                <th scope="col">Last changed</th>
                <th scope="auto"></th>
            </tr>
        </thead>
        <tbody>

            @foreach (var table in Model)
            {
                <tr>
                    <th scope="row">@table.ID</th>
                    <td>@table.Description</td>
                    <td>@table.Owner</td>
                    <td>@table.Changed</td>
                    <td>
                        <a onclick="jQueryModalGet('?handler=CreateOrEdit&[email protected]','Edit Application')" class="btn btn-info text-white"> Edit</a>
                        <a id="deleteCustomerModal"
                           data-toggle="modal"
                           data-target="#modal-delete"
                           data-id="@table.ID"
                           class="btn btn-danger">
                            Delete
                        </a>
                    </td>

                </tr>

            }
        </tbody>
    </table>
    <hr />

    <script>
        $(document).ready(function () {
            $("#applicationTable").DataTable();

        });
    </script>

    <form asp-page-handler="delete" method="post" role="form" id="myForm">
        <div class="modal" id="modal-delete" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="model-content">
                    <div class="modal-header">
                        <h4 style="position:center" class="modal-title">Delete Confirmation</h4>
                        <button type="button" class="close" data-dismiss="modal" value="delete" aria-hidden="true">X</button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete this application ?
                    </div>
                    <div class="modal-footer">
                        <button 
                                data-dismiss="modal" 
                                type="button" 
                                class="btn btn-primary">
                            No
                        </button>

                        <button 
                                type="submit" 
                                class="btn btn-danger" 
                                id="modalDeleteButtonX">
                            Yes
                        </button>


                    </div>
                </div>
            </div>
        </div>
    </form>

    <script type="text/javascript">
        $(function () {
            console.log("Document Ready starting....");

            $(document).on("click", "#modalDeleteButtonX", function(event){
                console.log("Click should go here.");
            });
          
            $('#modal-delete').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);        // Button that triggered the modal
                var id = button.data("id");                 // Get id of the button
                var modal = $(this);
                console.log("related id = " + id);
            });


            console.log("Document Ready finished....");
        });

    </script>
</div>

When I click the Delete-button the modal shows up. But when I press No on the modal-dialog, nothing is shown in the Console-log of the browser. It should log the message 'Click should go here', but the only lines I see are 'Document Ready starting' and 'Document Ready Finished', so it seems the script is loaded. Still it's not working.

What am I doing wrong, I tried several techniques found on SO and/or Google....

Answer 1

The usage of $(document).on("click" is correct. However, after testing, the problems you have encountered so far are affected by the class of modal-dialog modal-lg.

The alternative I gave is to remove <div class="modal-footer"> to the outer div. It works for me.