$state.go not working in Internet explorer

Question

I am using angular.js for small app. in signup page after user user fill the data and click on submit button one method is called from controller that make API call and then redirect user on next page. this is working fine in Chrome, Firefox and Microsoft Edge but it's not working in Internet Explorer.

Here is my signup.html

<form name="userRegForm"
      ng-submit="userRegForm.$valid && registerUser()">
    <md-input-container class="md-block">
        <label>Full name</label>
        <input required
               ng-model="user.fullName"
               name="fullName"
               id="fullName"
               autocomplete="off"
               ng-pattern="/^[a-zA-Z ]*$/">
        <div ng-messages="userRegForm.fullName.$error">
            <div ng-message="required">Full name is required.</div>
            <div ng-message="pattern">Please enter valid name</div>
        </div>
    </md-input-container>
    <md-input-container class="md-block">
        <label>Email</label>
        <input required name="emailId" ng-model="user.emailId" type="email" autocomplete="off">
        <div ng-messages="userRegForm.emailId.$error">
            <div ng-message="required">Email is required.</div>
            <div ng-message="email">Please enter valid Email.</div>
        </div>
    </md-input-container>
    <md-input-container class="md-block">
        <label>Password</label>
        <input required name="password" ng-model="user.password" type="password" autocomplete="off">
        <div ng-messages="userRegForm.password.$error">
            <div ng-message="required">Password is required.</div>
        </div>
    </md-input-container>
    <section id="non-padding" style="overflow: hidden">
        <div class='layout layout--middle'>
            <div class="layout__item xs-mb1 sm-text-right xs-text-right col-xs-4 sm-5of12 xs-6of12 sm-push7of12 sm-mb0 padding-right-0">
                <input placeholder="REGISTER" type="submit" class="button button button--primary"
                       value="SIGN UP">
            </div>
        </div>
    </section>
</form>

Here is my controller

$scope.registerUser = function () {
    apiUrl = "http://example.com/save_data";
    var userData = {
        role: 'CANDIDATE',
        fullName: $scope.user.fullName,
        emailId: $scope.user.emailId.toLowerCase(),
        password: $scope.user.password
    };

    webService.sendPostRequest(apiUrl, userData,
        function (response) {
            data = JSON.parse(response.data);
            if (data.RESPONSE_CODE == 'SUCCESS') {
                $state.go('restricted.candidate.editProfile', {pageId: ''}, {location: 'replace'});
            } else if (data.RESPONSE_CODE == 'WARNING') {
                alertService.setNotification('Email already exists.', 'warning');
                alertService.showNotification();
            } else {
                alertService.setNotification('Something going wrong, Please try again.', 'failure');
                alertService.showNotification();
            }
        },
        function (err) {
            alertService.setNotification('Something went wrong, Please try again.', 'failure');
            alertService.showNotification();
        }
    );
};

This code is working fine in all other browser but not only in Internet explorer (i have v11, Windows 10).

i have google a lot on this issue but some answer are saying that replaceng-click="function_name()" to direct ng-click="$state.go()" but this won't work in my case.

Thanks

No mention of errors thrown or versions of angular and router used. Provide a demo that reproduces problem as per [mcve] — charlietfl, Jun 12 '17 at 13:14
Then use a stateChange error handler for more details. Also not clear if request is even succeeding — charlietfl, Jun 12 '17 at 13:16

score 1 · Answer 1 · answered Jun 12 '17 at 14:29

You can try and disable globally like:

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }    

    // Answer edited to include suggestions from comments
    // because previous version of code introduced browser-related errors

    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

score 0 · Answer 2 · answered Jun 12 '17 at 13:24

0

It could be a issue with IE caching ajax requests. Try disabling caching using HTTP response headers from the server so that it will prevent IE from caching Ajax calls.

res.header("Cache-Control", "no-cache, no-store, must-revalidate");
res.header("Pragma", "no-cache");
res.header("Expires",0);

answered Jun 12 '17 at 13:24

Jon B

11
2

Also see https://stackoverflow.com/questions/16971831/better-way-to-prevent-ie-cache-in-angularjs – daan.desmedt Jun 12 '17 at 13:36
i have not used ajax call – Dr Magneto Jun 12 '17 at 13:36
i have used $http sendPostRequest = function (url, payLoad, onSuccess, onError) { data = { 'payLoad': JSON.stringify(payLoad) }; $http({ method: 'POST', url: url, data: $.param(data), withCredentials: true, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) .then(function successCallback(response) { onSuccess(response); }, function errorCallback(err) { onError(err); }); }; – Dr Magneto Jun 12 '17 at 13:44
You can try and disable globally using something like – Jon B Jun 12 '17 at 14:28

$state.go not working in Internet explorer

2 Answers2