CODEWITHSUNDEEP
javascriptangularjs
user2654788
user2654788

Reputation: 293

AngularJs: Node is undefined

Using Angular JS on IE11 is causing "Node is undefined" error. This is the script.

<html ng-app="app" id="ng-app">
<head>
    <title>Show Fruit</title>
    <link href="include/styles.css" rel="stylesheet">
    <!-- Use Bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript" src="include/app.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=11" />  
</head>

<body ng-controller="HttpCtrl as app">
<div class="container">
    <div class="header">
        <h1 class="custom">Actors' Favorite Fruits</h1>
    </div>

    <div class="leftPanel">
        <div class="LeftPanelHeader">{{navTitle}}</div>
        <table class="side">
          <tr ng-repeat="f in fruits" ng-click="getActor(f.id)">
            <td class="side">{{f.name}}</td>
          </tr>
        </table>
    </div>
</div>
</body>
</html>

Works fine on Firefox and Chrome. Checked everywhere for IE11 related problems with Angular JS. Any help is appreciated.

Thankx

Complete index.jsp

<html >
<head>
    <title>Show Fruit</title>
    <link href="include/styles.css" rel="stylesheet">
    <!-- Use Bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-route.min.js"></script>

    <script type="text/javascript" src="include/app.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body ng-app="app">
<!-- <div ng-controller="HttpCtrl as app"> -->
<div class="container">
    <div class="header">
        <h1 class="custom">Actors' Favorite Fruits</h1>
    </div>

    <div class="leftPanel">
        <div class="LeftPanelHeader">{{navTitle}}</div>
        <table class="side">
          <tr ng-repeat="a in actors" ng-click="getActor(a.id)" >
            <td class="side">{{a.name}}</td>
          </tr>
        </table>
    </div>

    <div class="RightPanel">
        <image src="{{actor.image}}" width="220">
    </div>

    <div class="MainBody">
        <form>
            <table>
                <tr>
                    <td><input type="text" ng-model="searchName" size="30"></td>
                    <td><button type="button" ng-click="searchActor(searchName)" class="btn btn-primary btn-sm">
                    <span class="glyphicon glyphicon-search"></span> Search </button></td>
                    <td><button ng-click="addNew()" class="btn btn-primary btn-sm">
                    <span class="glyphicon glyphicon-plus"></span> Add New </button></td>
                    <td><button ng-click="resetSearch()"  class="btn btn-info btn-sm">
                    <span class="glyphicon glyphicon-refresh"></span> Reset Search </button></td>
                </tr>
            </table>
        </form>

        <form id="main">
            <table>
                <tr>
                    <td class="display_bold"><label for="actor.name">ID:</label></td>
                </tr>
                <tr>
                    <td class="display"><input id="id" type="text" ng-model="actor.id" size="4"></td>
                </tr>
                <tr>
                    <td class="display_bold"><label for="name">Fruit:</label></td>
                </tr>
                <tr>
                    <td class="display"><input type="text" ng-model="actor.name" size="30"></td>
                </tr>
                <tr>
                    <td class="display_bold"><label for="name">Favorite Fruit Of:</label></td>
                </tr>
                <tr>
                    <td class="display"><input type="text" ng-model="actor.birthName" size="40"></td>
                </tr>
                <tr>
                    <td class="display_bold"><label for="name">Birth Date:</label></td>
                </tr>
                <tr>
                    <td class="display"><input type="text" ng-model="actor.birthDate" size="20"></td>
                </tr>
                <tr>
                    <td class="display_bold"><label for="name">Email:</label></td>
                </tr>
                <tr>
                    <td class="display"><input type="text" ng-model="actor.email" size="30"></td>
                </tr>
                <tr>
                    <td class="display_bold"><label for="name">Image:</label></td>
                </tr>
                <tr>
                    <td class="display"><input type="text" ng-model="actor.image" size="80"></td>
                </tr>
                <tr>
                    <td class="display_bold"><label for="name">IsActive:</label></td>
                </tr>
                <tr>
                    <td class="display"><input type="text" ng-model="actor.active" size="10"></td>
                </tr>

                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>
                      <table>                           
                        <tr>
                          <td><button ng-click="saveActor(actor.id)" class="btn btn-success btn-sm" title="Save actor's details..." ng-disabled="isSaveDisabled">
                          <span class="glyphicon glyphicon-plus"></span> Save </button></td>
                          <td><button ng-click="deleteActor(actor.id)" class="btn btn-danger btn-sm" ng-disabled="isDeleteDisabled">
                          <span class="glyphicon glyphicon-trash"></span> Delete </button></td>       
                        </tr>
                      </table>
                    </td>
                </tr>

            </table>
        </form>
    </div>

    <div class="footer">AngularJS Demo </div>
