Wie verwende ich jQuery auf Laravel richtig?

Ich bin neu in Laravel und es verwirrt mich, wie es funktioniert.Wie verwende ich jQuery auf Laravel richtig?

Hier ist mein Code:

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

<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

Haupt .js (public/js /)

alert('Alert Test'); 

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

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

mit der co de über das Ergebnis Ich erhalte eine einzige Warnmeldung „Alert Test“, eine nicht funktionierende Taste und ein Fehler von Uncaught Reference ist: ist $ nicht definiert:

$(document).ready(function(){

Aber meine Erwartungen sollte eine Warnung sein Meldung "Alert Test", "DocReady" und eine Schaltfläche, die beim Klicken auf "Neu" warnt, ohne dass Fehler oder Warnungen aufgetreten sind.

Ich habe versucht, den Code-Block in home.blade.php (/ views /) wie dieses

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

Das Ergebnis ist 2 Warnmeldungen von "Alert Test" und 1 "docReady" plus ein sich ändern Warnmeldung von "Neu", wenn auf die Schaltfläche geklickt wird, aber immer noch das Uncaught ReferenceError: $ ist immer noch vorhanden, was nicht erforderlich ist und ich glaube, dass es falsch ist, wenn ich ein dupliziertes Skript in meinen Code einfüge.

Irgendwelche Ratschläge, wo genau diese jQuery-Code und wie sie richtig aufrufen? Vielen Dank!

hinzugefügt Hinweis: Ich habe auch versucht, das Skript regelmäßig am Ende der Datei app.blade.php (/ views/layouts /), und die Ausgabe ist eine einzige Warnmeldung "Alert Test" und ein Fehler auf Referenz.

Quelle

2017-11-09 Bob

Wie ich sehen kann, dass Sie jQuery Alias vor dem Laden von jQuery laden. Sie müssen laden app.js vor main.js

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

Quelle

2017-11-09 21:02:29

Ich sehe so, das war das Problem. Danke, @Fazle Elahee! – Bob

Wie verwende ich jQuery auf Laravel richtig?

Antwort

Verwandte Themen