Закройте одно модальное окно (с частичным просмотром) и откройте другое (с частичным просмотром), которое не работает
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.
Пожалуйста, извините за встроенный css. Это просто временно, пока я тестирую свой код. Мне нужно сделать SelectChurchModal закрытым до того, как откроется AddNewInvoiceModal. Может быть, я допустил тривиальную ошибку в своем коде?
Что я уже пробовал:
Вот мой обычный вид счета-фактуры:
@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>
Это мой частичный для SelectChurchModal:
@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>
Наконец это AddNewInvoiceModel Partial:
@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>
}
Gerry Schmitz
За исключением вредоносных программ, в веб-приложении (без состояния) нет такого понятия, как "модальный" диалог. Вам нужно переосмыслить свой вариант использования.
(Ваша "Церковь" - это просто сторона счета-фактуры, а не какая-то "родительская" организация в данном случае).