1

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

}); 
})();
user2654788
  • 181
  • 2
  • 14
  • don't put your ng-app on the html element. put it on the body. and define your controller in the route definition. – Stevo Mar 09 '16 at 21:04
  • I made the change to body as you suggested but didn't quite understand what you mean by route definition. I added another div tag to refer to the controller inside body. It rendered fine on Chrome but not on IE. Back to the same error. Can you please post some code? Thanks – user2654788 Mar 09 '16 at 21:18
  • Can you post the full error stack trace? – gnerkus Mar 09 '16 at 21:44
  • I have posted the code in the main part of this thread. Kindly look into it. Now I get the exception in IE11 "Object doesn't support property or method 'querySelector'. Thanks – user2654788 Mar 09 '16 at 22:29
  • I can't use app.config(function($routeProvider)....) because Jersey will intercept the url and quietly reject it. The on-line tuts have plenty of routing examples. But they all are not using any web services in the back end. So I am eagerly looking forward to your help. – user2654788 Mar 10 '16 at 18:22
  • Tried this http://draptik.github.io/blog/2013/07/13/angularjs-example-using-a-java-restful-web-service/ Same issue. Works in Chrome but not IE11 – user2654788 Mar 10 '16 at 19:45
  • The blog link above works only with Angular 1.0.7. So no show. – user2654788 Mar 11 '16 at 00:22
  • This link http://stackoverflow.com/questions/6156639/x-ua-compatible-is-set-to-ie-edge-but-it-still-doesnt-stop-compatibility-mode has solved my problem. Thx – user2654788 Mar 11 '16 at 18:01

1 Answers1

3

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.

Fernando Echeverria
  • 7,706
  • 4
  • 17
  • 13