Javascript не работает с Flask бэкэндом - PullRequest
Новая
       14

Javascript не работает с Flask бэкэндом

0 голосов
/ 20 марта 2020

Я так долго боролся с этой проблемой. Когда я запускаю html файл сам по себе, javascript работает нормально, и мой код выполняется точно так, как я хочу. Однако при работе с моим Flask бэкэндом это не выполняется. Мой код структурирован почти так же, как в этом репо .

Также обратите внимание, что Jinja может быть причиной этой проблемы, но снова синтаксис Jinja все еще работает, когда файл HTML запускается сам по себе. Пожалуйста помоги. Это файл html: 


    {% extends 'layout.html' %}

    {% block styles %}
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/request.css">
    {% endblock %}

    {% block content %}
    <body>

    <!-- Overlay req -->
    <div id="reqoverlay" class="overlay">
      <div class="overlay-content">
        <div class="nerb">
          <!-- <a href="javascript:void(0)" class="closebtn" id="reqclosebtn" onclick="javascript:closereqNav()">&times;</a> -->
          <a href="javascript:void(0)" class="closebtn" id="reqclosebtn">&times;</a>
          <div class="container">
            <form id="contact" action="/" method="POST">
              <h3>Request help in your neighborhood</h3>
              <div class="form-field">{{ form.name.label }} {{ form.name(size=20) }}
                {% if form.name.errors %}
                  <ul class="errors">
                    {% for error in form.name.errors %}
                      <li>{{ error }}</li>
                    {% endfor %}
                  </ul>
                {% endif %}
              </div>
              <div onchange="this.value=addSpaces(this.value)" pattern="[0-9]{3} [0-9]{3} [0-9]{4}" class="form-field">{{ form.email.label }} {{ form.email }}
                {% if form.email.errors %}
                  <ul class="errors">
                    {% for error in form.email.errors %}
                      <li>{{ error }}</li>
                    {% endfor %}
                  </ul>
                {% endif %}
              </div>
              <div class="form-field">{{ form.body.label }} {{ form.body }}
                {% if form.body.errors %}
                  <ul class="errors">
                    {% for error in form.body.errors %}
                      <li>{{ error }}</li>
                    {% endfor %}
                  </ul>
                {% endif %}
              </div>
              {{ form.submit }}
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- Overlay del -->
    <div id="deloverlay" class="overlay">
      <div class="overlay-content">
        <div class="nerb">
          <!-- <a href="javascript:void(0)" class="closebtn" id="delclosebtn" onclick="javascript:closedelNav()">&times;</a> -->
          <a href="javascript:void(0)" class="closebtn" id="delclosebtn">&times;</a>
          <div class="container">
            <form id="contact" action="/" method="post">
              <h3>Deliver and help in your neighborhood</h3>
              <fieldset>
                <input placeholder="Your name" type="text" tabindex="1" required autofocus>
              </fieldset>
              <fieldset>
                <input onkeypress="return isNumberKey(event);this.value=addSpaces(this.value)" placeholder="Your Phone Number" type="tel" tabindex="2" required>
              </fieldset>
              <fieldset>
                <input placeholder="Your Address" type="text" tabindex="3" required>
              </fieldset>
              <fieldset>
                <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
              </fieldset>
            </form>
          </div>
        </div>
      </div>
    </div>


    <!-- Navbar -->
    <div class="w3-top">
      <div class="w3-bar w3-red w3-card w3-left-align w3-large">
        <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
        <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 1</a>
        <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 2</a>
        <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 3</a>
        <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 4</a>
      </div>

      <!-- Navbar on small screens -->
      <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
        <a href=# class="w3-bar-item w3-button w3-padding-large">Link 1</a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 3</a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 4</a>
      </div>
    </div>

    <!-- Header -->
    <header class="w3-container w3-red w3-center" style="padding:128px 16px">
      <h1 class="w3-margin w3-jumbo">stuff</h1>
      <p class="w3-xlarge">things</p>
      <!-- <button onclick="javascript:openreqNav()" id="reqopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Request Help</button> -->
      <!-- <button onclick="javascript:opendelNav()" id="delopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Give Help</button> -->
      <button id="reqopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Request Help</button>
      <button id="delopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Give Help</button>
    </header>

    <!-- First Grid -->
    <div class="w3-row-padding w3-padding-64 w3-container">
      <div class="w3-content">
        <div class="w3-twothird">
          <h1>etc</h1>
          <h5 class="w3-padding-32">etc</h5>

          <p class="w3-text-grey">etc</p>
        </div>

        <div class="w3-third w3-center">
          <i class="fa w3-padding-64 w3-text-red"></i>
        </div>
      </div>
    </div>
    {% endblock %}

    {% block javascript %}
    <script>
      // Used to toggle the menu on small screens when clicking on the menu button
      function myFunction() {
        var x = document.getElementById("navDemo");
        if (x.className.indexOf("w3-show") == -1) {
          x.className += " w3-show";
        } else {
          x.className = x.className.replace(" w3-show", "");
        }
      }

      console.log("qnwjfiengefvjnfji")

      document.getElementById("reqclosebtn").addEventListener("click", closereqNav, false);
      document.getElementById("delclosebtn").addEventListener("click", closedelNav, false);
      document.getElementById("reqopenbtn").addEventListener("click", openreqNav, false);
      document.getElementById("delopenbtn").addEventListener("click", opendelNav, false);


      function openreqNav() {
        document.getElementById("reqoverlay").style.height = "100%";
      }

      function opendelNav() {
        document.getElementById("deloverlay").style.height = "100%";
      }

      function closereqNav() {
        document.getElementById("reqoverlay").style.height = "0%";
      }

      function closedelNav() {
        document.getElementById("deloverlay").style.height = "0%";
      }

      function addSpaces(initial){
              initial = Number(initial)
              result = initial.toLocaleString()
              return result;
      }

      function isNumberKey(evt){
          var charCode = (evt.which) ? evt.which : evt.keyCode
          if (charCode > 31 && (charCode < 48 || charCode > 57))
              return false;
          return true;
      }
    </script>
    {% endblock %}

    </body>

    </html>

