Encountered an issue with md-autocomplete: Attempting to read property 'success' of an undefined element

Question

Encountered an issue with md-autocomplete: Attempting to read property 'success' of an undefined element

I encountered an issue while using Material Angular framework and md-autocomplete. The error message I receive is: Cannot read property 'success' of undefined. Below is the snippet of my code:

/*My app.js*/
var app = angular.module('app', ['ngRoute', 'ngMaterial']); //, 'ui.utils.masks'

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', { controller: 'DemoCtrl', templateUrl: 'view/paginaTeste.html' })
        .otherwise({ templateUrl: '404.html' });
});

app.run(function ($rootScope) {
    $rootScope.urlServico = 'http://localhost:58999/';
});


/*My controller*/
(function () {
    'use strict';
    angular
        .module('app')
        .controller('DemoCtrl', DemoCtrl)
        .config(function ($mdThemingProvider) {
            $mdThemingProvider.theme('default')
                .primaryPalette('blue');
        });;

    function DemoCtrl($timeout, $q) {
        var self = this;

        // list of `state` value/display objects
        self.states = loadAll();
        self.selectedItem = null;
        self.searchText = null;
        self.querySearch = querySearch;

        // ******************************
        // Internal methods
        // ******************************

        /**
         * Search for states... use $timeout to simulate
         * remote dataservice call.
         */
        function querySearch(query) {
            var results = query ? self.states.filter(createFilterFor(query)) : [];
            return results;
        }

        /**
         * Build `states` list of key/value pairs
         */
        function loadAll() {
            var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
              Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
              Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
              Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
              North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
              South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
              Wisconsin, Wyoming';

            return allStates.split(/, +/g).map(function (state) {
                return {
                    value: state.toLowerCase(),
                    display: state
                };
            });
        }

        /**
         * Create filter function for a query string
         */
        function createFilterFor(query) {
            var lowercaseQuery = angular.lowercase(query);

            return function filterFn(state) {
                return (state.value.indexOf(lowercaseQuery) === 0);
            };

        }
    }
})();

<!DOCTYPE html>
<html ng-app="app">
<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
    <meta name="viewport" content="initial-scale=1" />
</head>
<body>

    <div layout="column" ng-view></div>

    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script>

    <script src="/view/app.js"></script>

    <script src="/view/controller/DemoCtrl.js"></script>
</body>
</html>

EDIT This is my page paginaTeste.html:

<md-content>
<form name="frmTeste">
    <section>
        <md-subheader class="md-primary">Novo Teste</md-subheader>
        <md-list layout="column" layout-padding>
            <md-item>
                <md-item-content>
                    <p>The following example demonstrates floating labels being used as a normal form element.</p>
                    <div layout-gt-sm="row">
                        <md-input-container flex>
                            <label>Name</label>
                            <input type="text" />
                        </md-input-container>
                        <md-autocomplete flex
                                         ng-disabled="DemoCtrl.isDisabled"
                                         md-no-cache="DemoCtrl.noCache"
                                         md-search-text="DemoCtrl.searchText"
                                         md-items="item in DemoCtrl.querySearch(ctrl.searchText)"
                                         md-item-text="item.display"
                                         md-floating-label="Favorite state">
                            <span md-highlight-text="DemoCtrl.searchText">{{item.display}}</span>
                        </md-autocomplete>
                    </div>
                </md-item-content>
            </md-item>
        </md-list>
    </section>
</form>

I am seeking assistance with debugging my code as I am unsure about what's causing the issue. Any help would be greatly appreciated. PS: Please excuse any errors in my English, thank you.

Thank you.

javascript angularjs

Answer 1

Answer №1

It appears that there may be an issue with the md-items binding in your code. Consider updating it to:

  md-items="item in DemoCtrl.querySearch(DemoCtrl.searchText)"

Additionally, it seems like you are referencing DemoCtrl.* without utilizing the Controller As syntax. You can alleviate this by modifying your route definition to:

{ controller: 'DemoCtrl', controllerAs: 'DemoCtrl', templateUrl: 'view/paginaTeste.html' }

Answer 2

It appears that there may be an issue with the md-items binding in your code. Consider updating it to:

  md-items="item in DemoCtrl.querySearch(DemoCtrl.searchText)"

Additionally, it seems like you are referencing DemoCtrl.* without utilizing the Controller As syntax. You can alleviate this by modifying your route definition to:

{ controller: 'DemoCtrl', controllerAs: 'DemoCtrl', templateUrl: 'view/paginaTeste.html' }

Answer 3

Answer №2

