使用 JQuery 和 Flask 的动态下拉菜单不起作用
Posted
技术标签:
【中文标题】使用 JQuery 和 Flask 的动态下拉菜单不起作用【英文标题】:Dynamic drop down using JQuery and Flask not working 【发布时间】:2016-01-10 01:52:33 【问题描述】:您好,我正在使用 Flask 编写一个小应用程序。我必须根据数据库的输出更新下拉菜单。我无法动态添加选项。
Javascript 代码:
<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>
服务器代码:
@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)
我可以知道我哪里出错了吗?谢谢。
编辑:
我已经包含了 HTML 代码。
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>
【问题讨论】:
由于我们不太可能创建后端和前端来重新创建它 - 指示返回到您的控制台的内容或描述弹出的警报可能会有所帮助。 实际上问题是它没有显示任何错误。但是我的下拉菜单没有更新:( 如果您查看 javascript 调试器的网络选项卡,您是否看到在进行 ajax 调用时返回了预期的 JSON? 是的。我得到了准确的 JSON 输出。 console.log("...") 打印正确。我认为我的 HTML 代码有问题。 既然你提到了它,你的内部 ul 带有“collapse”类的标签没有列表项 - 所以那里有一个错误 【参考方案1】:您编写了一个 Javascript 函数但从未调用过它。您应该将代码放在某种 $document.ready() 中。
【讨论】:
【参考方案2】:这是一个更一般的答案。我在这里发布它是因为这个问题最相关并且很可能出现在搜索中。
在我的情况下,jQuery 显示为已加载但拒绝触发,因为(最终我意识到)我的 jQuery 位于一个脚本块中,该脚本块比 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>
一旦我改变了它们,它就完美地工作了。
<body>
<div>Stuff on page...</div>
<script src="https://jquery.example.com"></script>
% block scripts % % endblock %
</body>
有时解决方案非常简单,以至于没有人费心将其发布到任何地方,然后像我这样的人就会完全陷入困境。所以在这里,希望它可以节省其他人我失去的时间。
【讨论】:
以上是关于使用 JQuery 和 Flask 的动态下拉菜单不起作用的主要内容,如果未能解决你的问题,请参考以下文章