web-dev-qa-db-ja.com

Laravelブレード使用$（document）.ready関数

子ビューにいくつかのJavaScriptコードを含むlaravelブレードテンプレートを使用しようとしています。

メールがありますapp.blade.phpファイル。jquery初期化の文字列が配置されています。

<script src="/js/jquery.min.js"></script>

私のサブビューファイルでsettings.blade.phpいくつかのjquery関数を使用したい：

@extends('layouts.app')
@section ('content')
Settings main page
@endsection

<script type="text/javascript">
    $(document).ready(function() {
        alert("Settings page was loaded");
    });
</script>

しかし、ブラウザコンソールでエラーメッセージが表示されますncaught ReferenceError：$ is not definedこれはjqueryがロードされたようです[〜＃〜] after [〜＃〜]その関数を呼び出しましたサブビューファイル内。

行の追加：<script src="/js/jquery.min.js"></script> into settings.blade.php問題を解決します。しかし、スクリプトファイルを各サブビューファイルに追加したくありません。

質問：メインのjavascript\jqueryファイルを親ブレードファイルにロードするにはどうすればよいですか[〜＃〜] before [〜＃〜]サブビューファイルをロードするにはどうすればよいですか？

jquerylaravel-5.2laravel-blade
4
Jukka Newkampton

この方法に従ってください

jqueryスクリプトファイルの場合はこれを行います

<script src="{!!url('/js/jquery.min.js')!!}"></script>

コンテンツセクションでこれを行います

@extends('layouts.app')
@section ('content')
Settings main page

<script type="text/javascript">
    $(document).ready(function() {
        alert("Settings page was loaded");
    });
</script>

@endsection

更新

コンテンツセクションでスクリプトを作成するよりも、app.blade.phpでスクリプトを作成するための別のセクションを作成する方がはるかに優れたプロフェッショナルな方法です。

通常、私はこのように従います

<html>
  <head> 
    @yield('page-style-files')
  </head>

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

  @yield('page-js-files')
  @yield('page-js-script')

<html>

たとえば、コードは次のようになります

@extends('layouts.app')
@section ('content')
  Settings main page    
@endsection

@section('page-style-files')
 <link href="....css" />
@stop


@section('page-js-files')
 <script src=".....js"></script>
@stop

@section('page-js-script')
<script type="text/javascript">
    $(document).ready(function() {
        alert("Settings page was loaded");
    });
</script>
@stop
12
Qazi

私はこれと同じ問題を抱えていましたが、これはdefer属性でロードされているjsファイルに関係しているようです。

$が定義されていないという同じコンソール警告が表示されていました。

だから私はこの概念をテストしました...

<script type="text/javascript">
    setTimeout(function () {
        $(document).ready(function(){
            alert('now');
        });
    }, 5000);
</script>

それでうまくいったので、defer（LinuxMintでFirefoxDeveloper Editionを使用）と関係があると思います。

とにかく、私のすべてのスクリプトを適切なjsファイルに入れる正当な理由;-)

0
Matt