</div>
</body>

Complete app.js

(function() {

var app = angular.module("app", ['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'index.jsp',
            controller: 'HttpCtrl'
        })
        .otherwise({
            redirectTo: '/homev'
        });
});

app.controller("HttpCtrl", function($scope, $http) {
    var app = this;
    $scope.navTitle = 'All Stars';
    $scope.operation="";
    $scope.isSaveDisabled = true;
    $scope.isDeleteDisabled = true;

    var response = $http.get('/AngularWs/rest/actors/');
    response.success(function(data) {
        $scope.actors = data;
        console.log("[main] # of items: " + data.length)
        angular.forEach(data, function(element) {
            console.log("[main] actor: " + element.name);
        });
    })
    response.error(function(data, status, headers, config) {
        alert("AJAX failed to get data, status=" + status);
    })


    $scope.getActor = function(id) {
        var response = $http.get('/AngularWs/rest/actors/'+ id );

        response.success(function(data) {
            $scope.actor = data;
            $scope.operation="update";
            $scope.isSaveDisabled = false;
            $scope.isDeleteDisabled = false;
        })

        response.error(function(data, status, headers, config) {
            alert("AJAX failed to get data, status=" + status);
        })
    };

    $scope.searchActor = function(name) {
        var app = this;
        $scope.navTitle = 'Search Criteria';

        var response = $http.get('/AngularWs/rest/actors/search/' + name);
        response.success(function(data) {
            $scope.actors = data;
            $scope.$apply();

            console.log("[searchActor] # of items: " + data.length)
            angular.forEach(data, function(element) {
                console.log("[searchActor] actor: " + element.name);
            });

        });

        response.error(function(data, status, headers, config) {
            alert("AJAX failed to get data, status=" + status);
        })
    };

    $scope.clearForm = function() {
        $scope.actor = {
                id:'',
                name:'',
                birthName:'',
                birthDate:'',
                email:'',
                image:'',
                active:''
        };
    }

    $scope.addNew = function(element) {
        $scope.operation="create";
        $scope.clearForm();
        main.id.focus();
        $scope.isSaveDisabled = false;
        $scope.isDeleteDisabled = true;
    }

    $scope.saveActor = function(id) {
        $scope.jsonObj = angular.toJson($scope.actor, false);
        console.log("[update] data: " + $scope.jsonObj);

        if ($scope.operation == "update") {
            var response = $http.put('/AngularWs/rest/actors/' + id, $scope.jsonObj);
            response.success(function(data, status, headers, config) {
                $scope.resetSearch();
            });

            response.error(function(data, status, headers, config) {
                alert("AJAX failed to get data, status=" + status);
            })
        } else if ($scope.operation == "create") {
            var response = $http.post('/AngularWs/rest/actors/add', $scope.jsonObj);
            response.success(function(data, status, headers, config) {
                $scope.resetSearch();
            });

            response.error(function(data, status, headers, config) {
                alert("AJAX failed to get data, status=" + status);
            })  
        }
    };

    $scope.deleteActor = function(id) {
        var response = $http.delete('/AngularWs/rest/actors/' + id);
        response.success(function(data, status, headers, config) {
            $scope.resetSearch();
        });

        response.error(function(data, status, headers, config) {
            alert("AJAX failed to get data, status=" + status);
        })
    };

    $scope.resetSearch = function(name) {
        var app = this;
        $scope.operation="";
        $scope.clearForm();
        $scope.isSaveDisabled = true;
        $scope.isDeleteDisabled = true;
        $scope.navTitle = 'All Stars';
        $scope.searchName = '';

        var response = $http.get('/AngularWs/rest/actors/');
        response.success(function(data) {
            $scope.actors = data;
            $scope.$apply();
            console.log("[resetSearch] # of items: " + data.length)
        });

        response.error(function(data, status, headers, config) {
            alert("AJAX failed to get data, status=" + status);
        })
    };

}); 
})();

Upvotes: 1

Views: 3521

Answers (1)

Fernando Echeverria
Fernando Echeverria

Reputation: 7896

I had the same problem and found a solution. In my case I was testing with my app running from a local (intranet) server, and IE11 was set to run intranet sites in "compatibility view" mode. Changing that made the problem go away.

To do this just click on the gear icon, and then select "Compatibility View settings" from the menu. In the dialog that comes up make sure "Display intranet sites in Compatibility View" is unchecked and close it.

Upvotes: 3

Related Questions