"Fonction de requête non définie pour l'erreur Select2 non définie"

121

Essayer d'utiliser Select2 et obtenir cette erreur sur plusieurs champs de saisie / texte:

"query function not defined for Select2 undefined error"
Daniel Morris
la source

Réponses:

241

Couvert dans ce fil de discussion du groupe Google

Le problème était dû au div supplémentaire ajouté par le select2. Select2 avait ajouté un nouveau div avec la classe "select2-container form-select" pour encapsuler le select créé. Ainsi, la prochaine fois que j'ai chargé la fonction, l'erreur était renvoyée car select2 était attaché à l'élément div. J'ai changé mon sélecteur ...

Préfixe select2 identifiant css avec le nom de tag spécifique "select":

$('select.form-select').select2();
Daniel Morris
la source
en quelque sorte corrigé pour moi, dans mon cas, je clonais une rangée d'entrées de formulaire qui comprenait des menus de sélection select2-ified et toutes sortes de choses étranges se produisaient après le premier clone.
martincarlin87
Doit également être à l'intérieur$(document).ready(function() { $('select.form-select').select2()})
TED
1
Comment le même problème peut-il être résolu dans la directive Angular UI Select2?
zavidovych
Je viens de rencontrer ce même problème aujourd'hui - bien que le même code n'ait auparavant aucun problème (peut-être une mise à jour de select2?). Quoi qu'il en soit, cela a résolu le problème pour moi aussi et fonctionne à nouveau correctement. Très bonne réponse!
user756659
10
Ce problème se produit généralement si le contrôle de sélection a déjà été initialisé par la .select2({})méthode. Une meilleure solution serait d'appeler d'abord la méthode destroy. Ex:$("#mySelectControl").select2("destroy").select2({});
Dmitry S.
18

Ce message d'erreur est trop général. Une de ses autres sources possibles est que vous essayez d'appeler la select2()méthode sur une entrée déjà "sélectionnée".

Martin D
la source
13

Si vous initialisez une entrée vide, procédez comme suit:

$(".yourelement").select2({
 data: {
  id: "",
  text: ""
 }
});

Lisez le premier commentaire ci-dessous, il explique pourquoi et quand utiliser le code dans ma réponse.

kappaallday
la source
2
J'ai eu ce problème lorsque j'ai migré une boîte select2 d'un élément de sélection réel vers un type d'entrée = élément caché que je remplissais plus tard. En parcourant le code select2, cette erreur est générée car aucune valeur de requête, d'ajax, de données ou de balise n'est transmise.
Daniel
1
Cela devrait être la réponse acceptée pour cette question. Je ne sais pas pourquoi select2()n'accepte pas simplement les paramètres vides
swdev
11

J'ai également eu ce problème pour m'assurer que vous n'initialisez pas le select2 deux fois.

Pedro Dias
la source
pareil pour moi, mais l'erreur ne me posait pas de problème. s2 fonctionne quand même
Reign.85
comment faire ça?
khaled saleh
7

Pour moi, ce problème se résumait à la définition de l'attribut data-ui-select2 correct:

<input type="text" data-ui-select2="select2Options.projectManagers" placeholder="Project Manager" ng-model="selectedProjectManager">


$scope.projectManagers = { 
  data: []  //Must have data property 
}

$scope.selectedProjectManager = {};

Si j'enlève la datapropriété, $scope.projectManagersj'obtiens cette erreur.

parlement
la source
5

Ce problème se résumait à la façon dont je construisais ma boîte de sélection select2. Dans un fichier javascript que j'avais ...

$(function(){
  $(".select2").select2();
});

Et dans un autre fichier js, un remplacement ...

$(function(){
    var employerStateSelector = 
                $("#registration_employer_state").select2("destroy");
    employerStateSelector.select2({
    placeholder: 'Select a State...'
    });
});

Le déplacement du deuxième remplacement dans un événement de chargement de fenêtre a résolu le problème.

$( window ).load(function() {
  var employerStateSelector = 
              $("#registration_employer_state").select2("destroy");
  employerStateSelector.select2({
    placeholder: 'Select a State...'
  });
});

Ce problème s'est développé dans une application Rails

keaplogik
la source
4

J'ai également eu la même erreur lors de l'utilisation d'ajax avec une zone de texte, puis je le résolve en supprimant la classe select2 de la zone de texte et en configurant select2 par id comme:

$(function(){
  $("#input-select2").select2();
});
Hoàng Nghĩa
la source
3

Il semble que votre sélecteur retourne un élément indéfini (donc undefined errorest retourné)

Dans le cas où l'élément existe vraiment, vous appelez select2 sur un inputélément sans rien fournir à select2, d'où il doit récupérer les données. Typiquement, on appelle .select2({data: [{id:"firstid", text:"firsttext"}]).

Koppor
la source
2

J'ai également eu la même erreur lors de l'utilisation d'ajax.

Si vous utilisez ajax pour rendre les formulaires avec select2, la classe input_html doit être différente de celles NON rendues à l'aide d'ajax. Je ne sais pas trop pourquoi cela fonctionne de cette façon.

mfamador
la source
Vous voulez dire, "<input type = 'hidden' class = 'foo' ...." où si vous avez plusieurs select2, ils ne peuvent pas tous être 'foo'? Cela n'a pas fonctionné pour moi.
dethSwatch
1
if (typeof(opts.query) !== "function") {
    throw "query function not defined for Select2 " + opts.element.attr("id");
}

Ceci est lancé car la requête n'existe pas dans les options. En interne, il y a un contrôle maintenu qui nécessite l'un des éléments suivants pour les paramètres

  • Ajax
  • Mots clés
  • Les données
  • requete

Il vous suffit donc de fournir l'une de ces 4 options pour select2 et cela devrait fonctionner comme prévu.

Sahil Jain
la source
0

J'ai eu la même erreur. J'utilise select2-3.5.2

C'était mon code qui avait une erreur

    $('#carstatus-select').select2().val([1,2])

Le code ci-dessous a résolu le problème.

    $('#carstatus-select').val([1,2]);
Jyo Reddy
la source
J'utiliserais $ ('# carstatus-select'). Select2 ("val", [1,2]); comme mention dans la documentation
hakuna1811
0

J'ai une application Web compliquée et je ne pouvais pas comprendre exactement pourquoi cette erreur était générée. Cela provoquait l'abandon du JavaScript lorsqu'il était lancé.

Dans select2.js j'ai changé:

        if (typeof(opts.query) !== "function") {
            throw "query function not defined for Select2 " + opts.element.attr("id");
        }

à:

        if (typeof(opts.query) !== "function") {
            console.error("query function not defined for Select2 " + opts.element.attr("id"));
        }

Maintenant, tout semble fonctionner correctement, mais il enregistre toujours une erreur au cas où je voudrais essayer de comprendre ce qui exactement dans mon code est à l'origine de l'erreur. Mais pour l'instant, c'est une solution assez bonne pour moi.

Luke Wenke
la source
-2

utilisation :

try {
    $("#input-select2").select2();
}
catch(err) {

}
Mahdi Bagheri
la source
cela ne fera que masquer l'erreur, pas la réparer. Ce n'est pas une solution dans la grande majorité des cas
Ramses