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>
I was need autocomplete from jquery-ui
npm install jquery-ui --save-dev
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
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!
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With