web-dev-qa-db-fra.com

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

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

"query function not defined for Select2 undefined error"
javascriptruntime-errorjquery-select2
114
Daniel Morris

Couvert dans ce fil de groupe Google

Le problème était dû au supplément supplémentaire ajouté par le select2. Select2 avait ajouté un nouveau div avec la classe "select2-container form-select" pour envelopper la sélection créée. Ainsi, la prochaine fois que j'ai chargé la fonction, l'erreur a été générée car select2 était associé à l'élément div. J'ai changé de sélecteur ...

Le préfixe select2 identifiant css avec le nom de balise spécifique "select":

$('select.form-select').select2();
222
Daniel Morris

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

14
Martin D

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 vous devriez utiliser le code dans ma réponse.

11
kappaallday

J'ai également eu ce problème, assurez-vous que vous n'initialisez pas le select2 deux fois. 

10
Pedro Dias

Pour moi, ce problème se résumait à définir le bon attribut data-ui-select2:

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


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

$scope.selectedProjectManager = {};

Si je supprime la propriété data sur $scope.projectManagers, j'obtiens cette erreur.

5
parliament

Ce problème se résumait à la façon dont je construisais ma boîte de sélection select2. Dans un fichier javascript, 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 de la seconde substitution 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 épanoui au sein d'une application Rails

5
keaplogik

J'ai également eu la même erreur lors de l'utilisation d'ajax avec une zone de texte, puis je le résoudre par remove class select2 of textbox et le programme d'installation select2 par id comme

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

Également eu la même erreur lorsque vous utilisez ajax.

Si vous utilisez ajax pour rendre les formulaires avec select2, la classe input_html doit être différente de celles NON rendues avec ajax. Vous ne savez pas très bien pourquoi cela fonctionne de cette façon.

2
mfamador

Il semble que votre sélecteur retourne un élément indéfini (par conséquent, undefined error est renvoyé)

Au cas où l'élément existe réellement, vous appelez select2 sur un élément input sans rien fournir à select2, d'où il doit extraire les données. Généralement, on appelle .select2({data: [{id:"firstid", text:"firsttext"}]).

2
koppor

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

C'était mon code qui avait une erreur

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

Le code ci-dessous corrige le problème.

    $('#carstatus-select').val([1,2]);
0
Jyotheeswar Reddy
if (typeof(opts.query) !== "function") {
    throw "query function not defined for Select2 " + opts.element.attr("id");
}

Ceci est levé parce que la requête n'existe pas dans les options. En interne, une vérification est maintenue, qui nécessite l'une des opérations suivantes pour les paramètres.

  • ajax
  • mots clés
  • les données
  • question

Il vous suffit donc de fournir l’une de ces 4 options pour sélectionner2 et cela devrait fonctionner normalement.

0
Sahil Jain

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'avortement 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 le système enregistre toujours une erreur au cas où je voudrais essayer de déterminer ce qui, dans mon code, est à l'origine de l'erreur. Mais pour l’instant, c’est une bonne solution pour moi.

0
Luke Wenke