title: Flask jinja2 update div content without refresh page
body: <p>Need achieve some features like [<a href="http://webonise.co.uk/][1]" rel="noreferrer">http://webonise.co.uk/][1]</a> when click on  contact,resume,resources link will update (location URL&amp;div content) but  without refresh the page.
  <br>
  <br></p>
  
  <h2>Flask view function</h2>
  
  <pre><code>@app.route('/')
  def index():
      flash('Welcome')
      return render_template('index.html')
  </code></pre>
  
  <hr>
  
  <p>Under <strong>index.html</strong> is extends <strong>base.html</strong></p>
  
  <pre><code>{% block content %}
      {{super()}}
      &lt;section class="content"&gt;
          &lt;a href="#"&gt;&lt;i class="mdi-event"&gt;&lt;/i&gt;Event&lt;/a&gt;
          &lt;a href="#"&gt;&lt;i class="mdi-contact"&gt;&lt;/i&gt;Contact&lt;/a&gt;
          &lt;div class="board"&gt;
              {# dynamic template #}
              {# without using {{% include 'event.html' %}} #}
          &lt;/div&gt;
      &lt;/section&gt;
  {%- endblock %}
  </code></pre>
  
  <hr>
  
  <p>How can i dynamic rendar <strong>event.html</strong> / <strong>contact.html</strong> content when different link is click and rendar under <strong>{# dynamic template #}</strong> without refresh the page ?</p>
  
  <pre><code>&lt;!--event.html--&gt;
  &lt;ul class="list"&gt;
      &lt;li&gt;
          &lt;h3&gt;123&lt;/h3&gt;
          &lt;p&gt;abc&lt;/p&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><br></p>
  
  <h2>What I try</h2>
  
  <p>import jinja2 Environment but still no idea how to achieve this</p>
  
  <pre><code>env = Environment(autoescape=True,
  loader=FileSystemLoader(os.path.join(os.path.dirname(__file__), 'templates')))
  @app.route('/')
  def index():
      board = env.get_template('event.html')
      flash('Welcome Home Tyler')
      return render_template('index.html', board=board)
  </code></pre>
  
  <p>Is there really need ajax technique get/post method to achieve all this?</p>