Select 2 jQuery doesn't work in laravel 6

Question

So I am trying to create a form where the user can add a book to the database. I wanted to use the select bars from Select2, which allow the user to search for the select elements. I followed a tutorial on how to make this work, but somehow it doesn't seem to work for me. Any ideas on what I did wrong?

The relevant code:

@extends('layout')


@section('title')
<title>Add new book</title>
@section('stylesheets')
<link href="css/select2.min.css" rel="stylesheet" />
<script src="js/select2.min.js"></script>
@endsection
@section('content')
<style>
    .uper {
        margin-top: 40px;
    }
</style>
<div class="card uper">
    <div class="card-header">
        Neues Buch hinzufügen
    </div>
    <div class="card-body">
        <form method="post" action="{{ route('books.store') }}">
            <div class="form-group">
                @csrf

                ...

            <div class="form-group">
                <label for="authors">Author(en):</label>
                <select name="authors[]" multiple class="form-control select2-multi <!-- @error('authors') is-invalid @enderror -->">
                    @foreach ($authors as $author)
                    <option value="{{ $author->id }}">{{ $author->name }}</option>
                    @endforeach
                </select>
                @error('authors')
                <div class="alert alert-danger">{{ $message }}</div>
                @enderror
            </div>

...

 </form>
    </div>
</div>
@endsection
<script type="text/javascript">
$('.select2-multi').select2();
</script>

have you tried to use the id of your select element instead of the class `$('#MySelect').select2();` — stan chacon, Feb 17 '20 at 22:13
Yes, Failed to load resource: the server responded with a status of 404 (Not Found) select2.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found) create:16 Uncaught ReferenceError: $ is not defined at create:16 select2.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found) — mekol, Feb 24 '20 at 17:02

score 0 · Answer 1 · answered Feb 20 '20 at 18:07

0

Seeing the code as is, your script tag is outside of your sections, thus not getting read inside the file, move it inside any section really, but in this cas the stylesheets would be more appropriate.

@section('stylesheets')
<link href="css/select2.min.css" rel="stylesheet" />
<script src="js/select2.min.js"></script>
<script type="text/javascript">
    $('.select2-multi').select2();
</script>
@endsection

While we're at it, your title section doesn't have an endsection.

answered Feb 20 '20 at 18:07

Alexandre Elshobokshy

10,720
6
27
57

Thanks for the comment! I tried doing that and unfortunately it still doesn't work. – mekol Feb 22 '20 at 19:06
@mekol what is your console saying? – Alexandre Elshobokshy Feb 22 '20 at 21:21
Failed to load resource: the server responded with a status of 404 (Not Found) select2.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found) create:16 Uncaught ReferenceError: $ is not defined at create:16 select2.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found) – mekol Feb 24 '20 at 17:01
@mekol where are your css and js stored ? In your public folder ? Try replacing your href and src with assets, like this : `{{ asset('css/select2.min.css') }}` and `{{ asset('js/select2.min.js') }}` – Alexandre Elshobokshy Feb 25 '20 at 07:57
Two of the error messages disappeared, but I am still getting create:3 Uncaught ReferenceError: $ is not defined at create:3 (anonymous) @ create:3 select2.min.js:2 Uncaught ReferenceError: jQuery is not defined at select2.min.js:2 at select2.min.js:2 – mekol Feb 25 '20 at 17:36
You need to add jquery too, please search for answers on the web before asking. – Alexandre Elshobokshy Feb 25 '20 at 20:14
Sorry, I really don't wanna seem dumb, I have searched the web for a long time. This is my first time making an application and I'm kind of struggling. I have included the jQuery as well, but it is still not working. – mekol Feb 25 '20 at 20:50
"it is still not working" is not enough to be able to help you, details are key, and no question is dumb if the necessary search for the answer is done before asking. – Alexandre Elshobokshy Feb 26 '20 at 08:43

Select 2 jQuery doesn't work in laravel 6

1 Answers1