CODEWITHSUNDEEP
javascriptphplaraveljquery-select2laravel-5.4
Tom S.
Tom S.

Reputation: 63

Laravel 5.4 blades and select2 not working

I have some hard time to make select2 js lib working in laravel, there are no errors in console. My blade file:

@extends('layouts.app')

@section('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div >
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Dodaj nowy podmiot</div>
                <div class="panel-body">
                    <div >
                        <div>
                            <form>
                                <div class="form-group">
                                    <select class="js-example-basic-single">
                                        <option value="AL">Alabama</option>
                                        <option value="WY">Wyoming</option>
                                    </select>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  $(".js-example-basic-single").select2();
</script>
@endsection

It only changes CSS of the item, but select even if it's clickable nothing happens, it doesn't show options, dropdown is not appearing.

Has anyone faced issues like that before ?

Upvotes: 1

Views: 6656

Answers (3)

Caohero
Caohero

Reputation: 41

That's because defer.

In app.blade.php file there is declare like below.

<script src="{{ asset('js/app.js') }}" defer></script>

Here remove defer and make it like

<script src="{{ asset('js/app.js') }}"></script>

It will work

Upvotes: 4

Tom S.
Tom S.

Reputation: 63

Ok guys, I have resolved this problem by commenting this line in my layout blade:

<!-- <script src="{{ asset('js/app.js') }}"></script> !-->

so, the default js file included in laravel is causing the problem with select2 library.

Thanks for help

Upvotes: 2

user3010273
user3010273

Reputation: 900

Have you tried wrapping the select instantiation code inside the ready clause?

$( document ).ready(function() 
{
  $(".js-example-basic-single").select2();
}

EDIT:

You are missing the type="text/javascript" in your javascript imports. Some browsers won't execute JavaScript if it doesn't have that tag. Try to fix that and see if it works.

Upvotes: 0

Related Questions