Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have an MVC 5 application with two modal windows. The first one called SelectChurchModal opens up a modal with a partial view allowing the user to make a selection. When the user selects a church, I want to close that modal and open up another modal to create an invoice called AddNewInvoiceModal. My problem is that when I close the first modal when the user clicks on a table row, the modal exits the other one doesn't show. I just get the dark overlay with no modal window and no data. If I just open the AddNewInvoiceModal window on top of the SelectChurchModal it works fine. Is there any way for me to successfully close the first modal before opening the second one? I've use $('AddNewInvoiceModal').modal('hide'); but when I use $('AddNewInvoiceModal').modal('show'); I just get a dark background with nothing. Both controller methods AddNewInvoice() and SelectChurch() both return partial views.


Please excuse the inline css. This is just temporary while I'm testing my code. I need to make SelectChurchModal close before the AddNewInvoiceModal opens. Maybe I made a trivial mistake in my code?

What I have tried:

Here is my regular Invoice View:
HTML
@model Church_Musician_Administration_App__Updated_.Models.InvoicesModel
@{
    ViewBag.Title = "Invoices";
}
<style>
    .highlight {
        background-color: darkviolet !important;
        color: white;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgb(222, 178, 241);
    }

    .table-striped tbody tr:nth-of-type(even) {
        background-color: rgb(233, 204, 246);
    }

    #invoices {
        font-family: "Arial";
        padding-left: 10px;
        padding-right: 10px;
    }
    
   
</style>
<h3>Invoices</h3>
<hr />
<div style="text-align:center; padding-bottom: 1rem;">Please click on an invoice and then select one of the options below.</div>
<div style="margin-top: 5px; margin-bottom: 15px; text-align:center">
    @using (Html.BeginForm("AddNewInvoiceSetup", "App", FormMethod.Post))
    {
    <button type="button" class="btn btn-primary" id="AddNewInvoice" onclick="SelectChurch()">Add New Invoice</button>

    <button data-toggle="modal" data-id="1" data-target="#jobModal" type="button" class="btn btn-primary" id="viewEditInvoice">View/Edit Invoice</button>
    <button data-toggle="modal" data-id="1" data-target="#sendMessageToMusicDirectorModal" type="button" class="btn btn-primary" id="deleteInvoice">Delete Invoice</button>
    }
</div>
<h6 class="alert-success text-center" style="font-size: 20px">@TempData["InvoiceAddedSuccessfully"]</h6>
<h6 class="alert-success text-center" style="font-size: 20px">@TempData["MessageDeletedSuccessfully"]</h6>
<div class="card w-100" style="min-height:525px; width: 100%!important; border:0;">
    <div class="card-body" style="padding:0;">
        <table id="invoices" class="table table-striped" style="width:100%; border: 1px solid rgba(0,0,0,.125); border-left:none; border-right:none; text-align: center; display:inline-table;">
            <tbody>
                <tr style="background-color:darkviolet; height:40px; width:100%">
                    <th style="color:white; border: 1px solid rgba(0,0,0,.125);">ID</th>
                    <th style="color:white; border: 1px solid rgba(0,0,0,.125);">Bill To</th>
                    <th style="color:white; border: 1px solid rgba(0,0,0,.125);">Items</th>
                    <th style="color:white; border: 1px solid rgba(0,0,0,.125);">Total</th>
                    <th style="color:white; border: 1px solid rgba(0,0,0,.125);">Invoice Status</th>

                </tr>
                @{
                    if (Model.invoices != null)
                    {
                        foreach (var modelItem in Model.invoices)
                        {

                            <tr style="border: 1px solid rgba(0,0,0,.125);  height:40px;">
                                <td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.InvoiceID</td>
                                <td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.BillTo</td>
                                <td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.InvoiceItems.Count() Items</td>
                                <td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.Total.ToString("C")</td>
                                <td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.InvoiceStatus</td>
                            </tr>
                        }
                    }


                }

            </tbody>
        </table>
        @if (Model.invoices.Count == 0)
        {
            <div style="text-align:center; padding-top: 10%;">You are not scheduled to do any masses at this time. Please go to Availible Sub Jobs for a list of available jobs.</div>
        }
    </div>
