javascript - multiple - select2 trigger change

Select2() no es una función

Question

Así que descargué Select2, lo "instalé" al ponerlo en mi carpeta y luego lo cargué en mi sitio cuando reviso la consola (donde puedo ver todos los scripts que se están cargando) puedo ver el archivo select2.js

Fui a su documentación, lo copié y agregué $("#e9").select2();

Sin embargo, cuando carga la página me sale el siguiente error:

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


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

¿Alguien más ha experimentado algo como esto?

Información adicional aquí es mi 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'';
}

Answer 1

Coloque config.assets.debug = false en config / environments / development.rb.

Answer 2

El problema es bastante antiguo, pero pondré una pequeña nota ya que pasé un par de horas hoy investigando el mismo problema. Después de cargar una parte del código, select2 dinámicamente no se pudo resolver en un nuevo cuadro de selección con un error "$ (...). Select2 no es una función".

Descubrí que en select2.js no empaquetado hay una línea que impide que vuelva a procesar la función principal (en mi versión 3.5.4 está en la línea 45):

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

Así que lo comenté por ahí y comencé a usar select2.js (en lugar de la versión minified).

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

Y comenzó a funcionar bien, por supuesto, ahora puede hacer el procesamiento varias veces perdiendo el rendimiento, pero de todos modos lo necesito.

Espero que esto ayude, Vladimir

Answer 3

Estaba teniendo este problema cuando comencé a usar select2 con XCrud. Lo resolví inhabilitando XCrud para cargar JQuery, fue una segunda vez y lo cargué debajo de la etiqueta del cuerpo. Así que asegúrate de que JQuery no se cargue dos veces en tu página.

Answer 4

Este error se produce si los archivos js en los que ha vinculado el cuadro select2 con select box se están cargando antes de los archivos select2 js. Asegúrese de que los archivos estén en este orden como ...

• Jquery
• select2 js
• tu js

Answer 5

También tuve el mismo problema y noté que se produjo este error porque el selector en el que estoy usando select2 no existía o no estaba cargado.

Así que asegúrese de que $ ("# selector") existe haciendo

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

Answer 6

Utilicé la versión jQuery slim y obtuve este error. Usando la versión normal de jQuery, el problema se resolvió.

Answer 7

podría estar refiriendo dos scripts jquery que está dando el error anterior.