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

Question

我有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';

Answer 1

看到这个链接： 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的脚本标签和样式表链接。

Answer 2

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

如果不是，请尝试将webpack.mix.js更改为此：

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

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

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

Answer 3

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

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

问题描述

3 个解决方案

解决方案1
2 2017-12-20 03:25:55

解决方案2
0 2017-06-25 14:41:15

解决方案3
0 2018-04-29 14:13:21

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

问题描述

3 个解决方案

解决方案1 2 2017-12-20 03:25:55

解决方案2 0 2017-06-25 14:41:15

解决方案3 0 2018-04-29 14:13:21

解决方案1
2 2017-12-20 03:25:55

解决方案2
0 2017-06-25 14:41:15

解决方案3
0 2018-04-29 14:13:21