Select2 is not a function

Question

So i have downloaded select2 i have  installed it  by putting it into my folder and then loaded it on my site when i check the console  where i can see all of the scripts being loaded  i can see the file select2 js  I went to their documentation and copied it and added     e9   select2       However when i load the page i get the following error   TypeError         select2 is not a function       e9   select2      Have anyone else experianced anything like this   Additional information here is my script       jQuery document  ready function        var max amount   parseFloat     max amount   val              item amount    keyup function                if   this  val    gt  max amount                 this  val  max amount                     if    D  test   this  val                   alert  M   kun indeholde tal                   this  val                        if   this  val      0                alert  M   ikke v  re 0                   this  val                                e1   select2         function addToBasket        var amount       item amount   val        if amount                 amount   1             if amount  gt  0         ajax           type   POST           url  myBaseUrl    Products addItemToBasket           dataType   json           data                id  window location pathname substring window location pathname lastIndexOf        1               amount  amount                    success  function  data                var urlToBasket   myBaseUrl  Products basket               var newAmount   parseInt amount              var price   data 0   Product    pris                var id   data 0   Product    id                var dat   data              var tmp basket html       basket amount   html               if     basket amount   html         Tom                      shopping table body   append                      lt tr id    id    gt                             lt td class  image  gt                                                       lt  td gt                             lt td class  name  gt                               data 0   Product    name                             lt  td gt                            lt td class  quantity  gt                            x   amount                              lt  td gt                            lt td class  total  gt                              price amount                          lt  td gt                                                       lt td class  remove  gt                             lt input class  icon-remove  type  button  onclick  removeItemFromBasket   id     gt                            lt  td gt                            lt  tr gt                                else                     shopping menu   append                       lt ul class  dropdown-menu topcartopen  gt                             lt li id  basket list  gt                            lt table id  shopping table  gt                              lt tbody id  shopping table body  gt                             lt tr id    id    gt                              lt td class  image  gt                                                         lt  td gt                              lt td class  name  gt                                data 0   Product    name                              lt  td gt                             lt td class  quantity  gt                             x   amount                               lt  td gt                             lt td class  total  gt                               price amount                           lt  td gt                                                         lt td class  remove  gt                              lt input class  icon-remove  type  button  onclick  removeItemFromBasket   id     gt                             lt  td gt                             lt  tr gt                             lt  table gt                             lt  li gt                             lt div class  well pull-right  gt                             lt input type  button  onclick  goToBasket    class  btn btn-success  value  Tjek ud  gt                             lt  div gt                             lt  ul gt                                              updateTotal amount price               updateBasketAmount                                Notifier success  Vare tilf  jet    Tilf  jet       text and title are both optional    function updateTotal amount  price       var price   parseFloat price       var oldValue   parseFloat     basket total cost   html         var newPrice   amount price oldValue          basket total cost   html newPrice     function updateBasketAmount       var tmp        basket amount   html        if  isNaN tmp       var oldAmount   parseInt tmp substr 0 2        var i   oldAmount   1           basket amount   html             i   vare r               else              basket amount   html               1    vare r                      function goToBasket        window location href   myBaseUrl  Products basket

User · Answer

I was also facing same issue  amp  notice that this error occurred because the selector on which I am using select2 did not exist or was not loaded   So make sure that     selector   exists by doing   if      selector   length  gt  0         selector   select2

User · Answer

I used the jQuery slim version and got this error  By using the normal jQuery version the issue got resolved

User · Answer

For newbies like me  who end up on this question  This error also happens if you attempt to call  select2   on an element retrieved using pure javascript and not using jQuery   This fails with the  select2 is not a function  error   document getElementById  e9   select2      This works       e9   select2

User · Answer

In my case  I was getting this error in my rails app when both webpacker and sprockets were trying to import jQuery  I didn t notice it until my code editor automatically tried to import jQuery into a webpacker module

User · Answer

Put config assets debug   false in config environments development rb

User · Answer

The issue is quite old  but I ll put some small note as I spent couple of hours today investigating pretty same issue  After I loaded a part of code dynamically select2 couldn t work out on a new selectboxes with an error         select2 is not a function    I found that in non-packed select2 js there is a line preventing it to reprocess the main function  in my 3 5 4 version it is in line 45     if  window Select2     undefined        return       So I just commented it out there and started to use select2 js  instead of minified version       if  window Select2     undefined          return         And it started to work just fine  of course it now can do the processing several times loosing the performance  but I need it anyhow   Hope this helps  Vladimir

User · Answer

I was having this problem when I started using select2 with XCrud  I solved it by disabling XCrud from loading JQuery  it was it a second time  and loading it below the body tag  So make sure JQuery isn t getting loaded twice on your page

User · Answer

you might be referring two jquery scripts which is giving the above error

User · Answer

This error raises if your js files where you have bounded the select2 with select box is loading before select2 js files  Please make sure files should be in this order like     Jquery  select2 js your js

User · Answer

Had the same issue  Sorted it by defer loading select2   lt script src  https   cdnjs cloudflare com ajax libs select2 4 0 8 js select2 min js  defer gt  lt  script gt

User · Answer

Add    quot  id quot   select2   out of document ready   function

User · Answer

For me  select2 min js file worked instead of select2 full min js  I have manually define files which I have copied from dist folder that I got from github page  Also make sure that you have one jQuery document  ready      definition and jquery file imported before select2 file

[javascript] Select2() is not a function

Examples related to javascript

Examples related to jquery

Examples related to jquery-select2