I successfully resolved my issue by correcting the variable name. Here is a snippet of my updated code:

Index

<!DOCTYPE html>

<div layout="column" ng-view></div>

<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>

<script src="/view/app.js"></script>

<!--<script src="/view/angular-material.min.js"></script>-->


<script src="/view/demo-auto-complete/controller/DemoCtrl.js"></script>

App.js

var app = angular.module('app', ['ngRoute', 'ngMaterial', 'ngMessages']);

    app.config(function ($routeProvider) {
        $routeProvider
            .when('/', { controller: 'DemoCtrl', controllerAs: 'self', templateUrl: 'view/demo-auto-complete/paginaTeste.html' })
            .otherwise({ templateUrl: '404.html' });
    });

    app.run(function ($rootScope) {
        $rootScope.urlServico = 'http://localhost:58999/';
    });

DemoCtrl.js - My controller

(function () {
    'use strict';
    angular
        .module('app')
        .controller('DemoCtrl', DemoCtrl)
        .config(function ($mdThemingProvider) {
            $mdThemingProvider.theme('default')
                .primaryPalette('blue');
        });;

    function DemoCtrl($timeout, $q) {
        var self = this;

        // list of `state` value/display objects
        self.states = loadAll();
        self.selectedItem = {
            display: 'Alabama',
            value: 'alabama'
        };
        self.searchText = null;
        self.querySearch = querySearch;
        self.clearValue = clearValue;
        self.save = save;
        self.myModel = '';

        function clearValue() {
            self.myModel = undefined;
        };
        function save() {
            alert('Form was valid!');
        };

        // ******************************
        // Internal methods
        // ******************************

        /**
         * Search for states... use $timeout to simulate
         * remote dataservice call.
         */
        function querySearch(query) {
            var results = query ? self.states.filter(createFilterFor(query)) : [];
            return results;
        }

        function findValues (term, obj) {
            var deferred = this.$q.defer();
            deferred.resolve( this.$filter( 'filter' )( obj, term ) );
            return deferred.promise;
        }

        /**
         * Build `states` list of key/value pairs
         */
        function loadAll() {
            var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
              Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
              Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
              Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
              North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
              South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
              Wisconsin, Wyoming';

            return allStates.split(/, +/g).map(function (state) {
                return {
                    value: state.toLowerCase(),
                    display: state
                };
            });
        }

        /**
         * Create filter function for a query string
         */
        function createFilterFor(query) {
            var lowercaseQuery = angular.lowercase(query);

            return function filterFn(state) {
                return (state.value.indexOf(lowercaseQuery) === 0);
            };

        }
    }
})();

paginaTeste.html - My View

<md-content>
    <form ng-submit="$event.preventDefault()" name="frmParceiroNegociosEndereco">
        <section>
            <md-subheader class="md-primary">Novo Endereço</md-subheader>
            <md-list layout="column" layout-padding>
                <md-item>
                    <md-item-content>
                        <p>The following example demonstrates asdasdasda floating labels being used as a normal form element.</p>
                        <div layout-gt-sm="row">
                            <md-input-container flex>
                                <label>Name</label>
                                <input type="text" />
                            </md-input-container>
                        <md-autocomplete flex
                                             md-input-name="autocompleteField"
                                             md-no-cache="self.noCache"
                                             md-selected-item="self.selectedItem"
                                             md-search-text="self.searchText"
                                             md-items="item in self.querySearch(self.searchText)"
                                             md-item-text="item.display"
                                             md-floating-label="Favorite state">
                                <md-item-template>
                                    <span md-highlight-text="self.searchText">{{item.display}}</span>
                                </md-item-template>
                            </md-autocomplete>
                        </div>
                        <h1>Teste</h1>
                    </md-item-content>
                </md-item>
            </md-list>
        </section>
    </form>
</md-content>

I am glad I could assist someone, and I appreciate the help received from others.

Answer 4

I successfully resolved my issue by correcting the variable name. Here is a snippet of my updated code:

Index

<!DOCTYPE html>

<div layout="column" ng-view></div>

<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>

<script src="/view/app.js"></script>

<!--<script src="/view/angular-material.min.js"></script>-->


<script src="/view/demo-auto-complete/controller/DemoCtrl.js"></script>

App.js

var app = angular.module('app', ['ngRoute', 'ngMaterial', 'ngMessages']);

    app.config(function ($routeProvider) {
        $routeProvider
            .when('/', { controller: 'DemoCtrl', controllerAs: 'self', templateUrl: 'view/demo-auto-complete/paginaTeste.html' })
            .otherwise({ templateUrl: '404.html' });
    });

    app.run(function ($rootScope) {
        $rootScope.urlServico = 'http://localhost:58999/';
    });

