Как сохранить кнопку отключенной даже после обновления страницы? - PullRequest
0 голосов
/ 18 декабря 2018
    <html>

    <head>
      <title>RollBack Resume UI</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script type="text/javascript">
        function noBack(){window.history.forward()}
        noBack();
        window.onload=noBack;
        window.onpageshow=function(evt){if(evt.persisted)noBack()}
        window.onunload=function(){void(0)}
      </script>
    </head>

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="{{base_url}}/admin/">Airflow</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="{{base_url}}/admin/">DAGs</a></li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Data Profiling <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="{{base_url}}/admin/queryview/">Ad Hoc query</a></li>
              <li><a href="{{base_url}}/admin/chart/">Charts</a></li>
              <li><a href="{{base_url}}/admin/knownevent/">Known Events</a></li>
            </ul>
          </li>
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Browse <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="{{base_url}}/admin/slamiss/">SLA Instances</a></li>
              <li><a href="{{base_url}}/admin/taskinstance/">Task Instances</a></li>
              <li><a href="{{base_url}}/admin/log/">Logs</a></li>
                <li><a href="{{base_url}}/admin/basejob/">Jobs</a></li>
                <li><a href="{{base_url}}/admin/dagrun/">DAG Runs</a></li>

            </ul>
          </li>

            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Admin <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="{{base_url}}/admin/pool/">Pools</a></li>
              <li><a href="{{base_url}}/admin/configurationview/">Configuration</a></li>
              <li><a href="{{base_url}}/admin/user/">Users</a></li>
                <li><a href="{{base_url}}/admin/connection/">Connections</a></li>
              <li><a href="{{base_url}}/admin/variable/">Variables</a></li>
                <li><a href="{{base_url}}/admin/xcom/">XComs</a></li>

            </ul>
          </li>

            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Rollback <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="{{base_url}}/admin/rollback/">Rollback </a></li>
              <li><a href="{{base_url}}/admin/rollbackresume/">Resume</a></li>
            </ul>
          </li>

            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Docs <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Documentation</a></li>
              <li><a href="#">Github</a></li>
            </ul>
          </li>

            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">About <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="{{base_url}}/admin/versionview/">Version</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>

    <div class="container">
        <h3>RollBack Resume UI</h3>
      <table class="table table-bordered">
        <thead class="thead-dark">
          <tr>
            <th scope="col">#</th>
            <th scope="col" >Dataset Id</th>
            <th scope="col">Dataset State</th>
          </tr>
        </thead>
        <tbody>
         {% for i in qry%}
                <tr>
                    <th scope="row"> </th>
                   <td> {{ i.dataset_id }} </td>
                   <td> {{ i.dataset_state }} </td>
                </tr>
         {% endfor %}

        </tbody>
      </table>
      </div>
       <head>
        <div class="container">
             <button type="button" class="btn btn-primary" onclick="loadDoc()"> Resume operation </button>
         </div>>

    <p id="demo"></p>

    <script>
    function loadDoc(dataset_id) {
      var xhttp = new XMLHttpRequest();

      document.getElementById("myBtn").disabled = true;
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo").innerHTML = this.responseText;
        }
      };
      xhttp.open("POST", "http://127.0.0.1:8000", true);
      xhttp.setRequestHeader('Accept','text/html')
      xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhttp.setRequestHeader("Content-Length","22");
      xhttp.send(JSON.stringify({'operation' : 'inactive'}));
    }
    </script>
       </head>
    </html>

Объяснение:
У меня есть HTML-страница, на которой отображаются некоторые данные из БД.У меня также есть кнопка, которая после нажатия отправляет HTTP-запрос на публикацию, поэтому вскоре после нажатия кнопки я отключаю кнопку и хочу отключить ее даже после обновления браузера.Я не знаю, как мне это сделать. Может ли кто-нибудь помочь мне в этой ситуации?

Ответы [ 3 ]

0 голосов
/ 18 декабря 2018

Вы можете использовать LocalStorage API для достижения этой цели.

Когда пользователь отправляет форму, вы сохраняете состояние в LocalStorage, который управляет атрибутом отключенных кнопок отправки.При загрузке страницы вы должны запросить LocalStorage для этого состояния и соответственно инициализировать отключенный атрибут:

// Query storage state and set disabled attribute if local storage has 
// myBtnDisabled key value of "true"
if(window.localStorage && localStorage.getItem("myBtnDisabled") === "true") {
  document.getElementById("myBtn").disabled = true;
}

function loadDoc(dataset_id) {
  var xhttp = new XMLHttpRequest();

  document.getElementById("myBtn").disabled = true;
    
  // Set state to cause the button to be disabled in future refreshes
  if(window.localStorage) {
    localStorage.setItem("myBtnDisabled", "true");
  }
  
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "http://127.0.0.1:8000", true);
  xhttp.setRequestHeader('Accept', 'text/html')
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.setRequestHeader("Content-Length", "22");
  xhttp.send(JSON.stringify({
    'operation': 'inactive'
  }));
  
}
0 голосов
/ 18 декабря 2018

Вы можете использовать session или localStorage и проверять эти условия в функции и вызывать эту функцию, когда ваша страница загружена или готова, например:

$(document).ready(function(){
      $(function(){
         if(localStorage.getItem('your_variable)){
            $('#mybtn').prop('disabled', false);
          }else{
            $('#mybtn').prop('disabled', true);
          }
       })

 });

Надеюсь, это поможет.

0 голосов
/ 18 декабря 2018

Вы можете установить переменную сеанса после запроса и проверить, установлена ​​ли переменная, отключить кнопку или если вы хотите обрабатывать ее из JavaScript-файлов cookie использования.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...