CODEWITHSUNDEEP
javascriptphpjquerylaravel
Ron Butcher
Ron Butcher

Reputation: 529

Cannot use jQuery in Laravel Blade 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.com">
    <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.

Upvotes: 1

Views: 7603

Answers (5)

Nicol&#225;s Pistillo
Nicol&#225;s Pistillo

Reputation: 3

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

Upvotes: 0

August
August

Reputation: 1

Yes, I added jquery script tags Jquery script tags

Upvotes: 0

August
August

Reputation: 1

You don't need to remove "defer" from <script src="{{ asset('js/app.js') }}" defer></script>.

Paste jquery script tags below app.js then,

  1. install npm
  2. remove vue template in resouces/js/app.js
  3. type "npm run dev" and hit enter
  4. repeat #3 2 times

Then no Uncaught ReferenceError: $ is not defined will appear

NPM

Upvotes: 0

parker_codes
parker_codes

Reputation: 3397

Laravel loads jQuery by default, so it will be there unless you removed it from your complied app.js (running an npm commands to compile 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 command.

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.

Upvotes: 6

Hưng ho&#224;ng
Hưng ho&#224;ng

Reputation: 356

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

Upvotes: -1

Related Questions