</div>
<div class="modal" tabindex="-1" id="SelectChurchModal">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Select A Church To Send An Invoice To</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body" id="SelectChurchModalBodyDiv">
                       
            </div>
        </div>
    </div>
</div>

<script>
    $("#invoices tr").click(function () {
        $("#invoices tr").removeClass("highlight");
        $(this).addClass("highlight");

        $('#jobModal').on('hidden.bs.modal', function () {
            $("#subJobs tr").removeClass("highlight");
        });
    });


    var SelectChurch = function () {
        $.ajax({

            type: "Post",
            url: "/App/SelectChurch",
            data: {},
            success: function (response) {

                $("#SelectChurchModalBodyDiv").html(response);
                $("#SelectChurchModal").modal("show");
            }
        })
    }
</script>


This is my partial for SelectChurchModal:

HTML
@model Church_Musician_Administration_App__Updated_.Models.InvoicesModel

<style>
    .highlight {
        background-color: darkviolet !important;
        color: white;
    }

    #churchesTableContainer {
        padding-left: 10px;
        padding-right: 10px;
        overflow-y: auto;
        height: 500px;
        display: block;
    }
    #churchesTable {
        padding-left: 10px;
        padding-right: 10px;
        overflow-y: scroll;
        display: block;
        font-family: "Arial";
    }
    #churchesTable tr {
        cursor: pointer;
    }
    #churchesTable th{
        cursor:default;
    }
    @@media only screen and (min-width: 200px) and (max-width: 992px) {
        #invoiceModalBodyDiv {
            padding: 5px;
        }
    }
</style>
<div id="churchesTableContainer">
    <table id="churchesTable" class="table table-striped" style="width:100%; border: 1px solid rgba(0,0,0,.125); border-left:none; border-right:none; text-align: center; display:inline-table;">
        <tbody>
            <tr style="background-color:darkviolet; height:40px; width:100%">
                <th style="color:white; border: 1px solid rgba(0,0,0,.125);">Name</th>
                <th style="color:white; border: 1px solid rgba(0,0,0,.125);">Denomination</th>
                <th style="color:white; border: 1px solid rgba(0,0,0,.125);">Church Type</th>
                <th style="color:white; border: 1px solid rgba(0,0,0,.125);">Church Address</th>
                <th style="color:white; border: 1px solid rgba(0,0,0,.125);">Church City</th>
                <th style="color:white; border: 1px solid rgba(0,0,0,.125);">Church State</th>
                <th style="color:white; border: 1px solid rgba(0,0,0,.125);">Church Zip</th>
                <th style="color:white; border: 1px solid rgba(0,0,0,.125);">Diocese</th>




            </tr>
            @{
                if (Model.invoices != null)
                {

                    foreach (var modelItem in Model.Churches.OrderBy(x => x.Name))
                    {

                        <tr style="border: 1px solid rgba(0,0,0,.125);  height:40px;">
                            <td style="display:none;">@modelItem.churchID</td>
                            <td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.Name</td>
                            <td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.Denomination</td>
                            <td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.churchType</td>
                            <td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.Address</td>
                            <td style=" border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.City</td>
                            <td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.State</td>
                            <td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.Zip</td>
                            <td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@modelItem.Diocese</td>
                        </tr>

                    }
                }


            }

        </tbody>
    </table>
</div>
<div class="modal" tabindex="-1" id="AddNewInvoiceModal">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Invoice</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body" id="invoiceModalBodyDiv">

            </div>
        </div>
    </div>
