This is a migrated thread and some comments may be shown as answers.

[Solved] Error when using autocomplete

4 Answers 173 Views

AutoCompleteTextView

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Randy asked on 03 Apr 2017, 12:14 AM

Hello,

When I use the Vanilla JS example on this page: http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/AutoCompleteTextView/autocomplete-aync-data

I get the following error when I run the app and go to the page:

Error calling module function

TypeError: Cannot read property 'extend' of undefined
File: "/data/data/com.myapp.nativescript/files/internal/ts_helpers.js, line: 50, column: 12

StackTrace:
Frame: function:'__extends', file:'/data/data/com.myapp.nativescript/files/internal/ts_helpers.js', line: 50, column: 13
Frame: function:'', file:'file:///data/data/com.myapp.nativescript/files/app/views/autocomplete3/autocomplete3.js', line: 4, column: 5
Frame: function:'', file:'file:///data/data/com.myapp.nativescript/files/app/views/autocomplete3/autocomplete3.js', line: 38, column: 2
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'global.loadModule', file:'file:///data/data/com.myapp.nativescript/files/app/tns_modules/tns-core-modules/globals/globals.js', line: 29, column: 31
Frame: function:'resolvePageFromEntry', file:'file:///data/data/com.myapp.nativescript/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 79, column: 40
Frame: function:'Frame.navigate', file:'file:///data/data/com.myapp.nativescript/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 165, column: 20
Frame: function:'exports.autocomplete3', file:'file:///data/data/com.myapp.nativescript/files/app/views/login/login.js', line: 62, column: 25
Frame: function:'Observable.notify', file:'file:///data/data/com.myapp.nativescript/files/app/tns_modules/tns-core-modules/data/observable/observable.js', line: 149, column: 23
Frame: function:'Observable._emit', file:'file:///data/data/com.myapp.nativescript/files/app/tns_modules/tns-core-modules/data/observable/observable.js', line: 168, column: 18
Frame: function:'onClick', file:'file:///data/data/com.myapp.nativescript/files/app/tns_modules/tns-core-modules/ui/button/button.js', line: 35, column: 32

TypeError: Cannot read property 'extend' of undefined
File: "<unknown>, line: 1, column: 265

StackTrace:
Frame: function:'__extends', file:'/data/data/com.myapp.nativescript/files/internal/ts_helpers.js', line: 50, column: 13
Frame: function:'', file:'file:///data/data/com.myapp.nativescript/files/app/views/autocomplete3/autocomplete3.js', line: 4, column: 5
Frame: function:'', file:'file:///data/data/com.myapp.nativescript/files/app/views/autocomplete3/autocomplete3.js', line: 38, column: 2
Frame: function:'require', file:'', line: 1, column: 266
Frame: function:'global.loadModule', file:'file:///data/data/com.myapp.nativescript/files/app/tns_modules/tns-core-modules/globals/globals.js', line: 29, column: 31
Frame: function:'resolvePageFromEntry', file:'file:///data/data/com.myapp.nativescript/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 79, column: 40
Frame: function:'Frame.navigate', file:'file:///data/data/com.myapp.nativescript/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 165, column: 20
Frame: function:'exports.autocomplete3', file:'file:///data/data/com.myapp.nativescript/files/app/views/login/login.js', line: 62, column: 25
Frame: function:'Observable.notify', file:'file:///data/data/com.myapp.nativesc
ript/files/app/tns_modules/tns-core-modules/data/observable/observable.js', line: 149, column: 23
Frame: function:'Observable._emit', file:'file:///data/data/com.myapp.nativescript/files/app/tns_modules/tns-core-modules/data/observable/observable.js', line: 168, column: 18
Frame: function:'onClick', file:'file:///data/data/com.myapp.nativescript/files/app/tns_modules/tns-core-modules/ui/button/button.js', line: 35, column: 32

at com.tns.Runtime.callJSMethodNative(Native Method)
at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1197)
at com.tns.Runtime.callJSMethodImpl(Runtime.java:1061)
at com.tns.Runtime.callJSMethod(Runtime.java:1047)
at com.tns.Runtime.callJSMethod(Runtime.java:1028)
at com.tns.Runtime.callJSMethod(Runtime.java:1018)
at com.tns.gen.android.view.View_OnClickListener.onClick(android.view.View$OnClickListener.java)
at android.view.View.performClick(View.java:5609)
at android.view.View$PerformClick.run(View.java:22259)
at android.os.Handler.handleCallback(Handler.java:751)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6077)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:865)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:755)
{} +1

Here is my JS File:

var observableModule = require("data/observable");

var ViewModel = (function (_super) {
__extends(ViewModel, _super);
function ViewModel(args) {
_super.call(this);
this.countries = ["Australia", "Albania", "Austria", "Argentina", "Maldives", "Bulgaria", "Belgium", "Cyprus", "Italy", "Japan",
"Denmark", "Finland", "France", "Germany", "Greece", "Hungary", "Ireland",
"Latvia", "Luxembourg", "Macedonia", "Moldova", "Monaco", "Netherlands", "Norway",
"Poland", "Romania", "Russia", "Sweden", "Slovenia", "Slovakia", "Turkey", "Ukraine",
"Vatican City", "Chad", "China", "Chile"];
var page = args.object;
this.autocmp = page.getViewById("autocmp");
this.autocmp.loadSuggestionsAsync = function (text) {
var promise = new Promise(function (resolve, reject) {
http.getJSON("http://www.telerik.com/docs/default-source/ui-for-ios/airports.json?sfvrsn=2").then(function (r) {
var airportsCollection = r.airports;
var items = new Array();
for (var i = 0; i < airportsCollection.length; i++) {
items.push(new autocompleteModule.TokenModel(airportsCollection[i].FIELD2, null));
}
resolve(items);
}, function (e) {
reject();
});
});
return promise;
};
}
Object.defineProperty(ViewModel.prototype, "dataItems", {
get: function () {
return this._items;
},
enumerable: true,
configurable: true
});
return ViewModel;
}(observableModule.DependencyObservable));
exports.ViewModel = ViewModel;

