"Issues with Angular ng-show Functionality on Internet Explorer Versions 7 and

Question

"Issues with Angular ng-show Functionality on Internet Explorer Versions 7 and

I'm currently working on a feature where I need to show or hide two divs conditionally using ng-show based on the completion of an AJAX call. The layout for this includes:

<div id="div1" ng-show="!loadingData">
   <!--Some markup here-->
</div>
<div id="loadingMessage" ng-show="loadingData">
   Loading...
</div>

The function responsible for triggering this change is as follows:

$scope.loadingData=true;

var promise = dao.doAjaxGet("url");

promise.then(function(data){
  //Hide loading message
  $scope.loadingData=false;
});

Although everything works perfectly in Chrome, Safari, and Firefox, we are encountering issues with IE7 and IE8. In these versions, the loading message remains hidden and div1 stays visible regardless of the status of the AJAX call. Any suggestions on how to resolve this problem?

css ajax internet-explorer-8 internet-explorer-7 angularjs

Answer 1

Answer №1

Remove any instances of console.log from your controller as it may have only been useful for debugging in older browsers like IE8, particularly with functions such as ng-hide.

Answer 2

Remove any instances of console.log from your controller as it may have only been useful for debugging in older browsers like IE8, particularly with functions such as ng-hide.

Answer 3

Answer №2

It appears that the issue is caused by caching, particularly in Chrome and IE. After the first ajax call, both browsers tend to cache the data which can lead to problems. I was able to solve this issue in Chrome by adding cache:false to the ajax call settings, however, this solution did not work in IE. Any additional insights on this matter would be greatly appreciated.

Answer 4

It appears that the issue is caused by caching, particularly in Chrome and IE. After the first ajax call, both browsers tend to cache the data which can lead to problems. I was able to solve this issue in Chrome by adding cache:false to the ajax call settings, however, this solution did not work in IE. Any additional insights on this matter would be greatly appreciated.

Answer 5

Answer №3

Check out this functional Angular ie7 template. It uses an older version of Angular, but it still gets the job done.

My HTML File https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css'>

<!--[if lte IE 8]>
    <script type="text/javascript>
        // IE7 fix for missing console
        if (!window.console) {
            var console = {
                log: function() {},
                warn: function() {},
                error: function() {},
                time: function() {},
                timeEnd: function() {}
            }
        }
    </script>

    <script src="https://cdn.jsdelivr.net/json2/0.2/json2.js"></script>
<![endif]-->
<!--[if lte IE 9]>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/es5.shim/4.5.7/es5-shim.js"></script>
<![endif]-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/angularjs/1.1.5/angular.js"></script>

<script>
    /**
   * Main AngularJS Web Application
   */
    var app = angular.module('myapp', []);
    app.controller('MyPageCtrl', pageController);

    function pageController($scope) {

        $scope.languages = [
            { 'Id': 1, 'Name': 'French' },
            { 'Id': 1, 'Name': 'German' },
        ];
    };

</script>
</head>
 <body ng-controller="MyPageCtrl">

<div class="col-xs-12">
    <select name="languagesDropDown" id="languagesDropDown" class="form-control" style="width: 200px;">
        <option ng-repeat="language in languages" value="{{language.Id}}">{{language.Name}}</option>
    </select>
</div>

Answer 6

Check out this functional Angular ie7 template. It uses an older version of Angular, but it still gets the job done.

My HTML File https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css'>

<!--[if lte IE 8]>
    <script type="text/javascript>
        // IE7 fix for missing console
        if (!window.console) {
            var console = {
                log: function() {},
                warn: function() {},
                error: function() {},
                time: function() {},
                timeEnd: function() {}
            }
        }
    </script>

    <script src="https://cdn.jsdelivr.net/json2/0.2/json2.js"></script>
<![endif]-->
<!--[if lte IE 9]>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/es5.shim/4.5.7/es5-shim.js"></script>
<![endif]-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/angularjs/1.1.5/angular.js"></script>

<script>
    /**
   * Main AngularJS Web Application
   */
    var app = angular.module('myapp', []);
    app.controller('MyPageCtrl', pageController);

    function pageController($scope) {

        $scope.languages = [
            { 'Id': 1, 'Name': 'French' },
            { 'Id': 1, 'Name': 'German' },
        ];
    };

