Flask: Render Template and Populate HTML Table
<p>Let me explain my end goal and then maybe that will paint a picture of what I'm trying to do.  Here is what my application needs to do:</p>

<ol>
<li>End user goes to <a href="http://www.example.com/ms_bulletins" rel="nofollow noreferrer">http://www.example.com/ms_bulletins</a> and they see a drop down menu with selectable dates.</li>
<li>Once they select a date, the date is sent to my flask backend and the date is used to query the database for bulletins from that date.</li>
<li>The bulletins should then return to <a href="http://www.example.com/ms_bulletins" rel="nofollow noreferrer">http://www.example.com/ms_bulletins</a> and the table should populate.</li>
</ol>

<p>I actually have this working almost completely, except for the page does not load to show me the data.  Here is some snippets of code:</p>

<p><strong>JavaScript</strong></p>

<pre><code>function dateClick(date){
  var dropdown = document.getElementById("date");
  var date = dropdown.options[dropdown.selectedIndex].value;
  console.log( "Date: " + date );
  $.getJSON($SCRIPT_ROOT + '/ms_bulletins', {
            date: date,
  });
}
</code></pre>

<p><strong>Flask</strong></p>

<pre><code>@application.route("/ms_bulletins")
def ms_bulletins():
    date = request.args.get('date', None, type=str)
    session = Session()
    data = session.query(MsBulletins).filter(MsBulletins.date==date)
    bulletins = data.all()
    return render_template("ms_bulletins.html", bulletins=bulletins)
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;script&gt;
$(document).ready( function () {
   $('#bulletin_table').DataTable();
} );
&lt;/script&gt;

&lt;div id="select_bulletin_date" onchange="dateClick(this)"&gt;
&lt;form&gt;
  &lt;fieldset&gt;
  &lt;legend class="header"&gt;MS Bulletin Summary:&lt;/legend&gt;
  &lt;select id="date"&gt;
    &lt;option name="date" value="11/8/2016"&gt;November 2016&lt;/option&gt;
    &lt;option name="date" value="10/11/2016"&gt;October 2016&lt;/option&gt;
  &lt;/select&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;hr&gt;
&lt;div id="ms_bulletins"&gt;
&lt;table id="bulletin_table" class="display"&gt;
&lt;thead&gt;
    &lt;tr&gt;
        &lt;th&gt;Bulletin ID&lt;/th&gt;
        &lt;th&gt;Bulletin KB&lt;/th&gt;
        &lt;th&gt;Bulletin Name&lt;/th&gt;
        &lt;th&gt;Bulletin Date&lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
  {% for bulletin in bulletins %}
    &lt;tr&gt;
        &lt;td&gt;&lt;a href="https://technet.microsoft.com/en-us/library/security/{{ bulletin.bulletin_id }}" target="_blank"&gt;{{ bulletin.bulletin_id }}&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="https://support.microsoft.com/en-us/kb/{{ bulletin.kb }}" target="_blank"&gt;{{ bulletin.kb }}&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;{{ bulletin.title }}&lt;/td&gt;
        &lt;td&gt;{{ bulletin.date }}&lt;/td&gt;
    &lt;/tr&gt;
  {% endfor %}
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>Currently when the user goes to <a href="http://www.example.com/ms_bulletins" rel="nofollow noreferrer">http://www.example.com/ms_bulletins</a>, the table is blank, then the user selects a date, I can see the date being passed in the console, and then nothing happens.  </p>

<p>If I view the source after the "render template" should have taken place, I can see in the source code that it actually worked:</p>

<p><strong>Source Code</strong></p>

<pre><code>&lt;table id="bulletin_table" class="display"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Bulletin ID&lt;/th&gt;
      &lt;th&gt;Bulletin KB&lt;/th&gt;
      &lt;th&gt;Bulletin Name&lt;/th&gt;
      &lt;th&gt;Bulletin Date&lt;/th&gt;
   &lt;/tr&gt;
  &lt;/thead&gt;
&lt;tbody&gt;
   &lt;tr&gt;
    &lt;td&gt;&lt;a href="https://technet.microsoft.com/en-us/library/security/MS16-142" target="_blank"&gt;MS16-142&lt;/a&gt;&lt;/td&gt;
    &lt;td&gt;&lt;a href="https://support.microsoft.com/en-us/kb/3198467" target="_blank"&gt;3198467&lt;/a&gt;&lt;/td&gt;
    &lt;td&gt;Cumulative Security Update for Internet Explorer&lt;/td&gt;
    &lt;td&gt;11/8/2016&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;a href="https://technet.microsoft.com/en-us/library/security/MS16-141" target="_blank"&gt;MS16-141&lt;/a&gt;&lt;/td&gt;
    &lt;td&gt;&lt;a href="https://support.microsoft.com/en-us/kb/3202790" target="_blank"&gt;3202790&lt;/a&gt;&lt;/td&gt;
    &lt;td&gt;Security Update for Adobe Flash Player&lt;/td&gt;
    &lt;td&gt;11/8/2016&lt;/td&gt;
 &lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>However, the page itself never loads this data in.</p>

<p>Is what I'm even doing possible?  And if so, what is the step I'm missing here?</p>