web-dev-qa-db-fra.com

Select2 () n'est pas une fonction

Donc, j'ai téléchargé select2, je l'ai "installé" en le mettant dans mon dossier, puis je l'ai chargé sur mon site lorsque je vérifie la console (où je peux voir tous les scripts en cours de chargement), je peux voir le fichier select2.js

Je suis allé voir leur documentation, je l'ai copié et j'ai ajouté $("#e9").select2();  

Cependant, lorsque je charge la page, j'obtiens l'erreur suivante:

TypeError: $(...).select2 is not a function


$("#e9").select2();

Quelqu'un at-il déjà expérimenté quelque chose comme ça?

Informations complémentaires voici mon script:

    jQuery(document).ready(function(){
    var max_amount = parseFloat($('#max_amount').val());
    $( "#item_amount" ).keyup(function() {
           if($(this).val() > 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 > 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(
                  "<tr id='"+id+"'>" +
                      "<td class='image'>" +
                      ""+
                      "</td>" +
                      "<td class='name'>" +
                      " "+data[0]['Product']['name'] +
                      "</td>"+
                      "<td class='quantity'>" +
                      "x "+amount +""+
                      "</td>"+
                      "<td class='total'>" +
                      ""+price*amount+
                      "</td>" +
                      ""+
                      "<td class='remove'>" +
                      "<input class='icon-remove' type='button' onclick='removeItemFromBasket("+id+")'>"+
                      "</td>"+
                      "</tr>"
              );
           }else{
               $("#shopping_menu").append(
                   "<ul class='dropdown-menu topcartopen'>"+
                       "<li id='basket_list'>"+
                      "<table id='shopping_table'>"+
                        "<tbody id='shopping_table_body'>"+
                       "<tr id='"+id+"'>" +
                       "<td class='image'>" +
                       ""+
                       "</td>" +
                       "<td class='name'>" +
                       " "+data[0]['Product']['name'] +
                       "</td>"+
                       "<td class='quantity'>" +
                       "x "+amount +""+
                       "</td>"+
                       "<td class='total'>" +
                       ""+price*amount+
                       "</td>" +
                       ""+
                       "<td class='remove'>" +
                       "<input class='icon-remove' type='button' onclick='removeItemFromBasket("+id+")'>"+
                       "</td>"+
                       "</tr>"+
                       "</table>"+
                       "</li>"+
                       "<div class='well pull-right'>"+
                       "<input type='button' onclick='goToBasket()' class='btn btn-success' value='Tjek ud'>"+
                       "</div>"+
                       "</ul>"

               )
           }
            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';
}
javascriptjqueryjquery-select2
35
Marc Rasmussen

J'avais ce problème quand j'ai commencé à utiliser select2 avec XCrud. Je l'ai résolu en désactivant XCrud de charger JQuery, c'était une seconde fois, et en le chargeant sous la balise body. Assurez-vous donc que JQuery ne soit pas chargé deux fois sur votre page. 

51
Finbar Dooley

Cette erreur survient si vos fichiers js où vous avez lié la zone select2 avec la zone de sélection sont en cours de chargement avant les fichiers selects js .Veuillez vous assurer que les fichiers doivent être dans cet ordre, comme dans ..

  • Jquery 
  • select2 js
  • ton js
30
Ashutosh Singh

Je faisais également face au même problème et notons que cette erreur s’est produite parce que le sélecteur sur lequel j’utilise select2 n’existait pas ou n’était pas chargé.

Donc, assurez-vous que $ ("# sélecteur") existe en faisant 

if ($("#selector").length > 0)
   $("#selector").select2();
5
Irfan Ashraf

Mettez config.assets.debug = false dans config/environment/development.rb.

1
Rio Dermawan

J'ai utilisé la version slim jQuery et j'ai eu cette erreur. En utilisant la version normale de jQuery, le problème a été résolu.

1
Orhan

Le problème est assez ancien, mais je vais mettre une petite note car j'ai passé quelques heures aujourd'hui à enquêter sur le même problème… .. Après avoir chargé une partie du code de manière dynamique, select2 n'a pas pu résoudre les problèmes avec une nouvelle boîte de sélection "$ (...). select2 n'est pas une fonction".

J'ai trouvé que dans select2.js non compressé, une ligne l'empêchait de retraiter la fonction principale (dans ma version 3.5.4, elle se trouve à la ligne 45):

if (window.Select2 !== undefined) {
    return;
}

Donc, je viens de commenter là-bas et a commencé à utiliser select2.js (au lieu de la version minified).

//if (window.Select2 !== undefined) {
//    return;
//}

Et cela a commencé à bien fonctionner, bien sûr, il peut maintenant effectuer le traitement plusieurs fois en perdant la performance, mais j'en ai quand même besoin.

J'espère que cela aide, Vladimir

1
user2200036

vous faites peut-être référence à deux scripts jquery qui donnent l'erreur ci-dessus.

0
Aniket Mainkar