why jquery UI Widgets doesn't work in my laravel application?

Question

I have laravel application and trying to use dialog widget, but I keep getting this error in the console:

TypeError: $(...).dialog is not a function[Learn More]

I tried to test normal jquery functions and it works fine, it is just 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>

Update:

there is a conflict between these lines:

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

but still can't remove any of them.

Update 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';

I am unable to reproduce the problem with your current supplied code — milo526
– milo526, Commented May 14, 2017 at 20:20
let me ask you something, does app.js application loads a copy of the jquery ui or something, maybe it is a conflict between two copies — medo ampir
– medo ampir, Commented May 14, 2017 at 20:22
You you tried looking at the full page output? Use your browsers inspect function to see all loaded js files — milo526
– milo526, Commented May 14, 2017 at 20:23

Tim · Accepted Answer · 2017-12-20 03:41:23Z

2

See this link: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/jquery-ui.md

NOTE: I am fairly new to Laravel Mix (webpack) and still learning.

In the linked example his resources/assets/js/app.js contains the lines:

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

but in my case I'm editing resources/assets/js/bootstrap.js, which contains the line:

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

so I added the widget import line:

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

After the edits, to run the Mix tasks, I ran this command at my project root: npm run dev

And in my Chrome browser, on the page calling $(...).dialog(), I opened the devtools console and then right clicked on the browser page reload icon and clicked Empty cache and hard reload

Since I am using Laravel Mix (webpack) I do not need to include the jquery specific script tags and stylesheet links.

edited Dec 20, 2017 at 3:41

answered Dec 20, 2017 at 3:25

Tim

1,2291 gold badge8 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Clover · Accepted Answer · 2017-06-25 14:41:15Z

0

Are you using the .sass file that you're mixing in your webpack.mix.js file?

If not, try changing your webpack.mix.js to this:

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

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

New to Laravel and web development in general; that worked for me.

answered Jun 25, 2017 at 14:41

Michael Clover

133 bronze badges

Comments

qSort · Accepted Answer · 2018-04-29 14:13:21Z

0

Try inserting app.js before jquery-ui.js. This makes jquery-ui.js overwrite any common code. I found it does not cause significant side-effects. Some items like tooltips will look different, but you can just modify the linked js files to handle that if necessary.

answered Apr 29, 2018 at 14:13

qSort

215 bronze badges

Collectives™ on Stack Overflow

why jquery UI Widgets doesn't work in my laravel application?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related