DemoCtrl.js - My controller

(function () {
    'use strict';
    angular
        .module('app')
        .controller('DemoCtrl', DemoCtrl)
        .config(function ($mdThemingProvider) {
            $mdThemingProvider.theme('default')
                .primaryPalette('blue');
        });;

    function DemoCtrl($timeout, $q) {
        var self = this;

        // list of `state` value/display objects
        self.states = loadAll();
        self.selectedItem = {
            display: 'Alabama',
            value: 'alabama'
        };
        self.searchText = null;
        self.querySearch = querySearch;
        self.clearValue = clearValue;
        self.save = save;
        self.myModel = '';

        function clearValue() {
            self.myModel = undefined;
        };
        function save() {
            alert('Form was valid!');
        };

        // ******************************
        // Internal methods
        // ******************************

        /**
         * Search for states... use $timeout to simulate
         * remote dataservice call.
         */
        function querySearch(query) {
            var results = query ? self.states.filter(createFilterFor(query)) : [];
            return results;
        }

        function findValues (term, obj) {
            var deferred = this.$q.defer();
            deferred.resolve( this.$filter( 'filter' )( obj, term ) );
            return deferred.promise;
        }

        /**
         * Build `states` list of key/value pairs
         */
        function loadAll() {
            var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
              Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
              Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
              Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
              North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
              South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
              Wisconsin, Wyoming';

            return allStates.split(/, +/g).map(function (state) {
                return {
                    value: state.toLowerCase(),
                    display: state
                };
            });
        }

        /**
         * Create filter function for a query string
         */
        function createFilterFor(query) {
            var lowercaseQuery = angular.lowercase(query);

            return function filterFn(state) {
                return (state.value.indexOf(lowercaseQuery) === 0);
            };

        }
    }
})();

paginaTeste.html - My View

<md-content>
    <form ng-submit="$event.preventDefault()" name="frmParceiroNegociosEndereco">
        <section>
            <md-subheader class="md-primary">Novo Endereço</md-subheader>
            <md-list layout="column" layout-padding>
                <md-item>
                    <md-item-content>
                        <p>The following example demonstrates asdasdasda floating labels being used as a normal form element.</p>
                        <div layout-gt-sm="row">
                            <md-input-container flex>
                                <label>Name</label>
                                <input type="text" />
                            </md-input-container>
                        <md-autocomplete flex
                                             md-input-name="autocompleteField"
                                             md-no-cache="self.noCache"
                                             md-selected-item="self.selectedItem"
                                             md-search-text="self.searchText"
                                             md-items="item in self.querySearch(self.searchText)"
                                             md-item-text="item.display"
                                             md-floating-label="Favorite state">
                                <md-item-template>
                                    <span md-highlight-text="self.searchText">{{item.display}}</span>
                                </md-item-template>
                            </md-autocomplete>
                        </div>
                        <h1>Teste</h1>
                    </md-item-content>
                </md-item>
            </md-list>
        </section>
    </form>
</md-content>

I am glad I could assist someone, and I appreciate the help received from others.

Encountered an issue with md-autocomplete: Attempting to read property 'success' of an undefined element

Answer №1

Answer №2

Similar questions

How do useCases interact with each other within Clean Architecture principles in NodeJS?

"Enhance Your Website with Slider Swipe Effects using CSS3 and

Content formatted with a gap

I used npm to install AngularJS and then included AngularJS in my application

Navigate through the Jquery slider by continuously scrolling to the right or simply clicking

The AngularJS ngResource factory returns a function instead of a promise, providing a unique method for

Error: A SyntaxError was encountered due to a missing closing parenthesis after an argument list while writing JavaScript within PHP code

Troubleshooting: Jquery Toggle Issue When Used with Adjacent Div Element

Issue with Jquery .on() causing toggleClass function to not trigger

Generating numerous circular elements for each item in the dataset using D3

Vue.js 2 components encountering issue with parent-child relationship due to undefined item

Is it necessary for each React component to have its own individual stylesheet?

JavaScript loop to target a specific item

Maintain parental visibility with children when navigating to a different page

The event.target.x attribute on the <i /> tag element

How can we implement a select-all and deselect-all feature in Vue Element UI for a multi-select with filtering capability?

How to use jQuery to dynamically add a variable to a request in Laravel 5.2

Adjust the size of an iFrame's content according to the dimensions of the iFrame

Dynamic reloading of a div with form data using jQuery's AJAX functionality

Is it possible for me to transform this code into a useful helper function?