I am trying to define my page specific Javascript in my blade file by defining a separate section for it in the file. I can add the same jQuery code in the app.js file and it works without issue, but when I put it in the blade file I get an error of
Uncaught ReferenceError: $ is not defined
Layout file - app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="dns-prefetch" href="">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<!-- Nav Stuff -->
</nav>
<!-- End Navigation -->
<!-- Body -->
<div class="content-wrapper">
<div class="container-fluid">
@yield('content')
</div>
<footer class="sticky-footer">
<!-- footer stuff -->
</footer>
</div>
@yield('script')
</body>
</html>
Content Page - page1.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<!-- Page Stuff -->
</div>
@endsection
@section('script')
<script>
$(document).ready(function()
{
alert('hello world');
});
</script>
@endsection
I would prefer not to put all of my Javascript in the single app.js file, I would like to be able to use this section fine. Straight Javascript works fine here, but the jQuery does not.
edit:
Here is the app.js file that includes the jQuery library.
require('jquery');
require('./bootstrap');
require('jquery-easing');
// Administration Controller - Add System Type -> This code works just fine.
var numSysDataRows = 5;
$('#add-customer-information').click(function()
{
$('#system-customer-information').append('<div class="form-group"><label for="col'+numSysDataRows+'">System Data:</label><input type="text" name="col[]" id="col'+numSysDataRows+'" class="form-control" /></div>');
numSysDataRows++;
});
If I look at the source code and check the app.js file from the web server, I do see that jQuery is loaded into the app.js file.
I am trying to define my page specific Javascript in my blade file by defining a separate section for it in the file. I can add the same jQuery code in the app.js file and it works without issue, but when I put it in the blade file I get an error of
Uncaught ReferenceError: $ is not defined
Layout file - app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="dns-prefetch" href="https://fonts.gstatic.">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<!-- Nav Stuff -->
</nav>
<!-- End Navigation -->
<!-- Body -->
<div class="content-wrapper">
<div class="container-fluid">
@yield('content')
</div>
<footer class="sticky-footer">
<!-- footer stuff -->
</footer>
</div>
@yield('script')
</body>
</html>
Content Page - page1.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<!-- Page Stuff -->
</div>
@endsection
@section('script')
<script>
$(document).ready(function()
{
alert('hello world');
});
</script>
@endsection
I would prefer not to put all of my Javascript in the single app.js file, I would like to be able to use this section fine. Straight Javascript works fine here, but the jQuery does not.
edit:
Here is the app.js file that includes the jQuery library.
require('jquery');
require('./bootstrap');
require('jquery-easing');
// Administration Controller - Add System Type -> This code works just fine.
var numSysDataRows = 5;
$('#add-customer-information').click(function()
{
$('#system-customer-information').append('<div class="form-group"><label for="col'+numSysDataRows+'">System Data:</label><input type="text" name="col[]" id="col'+numSysDataRows+'" class="form-control" /></div>');
numSysDataRows++;
});
If I look at the source code and check the app.js file from the web server, I do see that jQuery is loaded into the app.js file.
Share Improve this question edited May 5, 2018 at 4:31 Ron Butcher asked May 5, 2018 at 2:42 Ron ButcherRon Butcher 5291 gold badge9 silver badges18 bronze badges 3- So where in the code the jquery source is included? – MaxZoom Commented May 5, 2018 at 2:44
- Seem there is no load jquery.js in your blade – Truong Dang Commented May 5, 2018 at 3:24
- Jquery is loaded into my app.js file. Do I need to load it a second time in the main page? – Ron Butcher Commented May 5, 2018 at 3:50
5 Answers
Reset to default 6Laravel loads jQuery by default, so it will be there unless you removed it from your plied app.js (running an npm mands to pile from your assets). The issue is that you are deferring this script. jQuery is being loaded after the page JavaScript is run.
Try removing the defer mand.
If that doesn't work, see if jQuery is in your app.js file. If not, use a cdn or copy it to your public folder.
You don't need to remove "defer" from <script src="{{ asset('js/app.js') }}" defer></script>.
Paste jquery script tags below app.js then,
- install npm
- remove vue template in resouces/js/app.js
- type "npm run dev" and hit enter
- repeat #3 2 times
Then no Uncaught ReferenceError: $ is not defined will appear
NPM
Yes, I added jquery script tags Jquery script tags
Remember that in the case that you are using the jquery CDN, you can try to put it in your head tag, I had that same problem and I have been able to solve it this way
I don't see you add file bootstrap and jquery. Have you added jQuery and Bootstrap file yet? If not you can see in here : jquery Bootstap