我想在laravel 7应用程序中向表单中添加一个jQuery UI datepicker字段,但我总是收到以下错误消息:
Uncaught:$(.).datepicker不是函数。
我尝试使用来自这里的源代码示例。
我读过至少十几篇关于如何解决这个问题的不同文章,在我的案例中,我尝试了所有这些都没有结果。
我的感觉是我的laravel应用程序(也许在app.js?)已经加载了相同脚本的一个脚本或不同版本的脚本(可能是jQuery?)数据报警器也会使用,这会导致问题。不幸的是,我对Laravel并不熟悉,我不知道如何解决这个问题。请参阅下面的一些代码示例,如果您有任何建议,请告诉我。非常感谢!
应用程序布局文件头:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>查看文件:
@extends('layouts.app')
@section('content')
<form action="" method="post" action="/tour/{id}">
<!-- CROSS Site Request Forgery Protection -->
@csrf
<div class="form-group">
<label>Date</label><br>
<input id="datepicker" type="text" />
</div>
</form>
<script>
$( function() {
$( "#datepicker" ).datepicker();
});
</script>
@endsection发布于 2020-08-30 17:14:03
实际上,这里您要调用jquery两次。其中一个在应用程序js文件中,另一个来自cdn。你不需要打电话给cdn。当您在app和jquery的另一个版本中使用defer属性时,两者都是相互冲突的,因此datepicker不是一个函数。您可以简单地删除defer属性和额外的cdn调用。
<script src="{{ asset('js/app.js') }}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
});
</script>发布于 2020-08-30 16:52:34
您的代码在我的本地安装中非常有效。
<script src="{{ asset('js/app.js') }}" defer></script>尝试删除app.js并检查您的库是否存在冲突。
如果没有,请打开insepect元素,并检查是否有活动的internet连接和加载了jquery (参见图2)。


https://stackoverflow.com/questions/63659620
复制相似问题