Uncaught type error :How to fix jQuery conflict?
Uncaught type error :How to fix jQuery conflict?
我正在使用 Python Flask 开发 Web 应用程序。我需要一个 jQuery 脚本来制作自动完成搜索字段。我找到了这个：
https://github.com/LukasSliacky/Flask-Autocomplete
它工作得很好。
当我尝试将此功能集成到我现有的模板中时，问题来了，其中包括许多其他 CSS 和 JS 脚本。
这是我的文件：
<!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 个文件：
<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>
，但我仍然遇到同样的问题。
有谁知道如何解决我的特殊情况？
这是我的 Flask Python 代码：
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)
这会加载 jQuery（jQuery 的不受支持的古老版本，其中存在已知的安全问题，但 jQuery none 更少）：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
这会加载 jQuery UI（也是一个过时的版本），它添加了 autocomplete 插件。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
所以那个点 $('#city_autocomplete').autocomplete 应该是一个函数。
然后你加载一堆其他的东西，我们只有文件名可以继续。
你暗示上面的所有内容都是专门为此任务添加的，因为你有：
<script src="{{ url_for('static', filename='js/jquery.dataTables.js')}}"></script>
…我们可以假设前两行之一已经加载 jQuery.
<script src="{{ url_for('static', filename='js/vendor.bundle.base.js')}}"></script>
…是最有可能的候选人。
jQuery 的 new 版本覆盖了您添加 jQuery UI 的版本，因此 autocomplete 插件消失了.
不要加载 jQuery 两次。
加载一次。
先加载它。
然后加上jQueryUI。
我正在使用 Python Flask 开发 Web 应用程序。我需要一个 jQuery 脚本来制作自动完成搜索字段。我找到了这个：
https://github.com/LukasSliacky/Flask-Autocomplete
它工作得很好。
当我尝试将此功能集成到我现有的模板中时，问题来了，其中包括许多其他 CSS 和 JS 脚本。
这是我的文件：
<!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 个文件：
<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>
，但我仍然遇到同样的问题。
有谁知道如何解决我的特殊情况？
这是我的 Flask Python 代码：
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)
这会加载 jQuery（jQuery 的不受支持的古老版本，其中存在已知的安全问题，但 jQuery none 更少）：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
这会加载 jQuery UI（也是一个过时的版本），它添加了 autocomplete 插件。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
所以那个点 $('#city_autocomplete').autocomplete 应该是一个函数。
然后你加载一堆其他的东西，我们只有文件名可以继续。
你暗示上面的所有内容都是专门为此任务添加的，因为你有：
<script src="{{ url_for('static', filename='js/jquery.dataTables.js')}}"></script>
…我们可以假设前两行之一已经加载 jQuery.
<script src="{{ url_for('static', filename='js/vendor.bundle.base.js')}}"></script>
…是最有可能的候选人。
jQuery 的 new 版本覆盖了您添加 jQuery UI 的版本，因此 autocomplete 插件消失了.
不要加载 jQuery 两次。
加载一次。
先加载它。
然后加上jQueryUI。