макет. html: 


    <!DOCTYPE html>

    <html lang="en">

      <head>
        <!-- {% include 'meta.html' %} -->
        {% block styles %}{% endblock %}
        <script src="https://kit.fontawesome.com/e3deaeba31.js" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,500" rel="stylesheet">
      </head>

      <body class="{{template}}">
        {% block content %}{% endblock %}
      </body>

    </html>

meta. html: 


    {% block meta %}
      <meta charset="utf-8" />
      <title>{{title}}</title>
      <meta name="HandheldFriendly" content="True" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
      <meta name="theme-color" content="#5eb9d7" />
      <link rel="shortcut icon" href="{{ url_for('static', filename='dist/img/favicon.png') }}" type="image/x-icon"/>
    {% endblock %}

Я буду публиковать любые другие запрошенные файлы. Я никогда раньше не работал с JS или с интерфейсом разработки.

1 Ответ

0 голосов
/ 20 марта 2020

Кажется, что вы расширяете layout.html, теперь, когда вы расширяете его, есть два блока: - 1) {% block styles %} 2) {% block content %}

Теперь в фактическом html, где вы расширили layout.html, вы используете оба этих тега и даже закрыли их, а затем начали новый тег {% block javascript %}, который не учитывается layout.html, поскольку вы закрыли теги, которые были объявлены в нем.

Попробуйте это: - layout.html

<!DOCTYPE html>

    <html lang="en">

      <head>
        <!-- {% include 'meta.html' %} -->
        {% block styles %}{% endblock %}
        <script src="https://kit.fontawesome.com/e3deaeba31.js" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,500" rel="stylesheet">
      </head>

      <body class="{{template}}">
       {% block javascript %}{% endblock javascript %}
        {% block content %}{% endblock content %} 

      </body>

    </html>

Htmlfile. html (в котором скрипт не запущен, над макетом. html) 

