Блог

Главная - Вопросы по программированию - Как сохранить модальный режим открытым при смене html-шаблона с одного на другой с помощью fetch api

Как сохранить модальный режим открытым при смене html-шаблона с одного на другой с помощью fetch api

#javascript #jquery #flask #bootstrap-4 #fetch

Вопрос:

Я реализую функцию ведения журнала в модальном окне, которое запускается ссылкой с тегом привязки. Во время запуска приложения, нажав на btn1, пользователь может щелкнуть по тегу привязки для просмотра журналов, но приложение меняет шаблон html на другой, и модальный закрывается. Содержимое журнала было считано из текстового файла и помещено в список неупорядоченных элементов. Как сохранить модальный режим открытым после перенаправления на другой html-шаблон из шаблона def_entry и сохранить тот же журнал? Как использовать один и тот же модальный код для каждого имеющегося у меня html-шаблона? любая идея или помощь будут очень признательны!

Ниже показан код.

 
 <script>

// fire an event on an anchor tag
$('#MainLog').click(function () {

  // resetting the position of the modal
  if (!$(".modal.in").length) {
$(".modal-dialog").css({
  top: 0,
  left: 0
});
}
});

function submit_entry(def_entry){

 fetch(`${window.origin}/process_definition/`, {
         method: "POST",
         credentials: "include",
         body: JSON.stringify(entry),
         cache: "no-cache",
         headers: new Headers ({
           "content-type": "application/JSON"
         })
       })
       .then(function(response){
         // deal with the response that has been received from flask view in /preporcess_definition

         // deal with other than 307 status cases
         if(response.status != 307){
           console.log(`Response.status was not 200: ${response.status}`)
           return ;
         }
}

}


    $(document).ready(function(){
      var output = document.getElementById('output');
      var xhr = new XMLHttpRequest();
      xhr.open('GET', '{{ url_for('stream') }}', true);
      xhr.send();
      var position = 0;



      setInterval(function() {
        // output.textContent = xhr.responseText;
        var messages = xhr.responseText.split('n');
    messages.slice(position, -1).forEach(function(value) {
        // latest.textContent = value;  // update the latest value in place
        // build and append a new item to a list to log all output
        var item = document.createElement('li');
        item.textContent = value;
        output.appendChild(item);
        output.parentNode.scrollTop = output.parentNode.scrollHeight;


    });
    position = messages.length - 1;

    // $('#exampleModalLong').animate({ scrollTop: $('#exampleModalLong .modal-content').height() }, 'slow');
    // $("#exampleModalLong").animate({ scrollTop: $("#exampleModalLong").height() }, "slow");





      }, 500);
    });
  </script>

<body>

<!-- body content of def_entry template -->

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <!-- Navbar content -->
  <a class="navbar-brand" href="{{ url_for('login') }}">DENA</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
 </button>

 <div class="collapse navbar-collapse" id="navbarSupportedContent">
   <ul class="navbar-nav mr-auto">
     <li class="nav-item active">
       <a class="nav-link" href="{{ url_for('login') }}">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item">
       <!-- <a class="nav-link" href="#">Link</a> -->
       <a data-target="#exampleModalLong" data-toggle="modal" class="nav-link" id="MainLog"
        href="#exampleModalLong">View Logs</a>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Dropdown
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Action</a>
         <a class="dropdown-item" href="#">Another action</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Something else here</a>
       </div>
     </li>
     <li class="nav-item">
       <a class="nav-link disabled" href="#">Disabled</a>
     </li>
   </ul>

 </div>
</nav>

                <button id="btn1" class="btn btn-primary"  onclick="submit_entry('def_entry');" style="float: right;">Submit</button>


<!-- Modal -->
            <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle">
              <div class="modal-dialog  mw-100 w-75" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">DENA Logging</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">amp;times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <!-- <pre id="output"></pre> -->
                    <ul id="output"></ul>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
        <!-- Modal -->
</body>
Метки: