title: Rendering (many) templates in Flask
body: <p>I would like to have a home page where I choose between option A and option B. When I click on one of the options, I would like to go to page1.html (option A) or to page2.html (option B).</p>
  
  <p>I have these files:</p>
  
  <pre><code>static/
    route.js
  templates/
    index.html
    page1.html
    page2.html
  web_server.py
  </code></pre>
  
  
  
  <pre><code>@app.route('/')
  def index():
      return render_template('index.html')
  
  @app.route('/opta')
  def optionA():
      return render_template('page1.html')
  
  @app.route('/optb')
  def optionB():
      return render_template('page2.html')
  </code></pre>
  
  <p><code>index.html</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;button id="optionA"&gt;Option A&lt;/button&gt;
      &lt;button id="optionB"&gt;Option B&lt;/button&gt;
      &lt;script src="{{url_for('static', filename='route.js')}}"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><code>route.js</code>:</p>
  
  <pre class="lang-javascript prettyprint-override"><code>$("#optionA").click(function(e) {
      $.ajax({
          type: "GET",
          url: "/opta",
          contentType: 'application/json;charset=UTF-8',
          success: function(result){
              console.log("Hooray");
              window.location.replace("{{ url_for('optA') }}"); // doesn\'t work
              var divA = $("#a"); divA.html(result); // (a is a div in page1.html) doesn\'t work too
          },
          error: function(textStatus, errorThrown) {
              console.log(errorThrown);
          }
      });
  });
  
  // same for option B
  </code></pre>