2017-11-12 14 views
0

CDNでjQuery 3.2.1をロードするLaravel 5.5アプリケーション用のメインレイアウトテンプレートがあります。 jQueryがうまく読み込まれていることを確認するために、開発者の「ネットワーク」タブを確認しました。私は単純にフォームを送信するためにいくつかのjQueryを書いてみました、それは私のレイアウトテンプレートを拡張し、テンプレートで

<html> 
    <head> 
     <title>My app - @yield('title')</title> 
    </head> 

    <body> 
     <div class="container"> 
      @yield('content') 
     </div> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
     </script> 
    </body> 
</html> 

(私は200 HTTPステータスコードを見ることができるためです)。

@extends('layouts.app') 

@section('content') 
    <form id="my-form" action="{{ route('item.store') }}"> 
     <input type="text" name="name" /> 
     <button id="my-submit-button" type="submit">Add</button> 
    </form> 

    <script> 
     $(document).ready(function() { 
      $("#my-form").submit(function(event) { 
       event.preventDefault(); 
      }); 

      $("#my-submit-button").click(function() { 
       axios.post('/items', { 
        name: 'item-name', 
       }) 
       .then(function (response) { 
        console.log(response); 
       }) 
       .catch(function (error) { 
        console.log(error); 
       }); 
      }); 
     }); 
    </script> 
@endsection 

問題は次のとおりです。「未検出のReferenceError:$が定義されていません」。私は間違って何をしていますか?

ありがとうございます!

答えて

1

@yield('content')のレイアウトテンプレートにコードをロードすると、の前に、スクリプトタグを使用してjQueryライブラリを読み込みます。 htmlを変更して、headタグのjqueryリンクを使用するコードの上に配置します。

<html> 
<head> 
    <title>My app - @yield('title')</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
    </script> 
</head> 

<body> 
    <div class="container"> 
     @yield('content') 
    </div> 

</body> 

関連する問題