{% extends 'layout.html' %}

    {% block styles %}
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/request.css">
    {% endblock %}
{% block javascript %}
    <script>
      // Used to toggle the menu on small screens when clicking on the menu button
      function myFunction() {
        var x = document.getElementById("navDemo");
        if (x.className.indexOf("w3-show") == -1) {
          x.className += " w3-show";
        } else {
          x.className = x.className.replace(" w3-show", "");
        }
      }

      console.log("qnwjfiengefvjnfji")

      document.getElementById("reqclosebtn").addEventListener("click", closereqNav, false);
      document.getElementById("delclosebtn").addEventListener("click", closedelNav, false);
      document.getElementById("reqopenbtn").addEventListener("click", openreqNav, false);
      document.getElementById("delopenbtn").addEventListener("click", opendelNav, false);


      function openreqNav() {
        document.getElementById("reqoverlay").style.height = "100%";
      }

      function opendelNav() {
        document.getElementById("deloverlay").style.height = "100%";
      }

      function closereqNav() {
        document.getElementById("reqoverlay").style.height = "0%";
      }

      function closedelNav() {
        document.getElementById("deloverlay").style.height = "0%";
      }

      function addSpaces(initial){
              initial = Number(initial)
              result = initial.toLocaleString()
              return result;
      }

      function isNumberKey(evt){
          var charCode = (evt.which) ? evt.which : evt.keyCode
          if (charCode > 31 && (charCode < 48 || charCode > 57))
              return false;
          return true;
      }
    </script>
    {% endblock javascript %}


    {% block content %}


    <!-- Overlay req -->
    <div id="reqoverlay" class="overlay">
      <div class="overlay-content">
        <div class="nerb">
          <!-- <a href="javascript:void(0)" class="closebtn" id="reqclosebtn" onclick="javascript:closereqNav()">&times;</a> -->
          <a href="javascript:void(0)" class="closebtn" id="reqclosebtn">&times;</a>
          <div class="container">
            <form id="contact" action="/" method="POST">
              <h3>Request help in your neighborhood</h3>
              <div class="form-field">{{ form.name.label }} {{ form.name(size=20) }}
                {% if form.name.errors %}
                  <ul class="errors">
                    {% for error in form.name.errors %}
                      <li>{{ error }}</li>
                    {% endfor %}
                  </ul>
                {% endif %}
              </div>
              <div onchange="this.value=addSpaces(this.value)" pattern="[0-9]{3} [0-9]{3} [0-9]{4}" class="form-field">{{ form.email.label }} {{ form.email }}
                {% if form.email.errors %}
                  <ul class="errors">
                    {% for error in form.email.errors %}
                      <li>{{ error }}</li>
                    {% endfor %}
                  </ul>
                {% endif %}
              </div>
              <div class="form-field">{{ form.body.label }} {{ form.body }}
                {% if form.body.errors %}
                  <ul class="errors">
                    {% for error in form.body.errors %}
                      <li>{{ error }}</li>
                    {% endfor %}
                  </ul>
                {% endif %}
              </div>
              {{ form.submit }}
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- Overlay del -->
    <div id="deloverlay" class="overlay">
      <div class="overlay-content">
        <div class="nerb">
          <!-- <a href="javascript:void(0)" class="closebtn" id="delclosebtn" onclick="javascript:closedelNav()">&times;</a> -->
          <a href="javascript:void(0)" class="closebtn" id="delclosebtn">&times;</a>
          <div class="container">
            <form id="contact" action="/" method="post">
              <h3>Deliver and help in your neighborhood</h3>
              <fieldset>
                <input placeholder="Your name" type="text" tabindex="1" required autofocus>
              </fieldset>
              <fieldset>
                <input onkeypress="return isNumberKey(event);this.value=addSpaces(this.value)" placeholder="Your Phone Number" type="tel" tabindex="2" required>
              </fieldset>
              <fieldset>
                <input placeholder="Your Address" type="text" tabindex="3" required>
              </fieldset>
              <fieldset>
                <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
              </fieldset>
            </form>
          </div>
        </div>
      </div>
    </div>


    <!-- Navbar -->
    <div class="w3-top">
      <div class="w3-bar w3-red w3-card w3-left-align w3-large">
        <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
        <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 1</a>
        <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 2</a>
        <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 3</a>
        <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 4</a>
      </div>

      <!-- Navbar on small screens -->
      <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
        <a href=# class="w3-bar-item w3-button w3-padding-large">Link 1</a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 3</a>
        <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 4</a>
      </div>
    </div>

    <!-- Header -->
    <header class="w3-container w3-red w3-center" style="padding:128px 16px">
      <h1 class="w3-margin w3-jumbo">stuff</h1>
      <p class="w3-xlarge">things</p>
      <!-- <button onclick="javascript:openreqNav()" id="reqopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Request Help</button> -->
      <!-- <button onclick="javascript:opendelNav()" id="delopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Give Help</button> -->
      <button id="reqopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Request Help</button>
      <button id="delopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Give Help</button>
    </header>

    <!-- First Grid -->
    <div class="w3-row-padding w3-padding-64 w3-container">
      <div class="w3-content">
        <div class="w3-twothird">
          <h1>etc</h1>
          <h5 class="w3-padding-32">etc</h5>

          <p class="w3-text-grey">etc</p>
        </div>

        <div class="w3-third w3-center">
          <i class="fa w3-padding-64 w3-text-red"></i>
        </div>
      </div>
    </div>
    {% endblock content %}

, а также не ставьте body и html после расширения любого шаблона, как это уже упоминалось в расширенном шаблоне. Надеюсь, это работает !!

...