CODEWITHSUNDEEP
javascriptjquerylaravel
HansMuff
HansMuff

Reputation: 301

Onclick undefined var

I have the following code in my website

@if(count($alleSpiele) > 0)
    <div class="form-group">
    <label for="sel1">Spiel auswählen</label>
        <select class="form-control" id="spielAuswahl" name="spielAuswahl">
            @foreach($alleSpiele as $alleSpieleOutput)
                <option value="{!! $alleSpieleOutput->heimmannschaft !!}">{{$alleSpieleOutput->heimmannschaft}}</option>
            @endforeach
        </select>
    </div>
@endif

<script>
    $('#spielAuswahl').on('change', function(e){
        console.log(e);
    });

</script>

When I go to my website I get the output in the console...

Uncaught ReferenceError: $ is not defined
    at (index):23

What is my mistake? Is something missing?

Upvotes: 0

Views: 86

Answers (3)

ZeroOne
ZeroOne

Reputation: 9117

Everytime if you want to use jquery.. make sure you include jquery js. Download here.. and put it on your public js path. then include it in your layout

<head>
    {{ Html::style('material/assets/css/style.css') }}
</head>
<body>

//your blade content html

<script>
    {{ Html::script('material/assets/js/jquery-3.1.0.min.js') }}

    $('#spielAuswahl').on('change', function(e){
        console.log(e);
    });

</script>
</body>

Upvotes: 0

andrewhiles
andrewhiles

Reputation: 99

It sounds like you haven't imported the jQuery library into your page. You could test quickly this by getting the appropriate version of jQuery from a CDN(Content Delivery Network) like https://code.jquery.com. Simply add a new <script> tag and load the content inside the <head> tags and refresh the page to see if the error persists.

e.g. <script src="http://code.jquery.com/jquery-3.2.1.js"></script>

If after doing this you are still seeing errors, then there are bigger issues.

Hope this helps.

Upvotes: 1

Dan
Dan

Reputation: 129

Make sure you have the jquery script referenced in the head of of your document.

<!doctype html>
  <head>
    <script src="[path to jquery.js]"></script>
  </head>

Upvotes: 3

Related Questions