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

Question

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.

Solution

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

Comments

[ken4ward]

When I edited as you proposed now I'm now getting the error thus:jQuery.Deferred exception: jQuery(...).select2 is not a function TypeError: jQuery(...).select2 is not a function at HTMLDocument.<anonymous> (http://localhost:8000/home:7:35) at j (http://localhost:8000/js/jquery-3.1.1.min.js:2:29948) at k (http://localhost:8000/js/jquery-3.1.1.min.js:2:30262) undefined jquery-3.1.1.min.js:2 Uncaught TypeError: jQuery(...).select2 is not a function

[ken4ward]

Highly appreciate your support.

[Samir]

As @Araz mention in comment, Is your Js files are loaded properly?

[Suhaib Ahmad]

why do you suggest doing this as I've got require(./bootstrap') and require('admin-lte') in that. Why would removing it work?

[nonNumericalFloat]

Explaining what resolved your issue could help other users understand what they have to do :) You could also share your code.

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.