</div>
<script>
    $("#churchesTable tr").click(function () {
        $("#churchesTable tr").removeClass("highlight");
        $(this).not('th').addClass("highlight")
        var idFromTable = 0;
        idFromTable = $("#churchesTable tr").closest("tr.highlight").find('td:eq(0)').text();
        alert(idFromTable);

        $.ajax({

            type: "Post",
            url: "/App/AddNewInvoice",
            data: { churchID: idFromTable },
            success: function (response) {
                $("#invoiceModalBodyDiv").html(response);  
                $('#AddNewInvoiceModal').modal({ backdrop: 'static' });
                $("#AddNewInvoiceModal").modal("show");
                
                
                
               
                

            }
        })
    
    });

   
        
</script>


Finally this is AddNewInvoiceModel Partial:

HTML
@model Church_Musician_Administration_App__Updated_.Models.InvoicesModel
<style>
   

    .highlight {
        background-color: darkviolet !important;
        color: white;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgb(222, 178, 241);
    }

    .table-striped tbody tr:nth-of-type(even) {
        background-color: rgb(233, 204, 246);
    }

    #invoices {
        font-family: "Arial";
        padding-left: 10px;
        padding-right: 10px;
    }

    #wrappertable1 {
        text-align: left;
        width: 50%;
        float: left;
        padding-left: 10px;
    }

    #wrappertable2 {
        text-align: right;
        width: 50%;
        float: left;
        padding-right: 10px;
    }

    #table1 {
        border-collapse: separate;
        border-spacing: 0 15px;
        float: left;
        text-align: left;
        width: 95%;
    }

    #table2 {
        border-collapse: separate;
        border-spacing: 0 15px;
        float: right;
        text-align: left;
        width: 95%;
        margin-top: -12px;
    }

    #table3 {
        padding-left: 10px;
        padding-right: initial;
        overflow-y: auto;
        display: block;
        font-family: "Arial";
    }

    #table4 {
        padding-left: 10px;
        padding-right: 10px;
        overflow-y: auto;
        height: 500px;
        display: block;
    }

    #invoices tr {
        cursor: pointer;
    }

    #invoiceItems {
        overflow-y: scroll;
        max-height: 500px;
        display: block;
    }

    #invoiceItemsAdd tr {
        cursor: pointer;
    }

    #invoiceItemsAdd {
        overflow-y: scroll;
        max-height: 500px;
        display: block;
    }

    #wrappertable3 {
        padding-left: 10px;
        padding-right: 10px;
        overflow-y: auto;
        height: 350px;
        display: block;
    }
    @@media only screen and (min-width: 992px) and (max-width: 1199px) {
        #wrappertable2 {
            padding-bottom: 20px
        }
        #table2{
            border-spacing: 0px 28px;
        }
    }

    @@media only screen and (min-width: 200px) and (max-width: 992px) {
        #wrappertable2 {
            padding-bottom: 20px;
            padding-left: 10px;
        }
        #table1{
            width:100%;
        }
        #table2{
            width:100%;
            margin-top: initial;
        }
        #table3{
            padding-left:initial;
        }
        #wrappertable1{
            width: 100% !important;
            padding: 10px;
        }
        #wrappertable2{
            width: 100% !important;
        }
        #wrappertable3{
            height: 225px;
        }
        #totalTableContainer{
            padding-right: 60%;
        }
    }
</style>

