admin管理员组

文章数量:1400078

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.

  • javascript
  • php
  • jquery
  • laravel
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
Add a ment  | 

5 Answers 5

Reset to default 6

Laravel 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,

  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

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

本文标签： javascriptCannot use jQuery in Laravel Blade fileStack Overflow

版权声明：本文标题：javascript - Cannot use jQuery in Laravel Blade file - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744256465a2597506.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。