Блог

Главная - Вопросы по программированию - получение ошибки » Ошибка типа: $ (…).автозаполнение не является функцией» с использованием пользовательского интерфейса jQuery

получение ошибки » Ошибка типа: $ (…).автозаполнение не является функцией» с использованием пользовательского интерфейса jQuery

#javascript #jquery #jquery-ui #autocomplete #laravel-7

#javascript #jquery #jquery-ui #автозаполнение #laravel-7

Вопрос:

Я застрял в проблеме с пользовательским интерфейсом jQuery. Я создал форму, в которой мне нужно автозаполнить все поля на основе идентификатора клиента. Это похоже на то, что если я набираю идентификатор существующего клиента, все поля должны автоматически заполняться всеми значениями клиента из таблицы базы данных, такими как имя пользователя, фамилия, адрес, дата рождения, но для начала я просто пытаюсь проверить, работает ли пользовательский интерфейс jquery, и яполучил ошибку «$ (…).автозаполнение не является функцией» в консоли. Это не из Jquery, потому что я также создал систему уведомлений, и я отображаю все уведомления с помощью Jquery, и это работает, я думаю, что это из пользовательского интерфейса jQuery. Я перепробовал все возможные решения, которые я нашел, но безуспешно. Заранее спасибо! Всем доброго дня! 🙂

Это мои layouts.app

 <!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="userId" content="{{Auth::check() ? Auth::user()->id : '' }}">
    
    <!-- Scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="{{asset('jqueryui/jquery-ui.min.js')}}" type="text/javascript"></script>
    <script>
    
        window.Laravel = {!! json_encode([  
            'csrfToken' => csrf_token(),
        ]); !!}

        
    </script>

    <!-- Fonts -->
    {{-- <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> --}}

    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="{{asset('jqueryui/jquery-ui.min.css')}}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{asset('assets/images/favicon.png')}}">
    <title>S.C. Amanet Stefany IFN S.R.L.</title>
    <!-- Bootstrap Core CSS -->
    <link href="{{asset('assets/plugins/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
    <!-- morris CSS -->
    <link href="{{asset('assets/plugins/morrisjs/morris.css')}}" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="{{asset('css/style.css')}}" rel="stylesheet">
   
    <!-- You can change the theme colors from here -->
    <link href="{{asset('css/colors/blue.css')}}" id="theme" rel="stylesheet">
    {{-- <link href="{{ asset('css/app.css') }}" rel="stylesheet"> --}}
</head>
<body>
 .... this is my content ....


<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/app.js') }}"></script>

 {{-- <script src="{{asset('assets/plugins/jquery/jquery.min.js')}}"></script> --}}
 {{-- <script src="{{asset('js/jquery.js')}}"></script> --}}


<!-- Bootstrap tether Core JavaScript -->
<script src="{{asset('assets/plugins/bootstrap/js/popper.min.js')}}"></script>
<script src="{{asset('assets/plugins/bootstrap/js/bootstrap.min.js')}}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{{asset('js/jquery.slimscroll.js')}}"></script>
<!--Wave Effects -->
<script src="{{asset('js/waves.js')}}"></script>
<!--Menu sidebar -->
<script src="{{asset('js/sidebarmenu.js')}}"></script>
<!--stickey kit -->
<script src="{{asset('assets/plugins/sticky-kit-master/dist/sticky-kit.min.js')}}"></script>
<!--Custom JavaScript -->
{{-- <script src="{{asset('js/custom.js')}}"></script> --}}
<script src="{{asset('js/custom.min.js')}}"></script>
{{-- <script src="{{asset('js/jquery-ui.js')}}"></script> --}}


<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--sparkline JavaScript -->
<script src="{{asset('assets/plugins/sparkline/jquery.sparkline.min.js')}}"></script>
<!--morris JavaScript -->
<script src="{{asset('assets/plugins/raphael/raphael-min.js')}}"></script>
<script src="{{asset('assets/plugins/morrisjs/morris.min.js')}}"></script>
<!-- Chart JS -->
<script src="{{asset('js/dashboard1.js')}}"></script>
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="{{asset('assets/plugins/styleswitcher/jQuery.style.switcher.js')}}"></script>


</body>
</html>

Это мой взгляд на эту форму

                                      <div class="form-group row ml-1 mb-1">
                                        <label for="example-text-input" class="col-3 col-form-label pt-0" style="min-width: 80px;">Serie B.I./C.I.:</label>
                                        <div class="col-3 pl-0">
                                            <input class="form-control input-height pl-1 pr-1" name="serie" type="text" value="" id="">
                                        </div>
                                        <div class="col-4 pl-0">
                                            <input class="form-control input-height pl-1 pr-1"  name="nr_id" type="text" value="" id="cltId" > //this #cltId ----------
                                        </div>
                                    </div>

И это мой resource/js/app.js с помощью кода jQuery, который мне нужен

 $(document).ready(function(){
    $("#cltId").autocomplete({
        source: [
            'Apple',
            'Banana',
            'Orange',
        ]
    });
});

Есть предложения? Я добавил что-то, чего не должен? Я неправильно написал код? Я не могу найти ошибку, любой ответ мне очень поможет.

Комментарии:

1. У вас есть 2x <script src=jquery — второй перезапишет любые плагины из первого (jquery-ui) — сказав это, у вас также есть jquery-ui дважды…

2. Я прокомментировал другие строки, и это все еще не работает

3. Я бы рассмотрел исходный код HTML и консоль. Убедитесь, что все библиотеки загружаются правильно и что ни одна из них не мешает другим. Ошибка означает, что пользовательский интерфейс jQuery не загружается.

4. Да, я использовал еще несколько плагинов из Jquery, и это был результат, когда я попытался использовать полную версию jQuery и jQuery UI. Был ли конфликт

Ответ №1:

Наконец-то решено, я переместил весь код jQuery в app.js , Я выполнил команду

 npm install jquery-ui --save-dev

и я импортировал его в app.js как :

 import $ from 'jquery';
window.$ = window.jQuery = $;
import 'jquery-ui/ui/widgets/autocomplete.js';

ВАЖНО ! обратите внимание, что autocomplete.js с конца — это работа для меня, потому что это виджет, который я хочу использовать, узнайте, какой виджет вы хотите, и импортируйте его туда после импорта jquery :

 Import 'jquery-ui/widgets/here is the widget that you want .js'

Но прежде чем смотреть, чтобы не импортировать jquery где-либо еще, например, макеты или любые другие файлы js, такие как bootstrap.js например.