@using (Html.BeginForm("AddNewInvoice", "App", FormMethod.Post))
{
    
                    foreach (var inv in Model.invoices)
                    {
                        
                       
                        <div id="wrappertable1">
                            <table id="table1">
                                <tbody>
                                    <tr style="padding-bottom:20px;">
                                        <th>Bill To:</th>
                                        <td colspan="2">@Html.DisplayFor(x => inv.BillTo, new { @class = "form-control", @style = "width:100%;" })</td>

                                    </tr>
                                    <tr>
                                        <th>Invoice Date:</th>
                                        <td colspan="2">@Html.TextBoxFor(x => inv.InvoiceDate, "{0:yyyy-MM-dd}", new { @class = "form-control", type = "date", style = "width:100%" })</td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                        <div id="wrappertable2">
                            <table id="table2">
                                <tbody>
                                    <tr>

                                        <th>Invoice Number:</th>
                                        <td><input type="text" disabled class="form-control" value="@inv.InvoiceID" /></td>


                                    </tr>
                                    <tr id="buttonsContainer">

                                        <td style="width: calc(100% / 2);"><button type="button" class="btn btn-primary" style="width:100%" id="deleteItemButton">Delete Item</button></td>
                                        <td style="width: calc(100% /2);"><button type="button" class="btn btn-primary" style="width:100%" data-toggle="modal" data-id="1" data-target="#AddInvoiceItemModal" id="addItemButton">Add Item</button></td>

                                    </tr>
                                </tbody>
                            </table>
                        </div>
                      
                    }
                    
                    <div id="wrappertable3">
                        <div id="table3">
                            <table id="invoiceItems" class="table table-striped" style="width:100%; border: 1px solid rgba(0,0,0,.125); border-left:none; border-right:none; text-align: center; display:inline-table;">
                                <tbody>
                                    <tr style="background-color:darkviolet; height:40px; width:100%">
                                        <th style="color:white; border: 1px solid rgba(0,0,0,.125);">ID</th>
                                        <th style="color:white; border: 1px solid rgba(0,0,0,.125);">Description</th>
                                        <th style="color:white; border: 1px solid rgba(0,0,0,.125);">Stipend</th>


                                    </tr>
                                    @{
                                        if (Model.invoices != null)
                                        {
                                            int count = 1;
                                            foreach (var modelItem in Model.invoices)
                                            {

                                                foreach (var invoiceItem in modelItem.InvoiceItems)
                                                {


                                                    <tr style="border: 1px solid rgba(0,0,0,.125);  height:40px;">
                                                        <td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@count</td>
                                                        <td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@invoiceItem.Description</td>
                                                        <td style="border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@invoiceItem.StipendPerMass.ToString("C")</td>
                                                        <td style="display:none; border: 1px solid rgba(0,0,0,.125); vertical-align:middle;">@invoiceItem.TotalAmount</td>
                                                    </tr>
                                                    count = count + 1;

                                                }
                                            }
                                        }


                                    }

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div id="totalTableContainer" style="text-align:right; padding-left:75%; border:none;">
                        <table id="totalTable" style="width:100%; display:inline-table; border:none; font-size:22px;">
                            <tbody>
                                <tr style="background-color:darkviolet; height:40px; width:100%">
                                    <th style="background-color:white; text-align: right; ">Total: </th>
                                    <td style="background-color:white; text-align: left;">
                                        <div id="total"></div>


                                    </td>


                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <hr />
                    <div style="margin-top: 5px; margin-bottom: 15px; text-align:center">
                        <button type="button" class="btn btn-primary" style="width:calc(100%/4)" id="EmailInvoice">Email Invoice</button>
                        <button type="button" class="btn btn-primary" style="width:calc(100%/4)" id="PrintInvoice">Print Invoice</button>
                        <button type="button" class="btn btn-primary" style="width:calc(100%/4)" id="CloseInvoice">Close</button>
                    </div>

}
Posted
Updated 28-Oct-20 23:37pm
Comments
[no name] 28-Oct-20 0:54am    
Except for malware, there is no such thing as a "modal" dialog in a (stateless) web app. You need to rethink your use case.

(Your "church" is just a party to an invoice; not some kind of "parent" entity in this case).

1 solution

You probably need to wait for the first dialog to close before opening the second:
JavaScript
success: function (response) {
    $("#invoiceModalBodyDiv").html(response);
    
    $("#SelectChurchModal").one("hidden.bs.modal", function(){
        $('#AddNewInvoiceModal').modal({ backdrop: 'static' });
        $("#AddNewInvoiceModal").modal("show");
    }); 
    
    $("#SelectChurchModal").modal("hide");
}
.one() | jQuery API Documentation[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900