Javascript 为什么jquery UI小部件没有'；在我的laravel应用程序中不工作？_Javascript_Php_Jquery_Laravel_Jquery Ui

Javascript 为什么jquery UI小部件没有'；在我的laravel应用程序中不工作？

javascript php jquery laravel jquery-ui

Javascript 为什么jquery UI小部件没有'；在我的laravel应用程序中不工作？,javascript,php,jquery,laravel,jquery-ui,Javascript,Php,Jquery,Laravel,Jquery Ui,我有一个laravel应用程序，并试图使用dialog小部件，但我在控制台中不断遇到此错误： TypeError:$（…）。对话框不是函数[了解更多信息] 我试着测试正常的jquery函数，它工作得很好，只是jquery UI <head>  <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ con

我有一个laravel应用程序，并试图使用dialog小部件，但我在控制台中不断遇到此错误：

TypeError:$（…）。对话框不是函数[了解更多信息]

我试着测试正常的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>

app.js

bootstrap.js

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

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

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

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

一般来说，Laravel和web开发都是新手；这对我很有用。

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

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

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

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

一般来说，Laravel和web开发都是新手；这对我很有用。

请查看以下链接：

注意：我对Laravel Mix（网页包）相当陌生，还在学习

在链接的示例中，hisresources/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';

编辑之后，为了运行混合任务，我在项目根目录下运行了以下命令：npm run dev

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

因为我使用的是Laravel Mix（webpack），所以我不需要包含特定于jquery的脚本标记和样式表链接。

请参阅此链接：