为什么 jquery UI Widgets 在我的 laravel 应用程序中不起作用？答案

【问题标题】：why jquery UI Widgets doesn't work in my laravel application?为什么 jquery UI Widgets 在我的 laravel 应用程序中不起作用？
【发布时间】：2017-10-13 13:43:38
【问题描述】：

我有 laravel 应用程序并尝试使用对话框小部件，但我在控制台中不断收到此错误：

TypeError: $(...).dialog 不是函数[了解更多]

我尝试测试正常的 jquery 功能，它工作正常，它只是 jquery UI。

    <head>

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    <!-- Scripts -->
    <script>
        window.Laravel = {!! json_encode([
            'csrfToken' => csrf_token(),
        ]) !!};
    </script>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.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>

    <script type="text/javascript">
    $( function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( ".opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
    } );
   </script>
     </head>


    <body>
     <div id="dialog" title="Basic dialog">
    <p>This is an animated dialog which is useful for displaying information.   The dialog window can be moved, resized and closed with the 'x' icon.</p>
     </div>

更新：

这些行之间存在冲突：

  <script src="{{ asset('js/app.js') }}"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

但仍然无法删除其中任何一个。

更新 2

webpack.mix.js

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

bootstrap.js

window._ = require('lodash');

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

【问题讨论】：

你在哪一行得到这个错误？
$( "#dialog" ).dialog({
我无法用您当前提供的代码重现问题
我问你一个问题，app.js 应用程序是否加载了 jquery ui 的副本或其他东西，可能是两个副本之间的冲突
你试过查看整页输出吗？使用浏览器检查功能查看所有加载的 js 文件

标签： javascript php jquery laravel jquery-ui

【解决方案1】：

您是否正在使用您在 webpack.mix.js 文件中混合的 .sass 文件？

如果没有，请尝试将您的 webpack.mix.js 更改为：

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js');

Laravel 和 Web 开发的新手；这对我有用。

【讨论】：

【解决方案2】：

查看此链接：https://github.com/JeffreyWay/laravel-mix/blob/master/docs/jquery-ui.md

注意：我对 Laravel Mix (webpack) 还很陌生，还在学习。

在链接示例中，他的 resources/assets/js/app.js 包含以下行：

import $ from 'jquery';
window.$ = window.jQuery = $;

但在我的情况下，我正在编辑 resources/assets/js/bootstrap.js，其中包含以下行：

window.$ = window.jQuery = require('jquery');

所以我添加了小部件导入行：

import 'jquery-ui/ui/widgets/dialog.js';

编辑完成后，为了运行 Mix 任务，我在我的项目根目录中运行了这个命令：npm run dev

在我的 Chrome 浏览器中，在调用 $(...).dialog() 的页面上，我打开了 devtools 控制台，然后右键单击浏览器页面重新加载图标并单击 清空缓存和硬重新加载

由于我使用的是 Laravel Mix (webpack)，我不需要包含 jquery 特定的脚本标签和样式表链接。

【讨论】：

【解决方案3】：

尝试在 jquery-ui.js 之前插入 app.js。这使得 jquery-ui.js 覆盖任何通用代码。我发现它不会引起明显的副作用。工具提示等某些项目看起来会有所不同，但您可以根据需要修改链接的 js 文件以进行处理。

【讨论】：