Bootstrap 3.3.7 - загрузка gif-кнопки при запуске функции на другом маршруте - PullRequest
Новая
       50

Bootstrap 3.3.7 - загрузка gif-кнопки при запуске функции на другом маршруте

0 голосов
/ 19 сентября 2018

У меня в приложении для колб есть несколько кнопок, которые при нажатии запускают функцию на другом маршруте.Я хочу добавить загрузочный GIF, когда страница ожидает завершения функции.Я попробовал дюжину примеров из SO, но мне не повезло.Обратите внимание, что я на начальной загрузке 3.3.7, поэтому я не могу использовать

HTML: для маршрута / панели мониторинга (здесь кнопка живет) 

{% block styles %}
<!-- Bootstrap latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom CSS -->
<link  href="{{ url_for('static', filename='css/custom-base.css') }}" rel="stylesheet">
<!-- Font Awesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Pretty loading buttons -->
<link  href="{{ url_for('static', filename='css/loading-btn.css') }}" rel="stylesheet">
{% endblock %}

<!-- run function-->
<div class="container">
    <div class="jumbotron">
        <h2>Run Model</h2>
           <div class="container" align="left">
                <a href="/run_model" target="">
                    <button class="btn btn-primary ">Run</button></a>
           </div>
    </div>
</div>

{% block scripts %}
    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


{% endblock %}

Маршруты: кнопка ссылается на run_modelфункция, выполняет и перенаправляет на страницу панели инструментов. 

{% block content %}

@app.route('/run_model')
def run_model():
try:
    # run a machine learning mode


except:
    # if errors found flash some error
    flash('Looks like something went wrong. Please try again! :(', 'danger')

return redirect(url_for('dashboard'))
{% endblock %}

По сути, я хочу анимировать кнопку, пока она находится на странице / панель инструментов, когда браузер "ожидает завершения 127.0.0.1:5000/run_model и будетперенаправлен обратно на /dashboard

1 Ответ

0 голосов
/ 19 сентября 2018

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

Полный пример: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}
</style>
</head>
<body style="margin:0;">

<div id="loader" style="display:none;"></div>

<div  id="myDiv" style="display:block" class="animate-bottom">
  <h2>Tada!</h2>
  <p>Some text in my newly loaded page..</p>
  <a href="/run_model" target=""><button class="btn btn-primary" onclick="testfunc()">Run</button></a>
</div>

<script>


function testfunc(){
  document.getElementById("loader").style.display = "block"
  document.getElementById("myDiv").style.display = "none"
  setTimeout(redirect, 5)

}

function redirect(){
  window.location.href = 'http://127.0.0.1:5000/';
}

</script>
</body>
</html>

Изменено с: https://www.w3schools.com/howto/howto_css_loader.asp

...