CODEWITHSUNDEEP
jsonangularjsinternet-explorerinternet-explorer-11
Greg
Greg

Reputation: 181

Internet Explorer 11 crashes when Angulars $http.post is used with large/complex json datasets

I am consistently able to crash IE11 when I post large/complex json object using Angulars $http.post method.

I have setup an angular example which can be run in IE11 to see the behavior which I am experiencing: http://plnkr.co/edit/yYaDy8d00VGV6WcjaUu3?p=preview

This is the code which causes a crash:

$http.post($scope.saveDocumentUrl, { "document": doc, "submit": submit, "trash": trash }).success(function (data) {
            if (!data.Success) {
                bootbox.alert(data.Message);
            } else {
                if (trash) {
                    $scope.periodReviewDocuments.pop(doc);
                    hideModalWindow(); //we call this in the event that the method was called from the document and not from the list.
                }

                if(submit){
                    $scope.periodReviewDocuments.pop(doc);
                    resetForm();
                    bootbox.alert("Your document has been submitted");
                    hideModalWindow();                        
                }

            }
            $scope.isBusy = false;
        }).error(function (data, status) {
            $scope.isBusy = false;
            bootbox.alert("The server encountered an error and could not save your document. If this problem persists please contact the administrators");
        });

This is the jquery working code:

    $.ajax({
            url: $scope.saveDocumentUrl,
            data: JSON.stringify({ "document": doc, "submit": submit, "trash": trash }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            type: "POST"
        }).done(function (data) {
            if (!data.Success) {
                bootbox.alert(data.Message);
            } else {
                if (trash) {
                    $scope.periodReviewDocuments.pop(doc);
                    hideModalWindow(); //we call this in the event that the method was called from the document and not from the list.
                }

                if (submit) {
                    $scope.periodReviewDocuments.pop(doc);
                    resetForm();
                    bootbox.alert("Your document has been submitted");
                    hideModalWindow();
                }

            }
            $scope.isBusy = false;
        }).fail(function (data, status) {
                $scope.isBusy = false;
                bootbox.alert("The server encountered an error and could not save your document. If this problem persists please contact the administrators");
        })

This is what I know so far:

  1. This issue only happens in IE11 - Windows 8.1 / IE 11 (11.0.9600.17498). Update versions 11.0.15 (KB3008923).
  2. The browser crashes after the request is sent.
  3. I have inspected the server side incoming request and the payload has been serialised/deserialised perfectly.
  4. I have replaced the $http.post function with jquery $.ajax and it resolved the issue, but this is not a solution as I am using angular.
  5. I have lost 3 days on this issue

Upvotes: 5

Views: 4659

Answers (2)

Yuhong Bao
Yuhong Bao

Reputation: 3917

Fixed in this month's IE updates, probably by https://support.microsoft.com/en-us/kb/3075516

As a side note, you can detect this by using ScriptEngineBuildVersion in JavaScript. Make sure you also use ScriptEngineMajorVersion and ScriptEngineMinorVersion and refer to the file information in the KB article.

Upvotes: 0

Greg Pagendam-Turner
Greg Pagendam-Turner

Reputation: 2542

In your version of Internet Explorer calling JSON.stringify with a translation filter crashes IE for large data sets.

The trick here is to stringify the object yourself before passing to $http.post

http://plnkr.co/edit/PbMxMY?p=preview

  var body = {"document" .....

  var jsonData = JSON.stringify(body);

  $http.post("/test", jsonData).then(function(response) {
    console.log(response.data);
  });

  $interval(function() {
    $rootScope.tick = Date.now();
  }, 500);
});

Upvotes: 3

Related Questions