CODEWITHSUNDEEP
phplaraveljquery-select2
rose
rose

Reputation: 197

Why doesn't my Select2 work in Laravel project?

In my project I have many-to-many relationship beteween movies and actors, and movies and categories. And when I attempt to create a movie and then try to add actors and categories using Select2 it doesn't list available options (input fields look grey, like they're locked). I looked to see if the scripts are loading and they are. Here is my code. 

  MovieController:

  public function create()
  {  
    $actors = Actor::pluck('actor_name', 'id');
    $categories = Category::pluck('category_name', 'id');
    return view('movies.create', compact('actors', 'categories'));
  }

  create.blade.php:

       @extends('layouts.app')

       @section('title', '| Upload Movie')

       @section('stylesheets')

         {!! Html::style('css/select2.min.css') !!}

       @endsection

       @section('content')

         <div class="container">
            <div class="row">
                <div class="col-md-12">
                  <div class="row">
                    <div class="col-md-6">
                       {!! Form::open(['method'=>'POST', 'action'=> 'MovieController@store']) !!}
                      <div class="form-group">
                        {!! Form::label('movie_name', 'Name:') !!}
                        {!! Form::text('movie_name', null, ['class'=>'form-control'])!!}
                      </div>
                      <div class="form-group">
                        {!! Form::label('actor_id', 'Actors:') !!}
                        {!! Form::select('actor_id[]', $actors, null, ['class'=>'form-control select2-multi', 'multiple' => 'multiple']) !!}
                     </div>
                     <div class="form-group">
                        {!! Form::label('category_id', 'Category:') !!}
                        {!! Form::select('category_id[]', $categories, null, ['class'=>'form-control select2-multi', 'multiple' => 'multiple']) !!}
                     </div>
                     <div class="form-group">
                        {!! Form::submit('Upload Movie', ['class'=>'btn btn-primary']) !!}
                     </div>
                        {!! Form::close() !!}
                     </div>
                   </div>
                 </div>
             </div>
         </div>
         @endsection

         @section('scripts')

         {!! Html::script('js/select2.min.js') !!}

         <script type="text/javascript">

         $('.select2-multi').select2();

         </script> 

         @endsection

Upvotes: 0

Views: 1595

Answers (1)

Cory Fail
Cory Fail

Reputation: 1090

Directly from the Select2 documentation:

The DOM cannot be safely manipulated until it is "ready". To make sure that your DOM is ready before the browser initializes the Select2 control, wrap your code in a $(document).ready() block. Only one $(document).ready() block is needed per page.

https://select2.org/getting-started/basic-usage

So your code should be:

<script type="text/javascript">
    $(document).ready(function() {
          $('.select2-multi').select2();
     });
</script>

Upvotes: 1

Related Questions