Обновление div или страницы один раз с помощью JS или jQuery / Ajax

Question

Итак, я хочу перезагрузить div или веб-страницу только один раз для веб-приложения Flask, над которым я работаю, но, поскольку я плохо знаю JS, я застрял в цикле, а не обновлялся только один раз.

Почему я пытаюсь это сделать?

Перед тем, как перейти на эту страницу, пользователь вводит данные и выполняет вычисления, а затем через Selenium делает скриншот веб-сайта, процесс занимает слишком много времени, поэтому, когда пользователь нажимает клавишу ввода, он выполняет вычисления и затем перенаправляет на новыйОднажды на этой странице я вызываю fx, который в фоновом режиме через ajax передает функцию selenium, вместо скриншота загружается gif.

Цель состоит в том, что после завершения маршрута ajax div или страница перезагружается только один раз, чтобы заменить gif, и показывает скриншот (который я сделал через if / else в Jinja). Надеюсь, что это имеет смысл, если не позволю мнезнаю.

Это div, над которым я хочу работать

<div id="siteimg" class="c">
{% if a.imgofsite != "" %}
  <img class="c" src="{{ url_for('static', filename = '' + a.imgofsite ) }}" style="overflow: hidden;">
{% else %}
  <img class="c" src="{{ url_for('static', filename = 'img/load.gif') }}" style="overflow: hidden;">
  <h5 class="c" style="overflow: hidden;">RENDERING SCREENSHOT</h5>
{% endif %}

Ниже приведен JS, который я использую для отправки формы, а затем вызываю ее.

  <script type="text/javascript">
        function img_load() {
        $.ajax({
            type: 'POST',
            url: '/siteimage/{{ a._id }}',
              });
             }
    </script>
    <script>img_load();</script>

То, что я пробовал: это поставило меня в непрерывный цикл

location.reload(true);

Это не дало мне ответа, когда я добавил его в блок вызова ajax

function refresh() {

setTimeout(function () {
    location.reload()
}, 100);

} ​​

Этот также поставил меня в непрерывный цикл

$("#siteimg").load(location.href + " #siteimg");

Answer 1

Так что я понял это.Во-первых, позвольте мне сказать спасибо всем, кто предоставил ответы и редактирование, чтобы помочь мне в этом вопросе.На данный момент это мое решение.Если возникнут какие-либо проблемы, я обязательно добавлю эту информацию.

Как только я закончу с этим проектом, я определенно буду проходить некоторые курсы JS / jQuery и Ajax.

 <script>
        var delayInMilliseconds = 60000; // 1 min
    function img_load() {
       $.ajax({
         type: 'POST',
         url: '/siteimage/{{ a._id }}',
       },

          setTimeout(function() {
            $('#siteimg').load(document.URL +  ' #siteimg');
       }, delayInMilliseconds)
       )
     }
     img_load()
  </script>

Answer 2

Полагаю, вам нужно обновить содержимое вашего div с полученными данными примерно так:

<script> 
    function img_load() {
       $.ajax({
         type: 'POST',
         url: '/siteimage/{{ a._id }}',
         success: function(response) {
                       $('#siteimg').append(response);
                  },
         error: function(jqXHR, exception) {
                       console.log('Ajax status: ' + jqXHR.status + ', error: ' exeption);
                }
      });
     }
  </script>

Answer 3

Что делать, если вы используете браузеры sessionStorage для отслеживания, была ли страница перезагружена или нет после первого посещения.

В конце вашего html вставьте следующий js:

<script type="text/javascript">
    if (!sessionStorage.getItem('reloaded')) {
        // Page was not reloaded until last visit: do some stuff
        sessionStorage.setItem('reloaded', true); // remeber the following reload for the next time
        setTimeout(function () {
            window.location.reload();
        }, 100);
    }else{
        // Page was reloaded: clear your flag for the next visit
        sessionStorage.removeItem('reloaded');
    }
</script>

Если вы решили показать модал, который пользователь сообщает о перезагрузке (что, по моему мнению, будет хорошей практикой), вам следует увеличить значение setTimeout с 100 до 2500.

. Выможете попробовать это здесь (с дополнительным выводом на консоль): http://fiddle.bplaced.net/53414316/

Редактировать:

После прочтения вашего вопроса вам снова потребуется запрос ajax.Перезагрузка вашего сайта - это просто обходной путь.

Хотя мое решение должно делать то, о чем вы просили - ответ Андерсона - это то, что вы должны искать.

Answer 4

Помогает ли это?

SetTimeout is вызовет ajax, специфичный для div siteimg, через 2 секунды.

setTimeout(function() {
  $.get(window.location.href + " #siteimg", function(data) {
    //empty old contents
    $('#siteimg').empty().append($(data).find('#siteimg').children());

    //recall after contents are emptied
    $.ajax({
      type: 'POST',
      url: '/siteimage/{{ a._id }}'
    });
    $('#siteimg').append("<img src='https://www.w3schools.com/w3css/img_lights.jpg'>");
    $('#siteimg').append(
      "<img src='https://www.gettyimages.co.uk/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg'>"
    );

  });
  console.log($("#text").html());
}, 2000);