Can't use Jquery UI in Laravel

Question

I have Jquery globally in Laravel, however I would like to include Jquery UI too.

I have a blade template like this:

@section('scripts')
<script src="/assets/admin/js/sessions/myjavascript.js"></script>
@stop

content...

Myjavascript.js:

$( document ).ready(function() {
    if (jQuery.ui) {
        alert("loaded");
    }
});

jQuery.ui isn't there. How do I implement it?

EDIT here is the extended blade:

<!DOCTYPE html>
<html>
<head>
    <title>Mysite</title>
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
    <script src="/assets/admin/js/core/pace.js"></script>
    <link href="/assets/admin/css/styles.css" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    @yield('styles')
</head>
<body id="app" class="layout-horizontal skin-default">
    @include('admin.layouts.partials.notifs')
    @include('admin.layouts.partials.header')
    <div class="mobile-menu-overlay"></div>
    @include('admin.layouts.partials.header-bottom')
    @yield('content')
    @include('admin.layouts.partials.footer')
    @include('admin.layouts.partials.skintools')
    <script src="/assets/admin/js/core/plugins.js"></script>
    <script src="/assets/admin/js/demo/skintools.js"></script>
    @yield('scripts')
</body>
</html>

Can you show us the rest of your blade files? Like the master template everything gets included in, all the sections you are using and the version of laravel? — Douwe de Haan
– Douwe de Haan, Commented Feb 20, 2017 at 11:05
@RAUSHANKUMAR No and I am not sure where to put it. That is the question. — prgrm
– prgrm, Commented Feb 20, 2017 at 11:12

despotbg · Accepted Answer · 2021-04-29 18:59:44Z

6

I was need autocomplete from jquery-ui

Run npm install jquery-ui --save-dev
Add inside

your-app-location/resources/assets/js/app.js:

import 'jquery-ui/themes/base/all.css';
import 'jquery-ui/ui/widgets/autocomplete.js';

This way you will have ui plugin on every page

edited Apr 29, 2021 at 18:59

answered Feb 19, 2018 at 15:36

despotbg

7786 silver badges13 bronze badges

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

Comments

Vaibhavraj Roham · Accepted Answer · 2017-02-20 11:16:29Z

4

You have a jquery globally that means you have pulled it via npm. If so then you can pull jquery-ui via npm as below

npm install jquery-ui

Else you can use cdn links in your page as below

In HEAD include css

@section('styles')
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
@endsection

in blade

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="/assets/admin/js/sessions/myjavascript.js"></script>
@stop

Hope it helps you!

edited Feb 20, 2017 at 11:16

answered Feb 20, 2017 at 11:10

Vaibhavraj Roham

1,16312 silver badges26 bronze badges

1 Comment

Vaibhavraj Roham Over a year ago

Answer updated as your question was updated. (Updated blade template)

DevK · Accepted Answer · 2017-02-20 11:17:22Z

2

First make sure you load your jquery.ui properly (1 way would be to use cdn as Vaibhavraj Roham suggested).

Then when you make sure you're loading it properly try this:

I'm not sure how you've got your views set up, but chances are you are using section scripts in another subview as well and it overrides this one.

Try doing this (adding @parent):

@section('scripts')
@parent
<script src="/assets/admin/js/sessions/myjavascript.js"></script>
@stop

answered Feb 20, 2017 at 11:17

DevK

10k2 gold badges33 silver badges51 bronze badges

Comments

Ronak Dattani · Accepted Answer · 2017-02-20 11:29:41Z

0

Try this

@push('scripts')
<script src="/assets/admin/js/sessions/myjavascript.js"></script>
<script>
$( document ).ready(function() {
    if (jQuery.ui) {
        alert("loaded");
    }
});
</script>
@endpush

answered Feb 20, 2017 at 11:29

Ronak Dattani

4663 silver badges10 bronze badges

Collectives™ on Stack Overflow

Can't use Jquery UI in Laravel

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related