My web app has extensive AJAX functionality. While initially working fine in my tests, today I encountered an issue with Firefox on both Mac and IE where a pop-up message "This web page is being redirected to a new location" appears for every PUT and DELETE ajax call, causing chaos on the page. Surprisingly, this pop-up does not show up for GET calls.
The PUT and DELETE requests are structured using Angular Promises, while the GET request uses a standard $.http call.
Here's the code snippet for the GET request that doesn't trigger the pop-up:
$http({
method: 'GET',
url: $scope.faveURL
}).success(function (data, status, headers, config) {
if (data === "false") {
$scope.faveempty = true;
$scope.faveloading = false;
} else {
$scope.favourites = data;
$scope.faveloading = false;
}
});
And here's the code snippet for the PUT and DELETE requests that do trigger the pop-up:
if (food.favourite === true) {
requestPromise = $http.put($scope.URL).then(function () {
$scope.favourites.push(food);
$scope.faveempty = false;
food.loading = "none";
change = $scope.favouriteChange(food);
});
} else if (food.favourite === false) {
requestPromise = $http({
method: 'DELETE',
url: $scope.URL
}).then(function () {
$scope.favourites.splice($scope.favourites.indexOf(food), 1);
if ($scope.favourites.length < 1) {
$scope.faveempty = true;
}
food.loading = "none";
change = $scope.favouriteChange(food);
});
}
Has anyone else encountered similar issues with requestPromise for Ajax calls? If so, have you found any solutions?
UPDATE:
Upon inspecting the Network traffic, it turns out that the pop-up only occurs for AJAX responses that involve a redirection. For example, no pop-up for this response:
[15:09:58.742] GET http://redacted/api/ext/group/35/ [HTTP/1.1 200 OK 381ms]
But there is a pop-up for this response:
[15:03:25.036] PUT http://redacted/api/ext/favorite/713 [HTTP/1.0 301 TYPO3 RealURL redirect 126ms]
It seems to be related to how Typo3 services handle PUT and DELETE methods, triggering the Firefox warning dialog.