Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't use Jquery UI in Laravel

Tags:

jquery

laravel

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>
like image 336
prgrm Avatar asked Feb 20 '17 11:02

prgrm


3 Answers

I was need autocomplete from jquery-ui

  1. Run npm install jquery-ui --save-dev
  2. 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

like image 177
despotbg Avatar answered Nov 10 '22 23:11

despotbg


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!

like image 41
Vaibhavraj Roham Avatar answered Nov 10 '22 22:11

Vaibhavraj Roham


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
like image 2
DevK Avatar answered Nov 10 '22 22:11

DevK