Here is my xml file:

<Page:ExamplePage loaded="onPageLoaded" xmlns:navigation="navigation/example-page" xmlns:lv="nativescript-telerik-ui-pro/autocomplete" xmlns="http://www.nativescript.org/tns.xsd">
<StackLayout ios:backgroundColor="#CDCECE" padding="5">
<Label text="Select destination:"></Label>
<lv:RadAutoCompleteTextView id="autocmp" items="{{ dataItems }}" suggestMode="Suggest" displayMode="Plain" showCloseButton="true" closeButtonImageSrc="res://clear">

<lv:RadAutoCompleteTextView.suggestionView>
<lv:SuggestionView suggestionViewHeight="300">
<lv:SuggestionView.suggestionItemTemplate>
<StackLayout orientation="vertical" padding="10">
<Label text="{{ text }}"></Label>

</StackLayout>
</lv:SuggestionView.suggestionItemTemplate>
</lv:SuggestionView>
</lv:RadAutoCompleteTextView.suggestionView>
</lv:RadAutoCompleteTextView>
</StackLayout>
</Page:ExamplePage>

Here is tns info:

Component │ Current version │ Latest version │ Information │
│ nativescript │ 2.5.3 │ 2.5.3 │ Up to date │
│ tns-core-modules │ 2.5.2 │ 2.5.2 │ Up to date │
│ tns-android │ 2.5.0 │ 2.5.0 │ Up to date │
│ tns-ios │ 2.5.0 │ 2.5.0 │ Up to date │

Here is my version of nativescript-ui
"nativescript-telerik-ui-pro": "1.6.1",

Thank You,

Randy

4 Answers, 1 is accepted

answered on 03 Apr 2017, 09:02 AM

Archive.zip

Hi,

I reviewed your project, however, was unable to reproduce the same issue on my side.

In regard to that, I notice that in the ViewModel you have missed to required autocomplete and dependency-observable modules, which has been used in the below attached code and could lead to the reported problem.
For Example:
XML

<Page loaded="onPageLoaded" xmlns:lv="nativescript-telerik-ui-pro/autocomplete" xmlns="http://www.nativescript.org/tns.xsd">

<StackLayout ios:backgroundColor="#CDCECE" padding="5">

<Label text="Select destination:"></Label>

<lv:RadAutoCompleteTextView id="autocmp" items="{{ dataItems }}" suggestMode="Suggest" displayMode="Plain" showCloseButton="true" closeButtonImageSrc="res://clear">

<lv:RadAutoCompleteTextView.suggestionView>

<lv:SuggestionView suggestionViewHeight="300">

<lv:SuggestionView.suggestionItemTemplate>

<StackLayout orientation="vertical" padding="10">

<Label text="{{ text }}"></Label>

</StackLayout>

</lv:SuggestionView.suggestionItemTemplate>

</lv:SuggestionView>

</lv:RadAutoCompleteTextView.suggestionView>

</lv:RadAutoCompleteTextView>

</StackLayout>

</Page>

JavaScript

var autocompleteModule = require("nativescript-telerik-ui-pro/autocomplete");

var observableModule = require("ui/core/dependency-observable");

var http = require("http");

var ViewModel = (function (_super) {

__extends(ViewModel, _super);

function ViewModel(args) {

var _this = _super.call(this) || this;

_this.countries = ["Australia", "Albania", "Austria", "Argentina", "Maldives", "Bulgaria", "Belgium", "Cyprus", "Italy", "Japan",

"Denmark", "Finland", "France", "Germany", "Greece", "Hungary", "Ireland",

"Latvia", "Luxembourg", "Macedonia", "Moldova", "Monaco", "Netherlands", "Norway",

"Poland", "Romania", "Russia", "Sweden", "Slovenia", "Slovakia", "Turkey", "Ukraine",

"Vatican City", "Chad", "China", "Chile"];

var page = args.object;

_this.autocmp = page.getViewById("autocmp");

_this.autocmp.loadSuggestionsAsync = function (text) {

var promise = new Promise(function (resolve, reject) {

http.getJSON("http://www.telerik.com/docs/default-source/ui-for-ios/airports.json?sfvrsn=2").then(function (r) {

var airportsCollection = r.airports;

var items = new Array();

for (var i = 0; i < airportsCollection.length; i++) {

items.push(new autocompleteModule.TokenModel(airportsCollection[i].FIELD2, null));

}

resolve(items);

}, function (e) {

reject();

});

return promise;

};

return _this;

}

Object.defineProperty(ViewModel.prototype, "dataItems", {

get: function () {

return this._items;

},

enumerable: true,

configurable: true

});

return ViewModel;

}(observableModule.DependencyObservable));

exports.ViewModel = ViewModel;

For your convenience, I am attaching a sample project. Could you review it and make the needed changes for reproducing your scenario?

Regards,
nikolay.tsonev
Telerik by Progress

Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.

answered on 04 Apr 2017, 12:19 PM

Hi Randy,

I am closing this one so we can continue the conversation in the support ticket you have recently opened.
In fact, the solution to your issue with the suggestions not showing is already posted in the support ticket.

Note for everyone who would stumble upon this forum post: the solution is to rename the loaded event function in main-page.js to onPageLoaded (line 3 in the sample project)

Regards,
Nikolay Iliev
Telerik by Progress