</script>
</head>
 <body ng-controller="MyPageCtrl">

<div class="col-xs-12">
    <select name="languagesDropDown" id="languagesDropDown" class="form-control" style="width: 200px;">
        <option ng-repeat="language in languages" value="{{language.Id}}">{{language.Name}}</option>
    </select>
</div>

Answer 7

Answer №4

I encountered the same issue with ng-show not functioning properly in Internet Explorer.

The official ngShow AngularJS documentation addresses this problem and offers some solutions to resolve it.

(In case the link is no longer valid, I will include the text mentioned in that page)

When using ngShow or ngHide to toggle between elements, there may be a brief moment where both the element to show and the element to hide are visible.

This issue commonly occurs when the ngAnimate module is used without defined animations for ngShow / ngHide. Internet Explorer is particularly affected by this.

There are several ways to address this problem:
Turn off animations on the affected elements.

Consider using ngIf or ngSwitch instead of ngShow / ngHide.

Utilize the CSS selector ng-hide.ng-hide-animate to apply {display: none} or similar on the affected elements.
Employ
ng-class="{'ng-hide': expression}
as an alternative to ngShow / ngHide.
Create an animation specifically for the affected elements.

The suggestion of replacing ng-show with ng-if was effective for me. You might want to consider implementing this approach in your scenario -

<div id="div1" ng-if="!loadingData">
  <!--Some markup here-->
</div>
<div id="loadingMessage" ng-if="loadingData">
  Loading...
</div>

Answer 8

I encountered the same issue with ng-show not functioning properly in Internet Explorer.

The official ngShow AngularJS documentation addresses this problem and offers some solutions to resolve it.

(In case the link is no longer valid, I will include the text mentioned in that page)

When using ngShow or ngHide to toggle between elements, there may be a brief moment where both the element to show and the element to hide are visible.

This issue commonly occurs when the ngAnimate module is used without defined animations for ngShow / ngHide. Internet Explorer is particularly affected by this.

There are several ways to address this problem:
Turn off animations on the affected elements.

Consider using ngIf or ngSwitch instead of ngShow / ngHide.

Utilize the CSS selector ng-hide.ng-hide-animate to apply {display: none} or similar on the affected elements.
Employ
ng-class="{'ng-hide': expression}
as an alternative to ngShow / ngHide.
Create an animation specifically for the affected elements.

The suggestion of replacing ng-show with ng-if was effective for me. You might want to consider implementing this approach in your scenario -

<div id="div1" ng-if="!loadingData">
  <!--Some markup here-->
</div>
<div id="loadingMessage" ng-if="loadingData">
  Loading...
</div>

"Issues with Angular ng-show Functionality on Internet Explorer Versions 7 and

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to maintain row highlight in jQuery datatable even after it is reloaded

The ajax call is not yielding a successful response, consistently redirecting to the error function

Utilizing Jquery queue for running a series of Ajax requests; imperative to clear the queue in case of a failed request

The <h> tag gains height on its own accord

Using RMarkdown to incorporate custom CSS styling in your documents

CORS error: The 'Access-Control-Allow-Origin' header is missing

Having trouble incorporating autocomplete search results into an HTML table using Jquery, Ajax, and JSP

Include the HTTP header in a GET request for an HTML hyperlink

Aligning two items to the right along the vertical axis, even if they have different heights (Bootstrap

Passing a value via jQuery Ajax on the same PHP page

Create a bespoke AngularJS directive for a customized Twitter Bootstrap modal

What is the best way to get this paragraph element to rise upwards?

Ways to decrease the speed of the ionic1 Slide box Autoplay?

"Adding dots" in a slideshow using HTML, CSS, and JS

Having trouble with the ng-grid editCell functionality?

Align Bootstrap navigation bar items at the center horizontally

Navigating through a HTML email Listserv with a click event scrolling feature

What is preventing me from integrating angular-cookies into my application?

The font color fails to change when hovering over

Waiting for Ajax Response in ExtJS Version 3.4.0