dongyong1897
2017-11-09 20:46
浏览 311
已采纳

如何在Laravel上正确使用jQuery?

I'm new at Laravel and it confuses me on how to get it working.

Here is my Code:

app.blade.php (/views/layouts/)

<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel</title>
    <link rel="stylesheet" type="text/css" href="/css/app.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-lg-8">
                @yield ('content')
            </div>

            <div class="col-md-4 col-lg-4">
                @include('inc.sidebar')
            </div>
        </div>
    </div>

    <footer class="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

    @yield('jQuery')
</body>

home.blade.php (/views/)

@extends('layouts.app')

@section('content')
<h1>Home</h1>

<section class="controls">
    <button type="button" class="btn btn-success" id="New">New</button>
    <button type="button" class="btn btn-warning" id="Modify">Modify</button>
    <button type="button" class="btn btn-danger" id="Close">Close</button>
</section>  
@endsection

@section('sidebar')
    @parent
    <p>This is the appended to the sidebar.</p>
@endsection

@section('jQuery')
    <script src="{{ asset('js/main.js') }}"></script>
    <script src="{{ asset('js/app.js') }}"></script>
@endsection

main.js (public/js/)

alert('Alert Test');

$(document).ready(function(){
    alert('DocReady');

    $('#New').on('click',function(){
        alert('New');
    });
});

with the code above, the result I am receiving is a single alert message "Alert Test", a non-working button and an error of Uncaught ReferenceError: $ is not defined at:

$(document).ready(function(){

But my expectations should be an alert message "Alert Test", "DocReady" and a button that alert "New" when clicked without any errors or warnings.

I tried to change the block of code in home.blade.php (/views/) like this

<section class="controls">
    <button type="button" class="btn btn-success" id="New">New</button>
    <button type="button" class="btn btn-warning" id="Modify">Modify</button>
    <button type="button" class="btn btn-danger" id="Close">Close</button>

    <!-- Added Code -->
    <script src="{{ asset('js/main.js') }}"></script>
    <script src="{{ asset('js/app.js') }}"></script>
    <!-- Added Code -->
</section> 

The result is 2 alert messages of "Alert Test" and 1 "DocReady" plus an alert message of "New" when the button is clicked but still the Uncaught ReferenceError: $ is still existing which is not required and I believe incorrect as I put duplicated script in my code.

Any advice on where to put exactly those jQuery code and how to properly call them? Thanks!

Added Note: I also tried to put the script regularly at the bottom of app.blade.php (/views/layouts/) file, and the output is a single alert message "Alert Test" and an error on reference.

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dpgjci27392 2017-11-09 21:02
    已采纳

    As I can see that you loading jQuery alias before jQuery loading. You need load app.js before main.js

    @section('jQuery')
    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('js/main.js') }}"></script>
    @endsection
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题