Pytanie twitter bootstrap typeahead (metoda 'toLowerCase' z undefined)


Próbuję użyć twitter bootstrap, aby uzyskać producentów z mojego DB.

Ponieważ twitter bootstrap typeahead nie obsługuje wywołań ajax używam tego widelca:

https://gist.github.com/1866577

Na tej stronie jest to komentarz który wspomina, jak robić dokładnie to, co chcę robić. Problem polega na tym, że uruchomiam swój kod, który otrzymuję:

Uncaught TypeError: Nie można wywołać metody 'toLowerCase' z undefined

Przeszukałem go i przyjąłem próbę zmiany mojego pliku jquery na oba przy użyciu minified i non minified, a także hostowane w google code i ciągle otrzymywałem ten sam błąd.

Mój kod jest obecnie następujący:

$('#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) {

    }
});

w polu adresu URL dodałem

window.location.origin

aby uniknąć problemów, które omówiono już w innym pytaniu

Również przed użyciem $.each() a następnie zdecydował się użyć $.map() jak zaleca Tomislav Markovski w podobne pytanie

Ktoś ma pojęcie, dlaczego ciągle mam ten problem ?!

Dziękuję Ci


21
2018-06-27 22:26


pochodzenie


Czy próbowałeś debugować kod JavaScript za pomocą Firebug lub IE F12 Developer Tools, aby znaleźć dokładnie to, do czego próbuje zadzwonić toLowerCase()? - Cᴏʀʏ
@Cory przy użyciu narzędzia Google Chrome Inspect. Dostaję komunikat o błędzie w kodzie kodowym bootstrap twittera 1664 Odpowiednik linii 124 na widelec - mmoscosa
@mmoscosa w Chrome Narzędzia dla programistów Wiele błędów javascript zawiera listę z innymi błędami w środku, a jednym z tych błędów jest linia kodu, w której pojawia się ten błąd. Błąd jest związany z czymś w bootstrapie, ale tam, gdzie pojawia się błąd, znajduje się twój kod. - Man Personson


Odpowiedzi:


Typeahead oczekuje listy łańcuchów jako źródła

$('#manufacturer').typeahead({
    source : ["item 1", "item 2", "item 3", "item 4"]
})

W twoim przypadku chcesz go użyć z listą obiektów. W ten sposób będziesz musiał wprowadzić pewne zmiany, aby to zadziałało

Powinno to działać:

$('#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;
    }
});

9
2017-11-01 00:22



Działało po dwóch poprawkach. funkcja (nagłówek, zapytanie) zmieniona na (zapytanie, nagłówek). zamiast typeahead.process (producenci), dał typeahead (producenci); Popraw mnie, jeśli się mylę. - nizam.sp


W moim przypadku otrzymałem ten dokładny błąd i okazało się, że wersja Bootstrap, której użyłem (2.0.4) nie obsługuje przekazywania funkcji do source oprawa.

Aktualizacja do Bootstrap 2.1.1 naprawiła problem.


8
2017-09-17 03:35



Używam programu bootstrap v3.1.1 i mam do czynienia z tym samym problemem - Alexandre Bourlier


ZAKTUALIZOWANY / ZMIENIONY WYGLĄD W PROBLEMIE:  Błąd, o którym wspomniałeś "Nie mogę wywołać metody" doLowerCase "niezdefiniowanego" pojawił się, gdy użyłem oryginalnego rozszerzenia Typeahead w bootstrapie, które nie obsługuje AJAX. (jak już zauważyłeś) Czy jesteś pewien, że oryginalne rozszerzenie klucza nie ładuje się, zamiast zaktualizowanego?

Osiągnąłem sukces używając tego Gist of ahead to jest niewielka odmiana tej, o której wspomniałeś. Kiedy przełączyłem się na to GIST i potwierdziłem, że dane wejściowe były dobre (testowanie, że dane wejściowe były tablicą ciągów w obiekcie JS, problem zniknął.

Mam nadzieję że to pomoże


Oryginalna odpowiedź:

Przyczyną błędu jest to, że wartość przekazana do funkcji matematycznej typu "myślnik" jest niezdefiniowana. To tylko efekt uboczny rzeczywistego problemu, który pojawia się gdzieś pomiędzy wprowadzeniem a funkcją matchera. Podejrzewam, że tablica "producentów" ma problem. Sprawdź najpierw, czy masz poprawną tablicę.

// It appears your array constructor is missing ()
// try the following in your binding code:
var manufacturers = new Array();

Oto, czego używam do powiązania danych wejściowych z nagłówkiem. Potwierdziłem, że działa z twoim zmodyfikowanym widelcem.

Mój 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>

Mój wiążący kod JavaScript:

// 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);
        });
    }
});

6
2018-06-29 00:30



new Array jest poprawnym skrótem. JavaScript nie wymaga nawiasów, jeśli nie podajesz argumentów do konstruktora. - Dennis
Poprawiam się na Tablicy. Szukam czegoś, co spowodowałoby niezdefiniowanie danych ... Nie mam możliwości duplikowania określonego źródła danych, więc nie jestem pewien, czy jest jakaś inna niezgodność. Nie wierzę, że kod typu główki jest problemem, ponieważ działa on dla mnie. - Dan Sorensen
Rozwiązałem problem "Can not call method" toLowerCase "z niezdefiniowanym" problemem, bawiąc się kolejnością ładowania skryptów js (bootstrap, jquery i typeahed). - javanna


W moim przypadku miałem zerowe wartości w mojej tablicy źródłowej powodujące ten błąd.

Złożony przykład:

source : ["item 1", "item 2", null, "item 4"]

2
2018-03-24 04:33





Twoje obiekty producenta nie mają właściwości "nazwa", powinieneś to zmienić

property: 'name',

do

property: 'manufacturer',

1
2017-07-18 09:18





Czy próbowałeś użyć zmiennych mapujących, takich jak przykład poniżej, musisz użyć tego, gdy masz więcej niż jedną właściwość w swoim obiekcie;

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);
    }

1
2018-06-24 06:40





Natknąłem się na ten problem jakiś czas temu. Radzę ci ponownie sprawdzić konfigurację, w której się znajdujesz typeahead biblioteki (przez main.js, app.js lub config.js).

W przeciwnym razie możesz zastąpić najnowsza wersja Bootstrap do biblioteki aplikacji.


0
2018-04-15 14:26





Wypróbuj ten kod:

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]);
}

});


0
2017-09-09 00:03





Rozwiązałem ten problem tylko aktualizując plik bootstrap3-typeahead.min.js do pliku w https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.min.js

Myślę, że większość ludzi może rozwiązać ten problem.


0
2018-06-19 02:17