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

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

类型错误： $(...(。对话框不是函数[了解更多]

我尝试测试正常的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');

应用.js

require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
    el: '#app'
});

引导程序.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';

请参阅此链接：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 = $;

但就我而言，我正在编辑资源/资产/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特定的脚本标签和样式表链接。

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

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

const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js');

Laravel和一般的Web开发新手;这对我有用。

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

相关内容

最新更新

热门标签：