Menu
I have created a Laravel 5.6 project on my local.
I have <script src="{{ asset('js/app.js') }}" defer></script> in <head>
In one of the views, I tried
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery( "#ddtype" ).change(function() {
alert( "Handler for .change() called." );
});
});
</script>
but it gives me jQuery is not defined error
If I try Bootstrap 4's collapse function, it works fine. Does that mean jQuery is already included?
I have done npm install and npm run dev
My resources/js/app.js requires bootstrap.js which looks like (not full code but top few lines) as below
window._ = require('lodash');
window.Popper = require('popper.js').default;
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
Please advise. I have checked in different browsers to make sure no cache issues etc.
Update
My layouts/app.blade.php structure is like this -
<html>
<head>
....
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
....
</head>
<body>
<div id="app">
@include('layouts.nav')
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>
and myview.blade.php
@extends('layouts.app')
@section('content')
.....
.....
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery( "#ddtype" ).change(function() {
alert( "Handler for .change() called." );
});
});
</script>
@endsection
661
jQuery is already included in this version of laravel as a dev dependency.
Laravel does not require you to use a specific JavaScript framework or library to build your applications. In fact, you don't have to use JavaScript at all. However, Laravel does include some basic scaffolding to make it easier to get started writing modern JavaScript using the Vue library.
Introduction. While Laravel does not dictate which JavaScript or CSS pre-processors you use, it does provide a basic starting point using Bootstrap, React, and / or Vue that will be helpful for many applications. By default, Laravel uses NPM to install both of these frontend packages.
How to fix it ? The simple answer would be to include the jQuery library. Assuming things worked, then you altered the template, then they didn't, I'd guess you deleted the code to include the library, or made some other change that means laravel can't find it.
jQuery is loaded via your app.js, which is only loaded once the page is ready because of the defer attribute in your script tag.
Your inline script tag where you call jQuery(document).ready is loaded as the page renders, therefore executed before the app.js has been loaded. Hence the error, since jQuery is not yet loaded at that time.
To fix it, simply remove the defer attribute from the script tag.
The defer attribute is a boolean attribute.
When present, it specifies that the script is executed when the page has finished parsing.
For more information about the defer attribute: https://www.w3schools.com/tags/att_script_defer.asp
183
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
