Javascript 未捕获类型错误:如何修复jQuery冲突?
我正在用Python Flask开发一个web应用程序。我需要一个jQuery脚本来创建一个自动完成的搜索字段。我发现了这个: 它工作得非常好 当我尝试将此功能集成到我现有的模板中时,问题就来了,该模板包含许多其他CSS和JS脚本 这是我的档案:Javascript 未捕获类型错误:如何修复jQuery冲突?,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我正在用Python Flask开发一个web应用程序。我需要一个jQuery脚本来创建一个自动完成的搜索字段。我发现了这个: 它工作得非常好 当我尝试将此功能集成到我现有的模板中时,问题就来了,该模板包含许多其他CSS和JS脚本 这是我的档案: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{{ url_for('static', filename='css/materialdesignicons.min.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/vendor.bundle.base.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/dataTables.bootstrap4.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css')}}">
<link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
</head>
<body>
<div class="container-scroller">
{{ form.autocomp.label }}: {{ form.autocomp }}
</div>
<script src="{{ url_for('static', filename='js/vendor.bundle.base.js')}}"></script>
<script src="{{ url_for('static', filename='chart.js/Chart.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/jquery.dataTables.js')}}"></script>
<script src="{{ url_for('static', filename='js/dataTables.bootstrap4.js')}}"></script>
<script src="{{ url_for('static', filename='js/off-canvas.js')}}"></script>
<script src="{{ url_for('static', filename='js/hoverable-collapse.js')}}"></script>
<script src="{{ url_for('static', filename='js/template.js')}}"></script>
<script src="{{ url_for('static', filename='js/dashboard.js')}}"></script>
<script src="{{ url_for('static', filename='js/data-table.js')}}"></script>
<script src="{{ url_for('static', filename='js/jquery.dataTables.js')}}"></script>
<script src="{{ url_for('static', filename='js/dataTables.bootstrap4.js')}}"></script>
<script src="{{ url_for('static', filename='js/jquery.cookie.js')}}" type="text/javascript"></script>
<script>
$(function() {
$.ajax({
url: '{{ url_for("autocomplete") }}'
}).done(function (data){
$('#city_autocomplete').autocomplete({
source: data,
minLength: 2
});
});
});
</script>
</body>
</html>
这将加载jQuery(一个古老的、不受支持的jQuery版本,其中存在已知的安全问题,但jQuery仍然存在):
因此,点$(“#city_autocomplete”)。autocomplete
应该是一个函数
然后加载一堆其他东西,我们只有文件名
您的意思是,上述所有内容都是专门为此任务添加的,因此,由于您:
…我们可以假设前面两行中的一行已经加载了jQuery
…是最有可能的候选人
新版本的jQuery覆盖了您添加的jqueryui,因此
自动完成
插件消失了
不要加载jQuery两次
加载一次
先装
然后将jQuery UI添加到它。错误消息说,
autocomplete
不是一个函数,不是说,$
没有定义。我看到了错误消息,因为我是在这里发布它的人。你的评论毫无帮助。我知道存在冲突,但当我尝试删除某些jquery时,仍然存在问题。问题标题($
)中的问题与中的问题不同。你会发现,当你的要求清晰准确时,你会更容易得到帮助。对此,我深表歉意。我编辑了它。
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
from flask import Flask, Response, render_template, request
import json
from wtforms import TextField, Form
class SearchForm(Form):
autocomp = TextField('Insert City', id='city_autocomplete')
@app.route('/_autocomplete', methods=['GET'])
def autocomplete():
return Response(json.dumps(list_result), mimetype='application/json')
@app.route('/testsearch', methods=['GET', 'POST'])
def index():
form = SearchForm(request.form)
return render_template("search.html", form=form)
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="{{ url_for('static', filename='js/jquery.dataTables.js')}}"></script>
<script src="{{ url_for('static', filename='js/vendor.bundle.base.js')}}"></script>