tête de démarrage Twitter (méthode 'toLowerCase' de non l'environ)
J'essaie d'utiliser Twitter bootstrap pour obtenir les fabricants de ma base de données.
Étant donné que Twitter bootstrap typeahead ne prend pas en charge les appels ajax, j'utilise ce fork:
https://Gist.github.com/1866577
Dans cette page se trouve ce comment qui explique comment faire exactement ce que je veux faire. Le problème est que lorsque je lance mon code, je continue à obtenir:
Uncaught TypeError: Impossible d'appeler la méthode 'toLowerCase' de non définie
J'ai cherché sur Google et suis venu essayer de changer mon fichier jQuery en utilisant à la fois les fichiers minified et non minified, ainsi que celui hébergé sur google code et j'ai continué à avoir la même erreur.
Mon code est actuellement le suivant:
$('#manufacturer').typeahead({
source: function(typeahead, query){
$.ajax({
url: window.location.Origin+"/bows/get_manufacturers.json",
type: "POST",
data: "",
dataType: "JSON",
async: false,
success: function(results){
var manufacturers = new Array;
$.map(results.data.manufacturers, function(data, item){
var group;
group = {
manufacturer_id: data.Manufacturer.id,
manufacturer: data.Manufacturer.manufacturer
};
manufacturers.Push(group);
});
typeahead.process(manufacturers);
}
});
},
property: 'name',
items:11,
onselect: function (obj) {
}
});
sur le champ url j'ai ajouté le
window.location.Origin
pour éviter tout problème comme déjà discuté sur une autre question
Également avant, j’utilisais $.each() avant de décider d’utiliser $.map() comme recommandé Tomislav Markovski dans un question similaire
Quelqu'un a une idée de pourquoi je continue à avoir ce problème?!
Je vous remercie
Typeahead attend une liste de chaîne en tant que source
$('#manufacturer').typeahead({
source : ["item 1", "item 2", "item 3", "item 4"]
})
Dans votre cas, vous voulez l'utiliser avec une liste d'objets. De cette façon, vous devrez faire quelques changements pour que cela fonctionne
Cela devrait fonctionner:
$('#manufacturer').typeahead({
source: function(typeahead, query){
$.ajax({
url: window.location.Origin+"/bows/get_manufacturers.json",
type: "POST",
data: "",
dataType: "JSON",
async: false,
success: function(results){
var manufacturers = new Array;
$.map(results.data.manufacturers, function(data){
var group;
group = {
manufacturer_id: data.Manufacturer.id,
manufacturer: data.Manufacturer.manufacturer,
toString: function () {
return JSON.stringify(this);
},
toLowerCase: function () {
return this.manufacturer.toLowerCase();
},
indexOf: function (string) {
return String.prototype.indexOf.apply(this.manufacturer, arguments);
},
replace: function (string) {
return String.prototype.replace.apply(this.manufacturer, arguments);
}
};
manufacturers.Push(group);
});
typeahead.process(manufacturers);
}
});
},
property: 'manufacturer',
items:11,
onselect: function (obj) {
var obj = JSON.parse(obj);
// You still can use the manufacturer_id here
console.log(obj.manufacturer_id);
return obj.manufacturer;
}
});
Dans mon cas, j'avais exactement cette erreur et il s'est avéré que la version de Bootstrap que j'utilisais (2.0.4) ne permettait pas de passer une fonction au paramètre source.
La mise à niveau vers Bootstrap 2.1.1 a résolu le problème.
REGARD ACTUALISÉ/RÉVISÉ AT LE PROBLÈME: L'erreur que vous avez mentionnée "Impossible d'appeler la méthode 'toLowerCase' of indéfinie" s'est produite lorsque j'ai utilisé l'extension Typeahead d'origine dans le bootstrap non prise en charge. AJAX. (comme vous l'avez constaté) Êtes-vous sûr que l'extension de tête de texte d'origine ne se charge pas, au lieu de celle modifiée?
J'ai été avec succès en utilisant ce Gist of Typeahead c'est une légère variation par rapport à celui que vous mentionnez. Une fois que je suis passé à ce Gist et que j'ai confirmé que les données d'entrée étaient bonnes (testant que l'entrée était un tableau de chaînes dans un objet JS), le problème a disparu.
J'espère que cela t'aides
Réponse originale:
L'erreur se produit parce que la valeur transmise à la fonction typeahead matcher est indéfinie. C’est un effet secondaire du problème réel qui se situe quelque part entre votre entrée et cette fonction d’ajustement. Je soupçonne que le tableau «fabricants» a un problème. Testez-le d'abord pour vérifier que vous avez un tableau valide.
// It appears your array constructor is missing ()
// try the following in your binding code:
var manufacturers = new Array();
Voici ce que j'utilise pour lier l'entrée à typeahead. J'ai confirmé que cela fonctionne avec votre fourche modifiée.
Mon HTML:
<!-- Load bootstrap styles -->
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
...
<input type="text" class="typeahead" name="Category" id="Category" maxlength="100" value="" />
...
<!-- and load jQuery and bootstrap with modified typeahead AJAX code -->
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="bootstrap-modified-typeahead.js" type="text/javascript"></script>
Mon code JavaScript contraignant:
// Matches the desired text input ID in the HTML
var $TypeaheadInput = $("#Category");
// Modify this path to your JSON source URL
// this source should return a JSON string array like the following:
// string[] result = {"test", "test2", "test3", "test4"}
var JsonProviderUrl = "../CategorySearch";
// Bind the input to the typeahead extension
$TypeaheadInput.typeahead({
source: function (typeahead, query) {
return $.post(JsonProviderUrl, { query: query }, function (data) {
return typeahead.process(data);
});
}
});
Dans mon cas, j'avais des valeurs NULL dans mon tableau source qui causait cette erreur.
Exemple élaboré:
source : ["item 1", "item 2", null, "item 4"]
Avez-vous essayé d’utiliser des variables de mappage comme l’exemple ci-dessous, vous devez l’utiliser lorsque vous avez plus d’une propriété dans votre objet;
source: function (query, process) {
states = [];
map = {};
var data = [
{"stateCode": "CA", "stateName": "California"},
{"stateCode": "AZ", "stateName": "Arizona"},
{"stateCode": "NY", "stateName": "New York"},
{"stateCode": "NV", "stateName": "Nevada"},
{"stateCode": "OH", "stateName": "Ohio"}
];
$.each(data, function (i, state) {
map[state.stateName] = state;
states.Push(state.stateName);
});
process(states);
}
Vos objets fabricant n'ont pas de propriété "name", vous devriez changer
property: 'name',
à
property: 'manufacturer',
Je suis tombé sur cette question il y a un moment. Je vous conseil de vérifier de nouveau la configuration dans laquelle vous incluez les bibliothèques typeahead (via main.js, app.js ou config.js).
Sinon, vous pouvez écraser la dernière version de Bootstrap dans votre bibliothèque d'applications.
Essayez ce code:
String.prototype.hashCode = function(){
var hash = 0;
if (this.length == 0) return hash;
for (i = 0; i < this.length; i++) {
char = this.charCodeAt(i);
hash = ((hash<<5)-hash)+char;
hash = hash & hash; // Convert to 32bit integer
}
return hash;
};
var map_manufacter, result_manufacters;
$('#manufacturer').typeahead({
source: function(typeahead, query){
$.ajax({
url: window.location.Origin+"/bows/get_manufacturers.json",
type: "POST",
data: "",
dataType: "JSON",
async: false,
success: function(results){
result_manufacter = [], map_manufacters = {};
$.each(results.data.manufacturers, function(item, data){
map_manufacters[data.Manufacturer.manufacturer.hashCode()] = data;
result_manufacters.Push(data.Manufacter.manufacter);
});
typeahead.process(result_manufacters);
}
});
},
property: 'name',
items:11,
onselect: function (obj) {
var hc = obj.hashCode();
console.log(map_manufacter[hc]);
}
});
J'ai résolu ce problème uniquement en mettant à jour le fichier bootstrap3-typeahead.min.js vers le fichier situé dans https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.min.js
Je pense que la plupart des gens peuvent résoudre ce problème.