无法在 Laravel 中使用 Jquery UI答案

【问题标题】：Can't use Jquery UI in Laravel无法在 Laravel 中使用 Jquery UI
【发布时间】：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 不，我不知道该放在哪里。这就是问题所在。

标签： jquery laravel

【解决方案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 插件

【讨论】：