2016-04-20 8 views
2

Ich versuche Laravel Blade-Vorlagen einschließlich einige Javascript-Code in untergeordneten Ansicht zu verwenden.

Ich habe meine Mail app.blade.php Datei, in Folge von jquery Initialisierung gesetzt wird:

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

In meiner subview Datei settings.blade.php Ich möchte einige jQuery-Funktionen nutzen :

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

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

Aber in Browser-Konsole erhalte ich eine Fehlermeldung Uncaught Reference: ist $ nicht definiert, die wie jquery wa scheint s geladen NACH Aufruf dieser Funktion in Subview-Datei.

Hinzufügen einer Zeile: <script src="/js/jquery.min.js"></script> in settings.blade.php löst das Problem. Aber ich möchte meine Skriptdateien nicht in jede meiner Unteransichtsdateien einfügen.

So Frage: Wie kann ich Hauptjavascript \ jquery Dateien in Elternblattdatei laden BEFORE Laden von Subview-Dateien?

+0

Bitte korrigieren Sie den Pfad der js-Datei und legen Sie einfach js-Datei oben auf dem pa Seite vor dem Laden der Unteransicht mieten. –

+0

Der Pfad der js-Datei ist korrekt. Ich bekomme keinen Fehler in meinem Debugger. Wenn Datei in app.blade.php verwendet wird, lädt es korrekt, ohne Fehler –

Antwort

6

Bitte folgen Sie diesem Weg

für jquery Skriptdatei tun, um diese

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

und tun dies für Inhaltsbereich

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

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

@endsection 

Aktualisiert


eher zu Scripting in Inhaltsbereich, wäre es viel besser und professionelle Art und Weise einen anderen Abschnitt für das Skripting in app.blade.php

normalerweise ich auf diese Weise

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

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

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

<html> 

so folgen zu erstellen Zum Beispiel wird Ihr Code wie folgt aussehen:

@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 
+0

Vielen Dank. Moving