无法在 Laravel 中使用 Jquery UI
Posted
技术标签:
【中文标题】无法在 Laravel 中使用 Jquery UI【英文标题】：Can't use Jquery UI in Laravel 【发布时间】：2017-07-09 15:08:32 【问题描述】：我在 Laravel 中有全局 Jquery，但我也想包含 Jquery UI。
我有一个这样的刀片模板：
@section('scripts')
<script src="/assets/admin/js/sessions/myjavascript.js"></script>
@stop
content...
Myjavascript.js：
$( document ).ready(function()
if (jQuery.ui)
alert("loaded");
);
jQuery.ui 不存在。如何实现？
这里编辑是扩展刀片：
<!DOCTYPE html>
<html>
<head>
<title>Mysite</title>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
<script src="/assets/admin/js/core/pace.js"></script>
<link href="/assets/admin/css/styles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width,initial-scale=1">
@yield('styles')
</head>
<body id="app" class="layout-horizontal skin-default">
@include('admin.layouts.partials.notifs')
@include('admin.layouts.partials.header')
<div class="mobile-menu-overlay"></div>
@include('admin.layouts.partials.header-bottom')
@yield('content')
@include('admin.layouts.partials.footer')
@include('admin.layouts.partials.skintools')
<script src="/assets/admin/js/core/plugins.js"></script>
<script src="/assets/admin/js/demo/skintools.js"></script>
@yield('scripts')
</body>
</html>
【问题讨论】：
你能告诉我们你的刀片文件的其余部分吗？就像主模板中的所有内容一样，您正在使用的所有部分以及 laravel 的版本？ 你是否为 jquery.ui 添加了脚本 您的 JqueryUI 似乎没有正确包含 @DouwedeHaan 完成。 @RAUSHANKUMAR 不，我不知道该放在哪里。这就是问题所在。 【参考方案1】：你有一个全局的 jquery，这意味着你已经通过 npm 提取了它。 如果是这样，那么您可以通过 npm 拉 jquery-ui，如下所示
npm install jquery-ui
否则，您可以在页面中使用 cdn 链接 如下
在 HEAD 中包含 css
@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
@endsection
在刀片中
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/assets/admin/js/sessions/myjavascript.js"></script>
@stop
希望对你有帮助！
【讨论】：
答案随着您的问题更新而更新。 （更新刀片模板）【参考方案2】：首先确保正确加载 jquery.ui（一种方法是按照 Vaibhavraj Roham 的建议使用 cdn）。
然后，当您确保正确加载它时，请尝试以下操作：
我不确定您是如何设置视图的，但您可能也在另一个子视图中使用scripts 部分，并且它会覆盖这个部分。
尝试这样做（添加@parent）：
@section('scripts')
@parent
<script src="/assets/admin/js/sessions/myjavascript.js"></script>
@stop
【讨论】：
【参考方案3】：试试这个
@push('scripts')
<script src="/assets/admin/js/sessions/myjavascript.js"></script>
<script>
$( document ).ready(function()
if (jQuery.ui)
alert("loaded");
);
</script>
@endpush
【讨论】：
【参考方案4】：我需要 jquery-ui 的自动完成功能
-
运行
npm install jquery-ui --save-dev
在里面添加
你的应用位置/resources/assets/js/app.js：
import 'jquery-ui/themes/base/all.css';
import 'jquery-ui/ui/widgets/autocomplete.js';
这样你将在每个页面上都有 ui 插件
【讨论】：
以上是关于无法在 Laravel 中使用 Jquery UI的主要内容，如果未能解决你的问题，请参考以下文章
Laravel 5.5 中的 Datepicker 使用 Jquery-ui 或 Bootstrap
如何通过 npm jquery-ui-datepicker-with-i18n 导入 laravel？