У меня есть скрипт, который делает AJAX-вызовы для обновления страницы каждые 5 секунд.Я хочу отображать предупреждение / всплывающее окно каждый раз, когда наблюдается изменение, то есть в первый раз, когда страница загружается, я хочу отобразить всплывающее окно с надписью «Все настроено!»и на следующей странице загружается через AJAX, я покажу всплывающее окно, если есть какие-либо изменения.Всплывающее окно остается на странице в течение 2 секунд, а затем исчезает.
Я могу успешно выполнять вызовы AJAX.Однако всплывающее окно не работает должным образом.
Наблюдаемое поведение: - Всплывающее окно отображается при загрузке страницы, как и ожидалось, но не закрывается через 2 секунды.Однако страница обновляется через 5 секунд из-за вызова AJAX.Всплывающее окно остается на своем месте, если я не закрою его вручную.
Думаю, я выяснил, где может возникнуть проблема.Вызовы AJAX осуществляются через функцию setInterval() JS.Я удалил это утверждение и попытался вызвать всплывающую функцию, и она работала как ожидалось, то есть страница загрузилась, а затем появилось всплывающее окно.Через 2 секунды всплывающее окно закрывается автоматически.Однако этот метод бесполезен, так как я не смогу выполнять перезагрузку страницы в фоновом режиме через каждые 5 секунд.
Кажется, проблема возникает из-за вызовов AJAX.
HTML - dashboard.html
{% extends "base.html" %}
{% block content %}
<div id='modal-disp' class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
No new images!
</div>
</div>
</div>
<div class="image-area">
<div class="container dash-container main-body" >
<hr>
<div class="row">
<br>
<hr >
<br>
<div class="col-md-12">
<div class="jumbotron ">
<h1 id="hdr">DASHBOARD</h1>
</div>
</div>
</div>
{% if folders %}
<div class="row">
<div class="col-md-12 folder-list" id="info">
Please select the Date to view their corresponding test results.<br><br>
{% set ns = namespace(counter=0) %}
<table class="table table-hover ">
{% for row in range(rows) %}
<tr class="row-hover">
{% for data in range(3) %}
{% if ns.counter < folders|length %}
<td>
<a class="folder-link" href="{{ url_for('image',im=folders[ns.counter]) }}">{{ folders[ns.counter] }}</a>
<br>
{% set ns.counter = ns.counter + 1 %}
</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</table>
</div>
</div>
{% endif %}
{% if images %}
<div class="row" id="info">
<a href="{{ url_for('dashboard') }}"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></a>
</div>
<br><br>
<div class="row">
<div class="col-md-12" id="info">
{% set ns = namespace(counter=0) %}
<table class="table table-hover table-condensed table-bordered images-table" cellspacing="5" cellpadding="5">
{% for row in range(rows) %}
<tr class="image-hover">
{% for data in range(3) %}
{% if ns.counter < images|length %}
<td style="width:10%;">
<a href="{{ url_for('display',file=images[ns.counter][10:],folder=images[ns.counter][0:10]) }}"><img src="{{ url_for('static',filename=images[ns.counter]) }}" alt="User Image" width="200" height="180"></a>
<br>
{% set ns.counter = ns.counter + 1 %}
</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</table>
</div>
</div>
{% endif %}
</div>
</div>
{% endblock %}
Файл Javascript -
<script type="text/javascript">
var first_time = 0;
var current_count = 0;
var total_count = 0;
function update(){
$('#modal-disp').modal('show');
setTimeout(function() { $("#modal-disp").modal('hide'); }, 2000);
if (first_time === 0){
current_count = $('td').length;
total_count = current_count;
first_time = 1;
//var txt = $("<p class='notify'></p>").text("No new images");
$('body').append("<div class='row'><div class='col-md-12'><p class='notify'><br>Up to date !</p></div></div>");
$('.notify').css({'color':'#06661f','font-size':'30px','font-family': "'Saira',sans-serif",'font-style':'bold','text-align': 'center'});
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
//$('#myModal').modal('hide');
setTimeout(function() { $(".notify").text(""); }, 5000);
}
else {
total_count = $('td').length;
if (total_count>current_count){
$('.notify').text(total_count-current_count + " new image added !");
$('.notify').css({'color':'#bc0041','font-size':'30px','font-family': "'Saira',sans-serif",'font-style':'bold','text-align': 'center' });
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
//alert(total_count-current_count + ' images added !');
current_count = total_count;
setTimeout(function() { $(".notify").text(""); }, 5000);
}
}
}
//setInterval(function(){ $('.image-area').load("{{ url_for('image',im=image_date) }}"); update(); }, 2000);
setInterval(function(){$('.image-area').load("{{ url_for('image',im=image_date) }}", function() {update();}); }, 5000);
</script>
Здесь Flask используется на заднем конце.Поэтому я вызываю маршрут /image каждые 5 секунд.Для простоты кода я пока показываю статическое всплывающее окно.Всплывающее окно определяется в верхней части HTML-файла.Я думаю, что вызовы AJAX мешают работе DOM, и в результате тег модального идентификатора маскируется.
Пожалуйста, помогите.
РЕДАКТИРОВАТЬ 1:
Обратите внимание, что на рисунке 1 есть всплывающее окно, а также сообщение - «В курсе!»в крайней нижней части страницы.Это работает так, как должно, потому что страница загружается впервые.
Здесь, на рисунке 2, вы можете увидеть, что сообщение - «Вверхна сегодняшний день "там больше нет.Такое поведение также ожидается, потому что согласно логике кода сообщение отображается только при начальной загрузке страницы.Он не будет отображаться при последующих перезагрузках страницы AJAX.Проверьте функцию update () для ясности.
В то же время вы можете видеть, что окно предупреждения осталось на своем месте.Прошло более 10 секунд, и окно предупреждения не закрылось вообще.
РЕДАКТИРОВАТЬ 2:
Я заметил, что если я размещу HTML-код длямодальный внутри тега div с class = "image-area", всплывающее окно закрывается через 2 секунды, но его фон (то есть выделенный серым фоном) не исчезает.Кроме того, из-за этого весь сайт перестает отвечать на запросы.Щелчок в любом месте на экране не имеет никакого эффекта, и все выглядит серым из-за наличия фона.
Элемент div с class area = "image-area", определенный вверху, охватывает весь обновленный HTML-кодкаждые 5 секунд.Эта часть HTML извлекается из серверной части.
Python - rout.py
@app.route('/image/<im>')
@login_required
def image(im):
image_src=[im+'/'+i for i in os.listdir(os.path.join(app.static_folder,im))]
rows=math.ceil(len(image_src)/3)
print(image_src)
return render_template('dashboard.html',title='Welcome',images=image_src,rows=rows,image_date=im)
Такое поведение наблюдается при перемещении модального HTML внутри самого верхнего тега div следующим образом:
{% extends "base.html" %}
{% block content %}
<div class="image-area">
<div id='modal-disp' class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
No new images!
</div>
</div>
</div>
<div class="container dash-container main-body" >
<hr>
На следующем изображении показана веб-страница после исчезновения всплывающего окна.Обратите внимание, что нажатие в любом месте веб-страницы не дает никакого ответа.
