Error when using autocomplete

5 posts, 0 answers
  1. Randy
    Randy avatar
    9 posts
    Member since:
    Mar 2017

    Posted 02 Apr Link to this post

    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

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    285 posts

    Posted 03 Apr Link to this post

    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.
  3. Randy
    Randy avatar
    9 posts
    Member since:
    Mar 2017

    Posted 04 Apr in reply to nikolay.tsonev Link to this post

    I installed the example you gave.  It doesn't matter what  I type in the box I do not get any results back.  I tried upper and lowercase and a bunch of different combinations.

    Here is a screenshot to show you what I mean:

    https://goo.gl/ahjcrW

    -Randy

     

     

     

     

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 04 Apr Link to this post

    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
    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.
  5. Randy
    Randy avatar
    9 posts
    Member since:
    Mar 2017

    Posted 04 Apr in reply to Nikolay Iliev Link to this post

    I also needed to change:

        page.bindingContext = new viewModel.ViewModel(args)

    TO:

    page.bindingContext = new createViewModel.ViewModel(args)

    on line 32 in the sample app and the sample app started working.

    I totally missed the function name being different.

    Thanks for your help.  I will incorporate these changes into my main app and respond in the ticket.

Back to Top