CODEWITHSUNDEEP
jquerylaravel-5.3jquery-select2laravel-blade
ken4ward
ken4ward

Reputation: 2296

Uncaught TypeError: jQuery(...).select2 is not a function Laravel 5.3

I am using Select2 and seeing the error below. This is my file:

@extends('layouts.app')
<link rel="stylesheet" type="text/css" href="{{URL::asset('css/select2.min.css')}}">

    @section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Dashboard</div>

                    <div class="panel-body">
                         <select name="primaryLanguage" id="primaryLanguage">
                          <option value="AL">Alabama</option>
                          <option value="WY">Wyoming</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection
    <script type="text/javascript" src="{{URL::asset('js/jquery-1.10.2.js')}}"></script>
    <script type="text/javascript" src="{{URL::asset('js/select2.full.min.js')}}"></script>
    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("primaryLanguage").select2();
        });
    </script>

The error i keep getting:

home:7 Uncaught TypeError: jQuery(...).select2 is not a function(anonymous function) @ home:7fire @ jquery-1.10.2.js:3101self.fireWith @ jquery-1.10.2.js:3213jQuery.extend.ready @ jquery-1.10.2.js:3425completed @ jquery-1.10.2.js:3455
jquery-1.9.0.js:1 '//@ sourceURL' and '//@ sourceMappingURL' are deprecated, please use '//# sourceURL=' and '//# sourceMappingURL=' instead.

Upvotes: 3

Views: 14271

Answers (5)

Pauloggdev
Pauloggdev

Reputation: 1

In my case, I'm using Laravel mix, I think the error happened by calling the script js/app.js lastly it should be called first, i did it and it was resolved

Upvotes: 0

Nejmeddine Jammeli
Nejmeddine Jammeli

Reputation: 1037

just remove this code from you main layout

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

Upvotes: 1

Kuldeep Mishra
Kuldeep Mishra

Reputation: 4050

In your code primaryLanguage you used as id, so now change a small code:

<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery("#primaryLanguage").select2();
  });
</script>

Upvotes: 0

Koussay
Koussay

Reputation: 183

i just faced your own problem, i solved it like this: put these

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/js/select2.min.js"></script>

in your main layout file (in my case app.blade.php) then under those scripts put @yield('scripts') Then in your blade file where you want to call the plugin, after the 

@section('content') 
...
@endsection
@section('scripts')
 <!-- Here you call the select2 js plugin -->
@endsection

PS : you must put the css file & js file under public folder (public/css & public/js) And here i'm using Laravel Collective for the forms I hope i helped

Upvotes: 1

Samir
Samir

Reputation: 1368

try modifying this,

<script type="text/javascript">
   jQuery(document).ready(function(){
       jQuery("#primaryLanguage").select2();
   });
</script>

In your code, you are refering to a tag having name primaryLanguage. But actually it is an id. Hence you are missing # to specify the tag with specific 'id'.

Upvotes: 0

Related Questions