使用 JQuery 和 Flask 的动态下拉不起作用

Question

Hi I am writing a small app using Flask. I have to update drop down menu based on output from database. I am not able to add options dynamically.

Javascript code:

<script type="text/javascript">
   function filldata(){
      var sample = document.getElementById("filter-select").value;
      jQuery.support.cors = true;
      $.post("/test",{"filter_type":sample},function(data,status){
          var tmp = data.output;
          alert(tmp.length);
          var sel = document.getElementById('further-select');
          for(var i =0;i<tmp.length;i++){
             console.log(tmp[i]);
             alert("<option>"+tmp[i]+"</option>");
             var opt = document.createElement('option');
             opt.innerHTML = tmp[i];
             opt.value = tmp[i];
             sel.appendChild(opt);
           }
      });
   }
</script>

Server Code:

@app.route('/test',methods=['POST'])
def test():
    tmp = request.form.get('filter_type')
    con = mdb.connect('localhost', 'root', 'root', 'sample')
    cur = con.cursor()
    cur.execute("SELECT DISTINCT "+tmp+" FROM logdata")
    res = cur.fetchall()
    con.close()
    return jsonify(output=res)

May I know where I am going wrong? Thank you.

Edit:

I have included HTML code.

HTML:

<div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav side-nav">
                    <li>
                        <a href="javascript:;" data-toggle="collapse" data-target="#ts"><i class="fa fa-fw fa-dashboard"></i> Time Period <i class="fa fa-fw fa-caret-down"></i></a>
                        <ul id="ts" class="collapse">
                            <select id="time-stamp">
                                <option value="Till now">Till Now</option>
                                <option value="Yesterday">Yesterday</option>
                                <option value="Last Week">Last Week</option>
                                <option value="Last Month">Last Month</option>
                                <option value="Last 6 months">Last 6 months</option>
                                <option value="Customize">Customize</option>
                            </select>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:;" data-toggle="collapse" data-target="#ns"><i class="fa fa-fw fa-arrows-v"></i> Select Nodes <i class="fa fa-fw fa-caret-down"></i></a>
                        <ul id="ns" class="collapse">
                            <select id="nodes-select" multiple="multiple">
                                <option value="Till now">Till Now</option>
                                <option value="Yesterday">Yesterday</option>
                                <option value="Last Week">Last Week</option>
                                <option value="Last Month">Last Month</option>
                                <option value="Last 6 months">Last 6 months</option>
                                <option value="Customize">Customize</option>
                            </select>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:;" data-toggle="collapse" data-target="#fs"><i class="fa fa-fw fa-arrows-v"></i> Select Filter <i class="fa fa-fw fa-caret-down"></i></a>
                        <ul id="fs" class="collapse">
                            <select id="filter-select" onchange="filldata()">
                                <option value="mac">MAC</option>
                                <option value="sublbl">SUBLBL</option>
                                <option value="vrf">VRF</option>
                                <option value="ifhndl">IFHNDL</option>
                                <option value="compid">COMP_ID</option>
                                <option value="v4addr">V4_ADDR</option>
                                <option value="v6addr">V6_ADDR</option>
                            </select>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:;" data-toggle="collapse" data-target="#ff"><i class="fa fa-fw fa-arrows-v"></i> Select items <i class="fa fa-fw fa-caret-down"></i></a>
                        <ul id="ff" class="collapse">
                            <select id="further-select" multiple="multiple" >

                            </select>

                        </ul>
                    </li>
                    <li>
                        <a href="javascript:;" data-toggle="collapse" data-target="#cs"><i class="fa fa-fw fa-bar-chart-o"></i> Charts <i class="fa fa-fw fa-caret-down"></i></a>
                        <ul id="cs" class="collapse">
                            <select id="chart-select">
                                <option value="error_info">Error Info</option>
                                <option value="session_history">Session History</option>

                            </select>
                        </ul>
                    </li>

                </ul>
            </div>

Answer 1

You wrote a Javascript function and never called it. You should place the code inside a $document.ready() of some sort.

Answer 2

Here's a more general answer. I'm posting it here because this question is most closely related and likely to come up in searches.

In my case jQuery showed as loaded but refused to fire because (ultimately I realised that) I had my jQuery inside a script block that was being imported earlier than the jQuery cdn:

base.html

<body>
    <div>Stuff on page...</div>

    {% block scripts %} {% endblock %} <!-- pulling scripts in from a child template -->
    <script src="https://jquery.example.com"></script>

</body>

and once I changed them round it worked perfectly.

<body>
    <div>Stuff on page...</div>

    <script src="https://jquery.example.com"></script>
    {% block scripts %} {% endblock %}

</body>

Sometimes the solution is so simple that nobody bothers to post it anywhere, and then people like me get utterly stuck. So here it is, in the hope that it saves someone else the hours I lost.