Запретить использование формы Javascript обратно при нажатии кнопки Назад

Question

Я создаю таблицу, используя ajax.Когда я нажимаю на кнопку, он прочитает строку и создаст форму, используя ajax.Здесь все хорошо.Но когда я нажимаю кнопку «Назад» в браузере, данные как-то публикуются / отображаются обратно как ФОРМА.Как удалить / предотвратить это при нажатии на назад.Что я прочитал: 1) Очистить ввод для формы.Но где чтение ввода, потому что форма создается с использованием функции submitRowAsForm при нажатии кнопки 2) Отключить автозаполнение.Но это не актуально и не работает.

$(document).ready(function update(){
    $.ajax({
      url: 'getSchedule.php',
      success: function(data,status)
      {
        createTableByForLoop(data);
      },
      async:   true,
      dataType: 'json'
    }).then(function() {           // on completion, restart
      setTimeout(update, 30000);  // function refers to itself
   });; 


});


function createTableByForLoop(data)
{
    var table = "\
    <div class='table-scrollable'>\
    <table class=\"table table-responsive\">\
    <thead >\
        <tr>\
          <th class=\"d-none\">ID</th>\
          <th class=d-none>SHOWSCHEDULE_ID ID</th>\
          <th>TITLE</th>\
          <th>TIME</th>\
          <th>ACTION</th>\
        </tr>\
      </thead>\
      <tbody>"

      for(var i=0; i<data.length;i++)
      {
        table += "<tr id=\""+i+"\">";
        table += "<td class=d-none><input type=text class=\"form-control transparent-input\" name=SHOWSCHEDULE_ID value=\""+data[i]['SHOWSCHEDULE_ID']+"\" readonly></td>";
        table += "<td><input type=text class=\"form-control transparent-input\" name=SHOWSCHEDULE_SHOWTITLE value=\""+data[i]['SHOWSCHEDULE_SHOWTITLE']+"\" readonly></td>";
        table += "<td><input type=text class=\"form-control transparent-input\" name=SHOWBEGINTIME value=\""+data[i]['SHOWBEGINTIME']+"\" readonly> - <input type=text class=\"form-control transparent-input\" name=\""+data[i]['SHOWENDTIME']+"\" value=\""+data[i]['SHOWENDTIME']+"\" readonly></td>";
        table += "<td><button onclick=submitRowAsForm("+i+") id=btnRoom class=\"btn btn-outline-success\" >Room</button>\
                           <button onclick=submitRowAsForm("+i+") id=btnBook class=\"btn btn-outline-warning\" >Book</button></td>";
        table += "</tr>";
      }
      table +="</tbody></table></div>";
      $('#idShowSchedule').html(table);

}


function submitRowAsForm(id) {
    form=document.createElement('form');
    form.method='POST';
    form.action='OrderTicket.php';

    $("#"+id).children().each(function() {
      $(this).children().each(function(){
          $(this).clone().appendTo(form);
      });
    });
    document.body.appendChild(form);
    form.submit();

}

Answer 1

Для защиты от кнопки «Назад» я бы установил на вашей странице грязный флаг.Таким образом, когда он установлен, вы знаете, что сделали это раньше.Итак,

1. Проверьте, установлен ли ваш флаг «грязного» * ​​1004 *
2. Если не установлен ваш флаг «грязного» * ​​1006 *
3. Загрузите данные, потому что это новая загрузка страницы.

Удостоверьтесь, что вы делаете это после того, как содержимое DOM было загружено, иначе это не получится в некоторых браузерах.

Вот пример того, как я этого не делал в одном из моих старых проектов

document.addEventListener("DOMContentLoaded", function (event) {
    var dirty = 0;
    var dirtyEl = document.getElementById('page_is_dirty')
    if (!dirty && dirtyEl && (dirtyEl.value != "0" && dirtyEl.value != "")) {
        dirty = 1;
    }
    else if (dirtyEl) {
        dirtyEl.value = '1';
    }
    var el = document.getElementById('ClickApp');
    if (el && !dirty)
        el.innerHTML = "<div id='ClickApp' ng-view='' click-main><br /><br /><center><h2>Loading Calendar</h2><br /><span id='ErrorInstructions'></span><br /><div class='ui-progress-bar ui-container' id='progress_bar' style='width: 350px'><div id='progressBar' class='ui-progress' style='width: 0%; float: left'></div></div><br /><br /><small><span id='LastError'></span></small></center></div>";
    else {
        var dirtyMEl = document.getElementById('page_is_dirty_message');
        var dirtyMSG = dirtyMEl ? dirtyMEl.value : "You arrived here by hitting the back button. Please start over.";
        el.innerHTML = "<div><br /><br /><center><h2>" + dirtyMSG + "</h2><br /><span id='ErrorInstructions'></span><br /><div class='ui-progress-bar ui-container' id='progress_bar' style='width: 350px'><div id='progressBar' class='ui-progress' style='width: 0%; float: left'></div></div><br /><br /><small><span id='LastError'></span></small></center></div>";
    }
    if (!dirty) {
        //Do your data loading. Page transformaions, whatever
        ...
    }});