У меня есть веб-страница, на которой отображается список событий, и можно щелкнуть каждое событие, чтобы получить подробную информацию об этом событии.
Моя проблема в том, что загрузка данных занимает много времени, и я хотел бы отобразить первый модал, который отображает полосу загрузки, а затем второй модал, который содержит подробности этого события.
Сначала ничего сложного, но у меня есть второй модал, который открывается слишком рано, затем оба появляются на экране, и я не знаю, как это исправить.
Список событий
<tbody>
@foreach (var item in Model._EventsLines)
{
<tr>
<td><a href="#myModal" class="myModal" data-toggle="modal" id="@item.Zkp" onclick="GetEventsDetails(this.id)">@item.Event_Name</a></td>
<td>@item.Event_DateStart.ToShortDateString()</td>
<td>@item.Event_DateEnd.ToShortDateString()</td>
<td>@item.Event_Status</td>
</tr>
}
</tbody>
модальности
@* Modal with Event details and SubEvents*@
<div class="modal fade" role="dialog" id="myModal" tabindex="-1" aria-labelledby="myModal" aria-hidden="true" style="display: none">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<div id="myModalContent">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@* Modal for Loading*@
<div class="modal" role="dialog" id="myModalLoading" tabindex="-1" aria-labelledby="myModalLoading" aria-hidden="true" style="display: none">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" id="progressBar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
</div>
</div>
</div>
</div>
JS код
<script type="text/javascript">
function GetEventsDetails(id) {
$('#myModal').hide();
$('#myModalLoading').show();
var idd = id;
$.get("@Url.Action("GetEventsDetails", "Events")/" + idd,
function (data) {
$('#myModal').hide();
$('#myModalLoading').hide();
$('.modal-body').html(data);
$('#myModal').show();
}
)
}
</script>
РЕДАКТИРОВАТЬ /
Я заметил, что если я добавлю "fade" ко второму модальному классу, он даже не отобразится вообще.
Также я сначала хотел иметь только один модальный режим и сначала отображать индикатор выполнения, а затем, когда данные будут загружены, он скрывал индикатор выполнения и отображал данные в модальном режиме, но он работал только в первый раз, затем, когда я нажмите на другое событие (или то же событие), индикатор выполнения не отображается .. я не получаю его, и поэтому я пытаюсь сделать это с помощью второго модального (и отдельно).
Я также пытался изменить href на #, потому что это было проблемой, но если я это сделаю, то модал даже не открывается (чего я не получаю, потому что у меня есть .show в моей функции).
Вот несколько скриншотов, которые я предоставляю, они могут помочь вам понять, что не работает:
Когда я захожу на страницу и нажимаю на событие:
Когда я закрываю модальное, я нажимаю на другое (или то же самое) событие:
Если я хочу снова перейти к первому поведению, мне нужно перезагрузить веб-сайт, и он все равно делает это один раз ...
РЕДАКТИРОВАТЬ 2 //
Думаю, я уже близко!
Я изменил href следующим образом:
<td><a href="#myModalLoading" class="myModal" data-toggle="modal" id="@item.Zkp" onclick="GetEventsDetails(this.id)">@item.Event_Name</a></td>
Итак, теперь он открывает хороший модал загрузки, а затем, когда данные загружаются, закрывает модальный режим загрузки и показывает второй модал.
Моя теперь проблема в том, что если я позволю class = "modal fade" во втором модале, то он не появится .. Поэтому мне пришлось удалить, чтобы заменить его на class = "modal".
Это выглядит хорошо, но я не могу закрыть его: D
(Я могу закрыть модальную загрузку, но не модальную, которая содержит данные.
Я знаю, что это связано с href, и я полагаю, также переключение данных, но есть ли способ решить это?)
Есть идеи?
Вот последний код JS:
function GetEventsDetails(id) {
var idd = id;
$.get("@Url.Action("GetEventsDetails", "Events")/" + idd,
function (data) {
$('#myModalLoading').hide();
$('#myModal').show();
$('.modal-body').html(data);
})
}