未捕获的类型错误：如何修复 jQuery 冲突？

Question

I am developing a web application with Python Flask.我正在使用 Python Flask 开发 Web 应用程序。 I need a jQuery script to make an autocomplete search field.我需要一个 jQuery 脚本来制作自动完成搜索字段。 I found this one:我找到了这个：

https://github.com/LukasSliacky/Flask-Autocomplete https://github.com/LukasSliacky/Flask-Autocomplete

It works perfectly fine.它工作得很好。

The problem is coming when I tri to integrate this feature in my existing template which include a lot of other CSS and JS scripts.当我尝试将此功能集成到包含许多其他 CSS 和 JS 脚本的现有模板中时，问题就来了。

Here is my file:这是我的文件：

<!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>

When I try it, it shows some error console:当我尝试时，它显示一些错误控制台：

So after searching for solution, I tried to remove some of these jquery files:因此，在搜索解决方案后，我尝试删除其中一些 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>

, but I still have the same issue. ，但我仍然有同样的问题。

Does anyone knows how to fix my particular case?有谁知道如何解决我的特殊情况？

Here is my Flask Python code:这是我的 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)

Answer 1

This loads jQuery (an ancient, unsupported version of jQuery with known security problems in it, but jQuery none the less):这将加载 jQuery（一个古老的、不受支持的 jQuery 版本，其中存在已知的安全问题，但 jQuery 仍然存在）：

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

This loads jQuery UI (also an out of date version), which adds the autocomplete plugin.这将加载 jQuery UI（也是一个过时的版本），它添加了autocomplete插件。

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

So that that point $('#city_autocomplete').autocomplete should be a function.所以那个点$('#city_autocomplete').autocomplete应该是一个函数。

You then load a bunch of other things and we only have the filenames to go on.然后你加载了一堆其他的东西，我们只有文件名可以继续。

You imply that everything above was added specifically for this task so since you have:您暗示上述所有内容都是专门为此任务添加的，因此您有：

 <script src="{{ url_for('static', filename='js/jquery.dataTables.js')}}"></script>

… we can assume that one of the two previous lines already loads jQuery. ...我们可以假设前两行之一已经加载了 jQuery。

 <script src="{{ url_for('static', filename='js/vendor.bundle.base.js')}}"></script>

… is the most likely candidate. ……是最有可能的候选人。

The new version of jQuery overwrites the one you added jQuery UI to so the autocomplete plugin goes away.新版本的 jQuery 会覆盖您添加 jQuery UI 的版本，因此autocomplete插件消失了。

Don't load jQuery twice.不要加载 jQuery 两次。

Load it once.加载一次。

Load it first.首先加载它。

Then add jQuery UI to it.然后向其中添加 jQuery UI。

未捕获的类型错误：如何修复 jQuery 冲突？

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-11-13 14:01:38

未捕获的类型错误：如何修复 jQuery 冲突？

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-11-13 14:01:38

解决方案1
2 已采纳 2020-11-13 14:01:38