I got this page which uses Angular and when the page is loaded, it requests some data from a HTTP get call. My problem is that if the user navigates to a other page while the HTTP get call is going on, the system gives a error and then gives me the HTTP error callback showing the alert with "Error".
$http.get('/api/something/).success(function (data, status, headers, config) {
alert(data);
}).error(function (data, status, headers, config) {
alert('Error');
});
What I want instead is to just abort the http call and then move the user to the other page without the error function being called.
So far I found this.
But I can't see how I can use it to fix my problem.
Related
What is wrong with this code:
function mainCtrl($scope, $http) {
function loadData(){ $http.jsonp('http://www.pais.co.il/Lotto/Pages/last_Results.aspx?download=1')
.then(function (data, status, headers, config) {
console.log(data);
},
function (data, status, headers, config) {
console.log(data);
});
}
loadData();
};
I have a simple call to a URL.
I can see in my network that it was a success (200).
But my the response is beeing catch in the error function:
You aren't getting a 404 error. You are getting an invalid JS error.
You are making a JSONP request. The URL is returning CSV data, not JSONP.
You need to either:
Use a URL that returns JSONP
Use XMLHttpRequest instead of <script> (which is what $http.jsonp does behind the scenes) to load the data and ensure that the suitable Access-Control headers are set to give your JS permission to read the data
Fetch the data from your server instead
Im stuck at this 2 days I can not find a solution.
When im doing an AngularJS POST it Sends OPTIONS in the header and returns error from the API the code looks like this nothing special.
$http.defaults.headers.post["Content-Type"] = "application/json";
$http.post(URL, JSON.stringify(data)).
success(function(data, status, headers, config) {
alert(data);
error(function(data, status, headers, config) {
console.log("Error");
});
CORS is enabled on the API it has the Headers, when i do POST with fiddler or POSTMan in Chrome it works fine only when i use angularJS post it won't go thru.
why do i get OPTIONS /SubmitTicket HTTP/1.1 instead of POST?
What do i need to do to POST ? I have read about it it says something like CORS is adding OPTIONS header but why?
When you invoke the CORS requests, the browser always sends the OPTIONS request to server to know what methods are actually allowed. So this is the desired behaviour. This is so called: "Preflighted request", see: http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/ (section: "Preflighted requests")
Therefore in your case, you have to allow the OPTIONS method in 'Access-Control-Allow-Methods' header of your CORS filter.
My understanding is that angular initially sends an OPTIONS request to the server in order to ask the server if the full request is permissable.
The server will then respond with Headers specifying what is and is not allowed.
I guess this might be an issue with the server returning the wrong CORS headers.
You said that the server returns an error please post that error here.
See Preflighted CORS request at: http://www.staticapps.org/articles/cross-domain-requests-with-cors
and
AngularJS performs an OPTIONS HTTP request for a cross-origin resource
// Simple POST request example (passing data) :
$http.post('/someUrl', {msg:'hello word!'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Should only need to do this code to get it to work:
angular.module('TestApp', [])
.factory('someService', ['$http', someService]);
function someService() {
var service = {
save: save
};
var serviceUrl = '/some/Url';
return service;
function save(data) {
$http.post(serviceUrl, data)
.success(function(data, status, headers, config) {
alert(data);
})
.error(function(data, status, headers, config) {
console.log("Error");
});
}
}
Then pull your someService into your controller and use:
someService.save(data);
I am building a mobile application for Redmine. So, to get data from the Redmine server, I need to authenticate the user by passing his password and username. In Redmine API documentation, two methods are mentioned for authentication.
using your regular login/password via HTTP Basic authentication.
using your API key which is a handy way to avoid putting a password
in a script. The API key may be attached to each request in one of
the following way:
- passed in as a "key" parameter
- passed in as a username with a random password via HTTP Basic
authentication
- passed in as a "X-Redmine-API-Key" HTTP header (added in Redmine
1.1.0)
I tried to send a get request as follows, I can see the issue list in response to the Get request in browser. But the success callback is not triggering.
var url= "http://username:password#redmine.qburst.com/issues.json";
$http({
method: 'JSONP',
url: url
}).
success(function(data, status) {
console.log(data);
}).
error(function(data, status) {
console.log("Error "+status);
});
The following error is coming in console.
SyntaxError: missing ; before statement
{"issues":[{"id":139989,"project":{"id":215,"name":"Book Meeting Room
Error status is 0.
Different to standard JSON, JSONP responses should be wrapped in a function call.
Instead of:
{"issues":[{"id":139989,"project":{"id":215,"name":"Book Meeting Room...
You should be getting something like the following from the server:
handler({"issues":[{"id":139989,"project":{"id":215,"name":"Book Meeting Room"}}]});
I ran into a similar issue and found that passing the callback or jsonp parameter with a handler name solved it. More info here in the redmine documentation.
In jQuery this would be my request:
$.get('someurl', {'callback': 'foo'}, function (data, status, xhr) {
... request logic ...
}, 'jsonp'
);
...and this would be your request with the callback parameter:
$http({
method: 'JSONP',
url: url,
callback: 'something'
}).
success(function(data, status) {
console.log(data);
}).
error(function(data, status) {
console.log("Error "+status);
});
This may not help you with the authentication woes but will hopefully get you past this error.
Lets say I have a route set up like so:
$routeProvider.
when('/myroute', {templateUrl: '/views/RouteA.html', controller: 'AController'}).
otherwise({redirectTo: '/home'})
If the server is down, when I click a link to "http://myapp.com/#/myroute" I can see that the requests to load the RouteA.html file are timing out. However, to the user, the application just sits there leaving them with no indication of a problem. I don't see any clear explanation anywhere for handling this type of non-response.
The Best way to tackle this is to add routeChangeError event
$rootScope.$on("$routeChangeError", function () {
alert("there is some error");
//do what ever you want to do again
});
Maybe this cant be a hint for you...
$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
I have a form that I have been submitting to Salesforce with standard form submit action. By default, you can tell Salesforce to redirect you to a given URL after the POST has completed.
I no longer wish to be redirected since I have other activities on the form page. No problem, my page is already using jQuery so I can use the handy $.ajax utility like this:
$('#wrapper').on('click', '#formsubmit', function(e) {
e.preventDefault();
var formData = $('#subForm').serialize();
$.ajax({
type: "POST",
url: "https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
data: formData,
success: function() {
console.log('success!'); // or not!
},
error:function (xhr, ajaxOptions, thrownError){
console.log(xhr.status); // 0
console.log(thrownError); // empty
}
});
});
In my misguided brain, I imagined that Salesforce would return my good ol' redirect, which would count as a "success" that I can just discard/ignore. Misguided indeed!
I can see a 200 OK result (which usually means "success") but the success callback isn't tripped.
The lead is added to the Salesforce database
Inspecting the content of what's returned shows zero; there is no content in the response.
The error callback IS being tripped (despite the 200 OK) but maybe due to intentionally not redirecting it is seen as a "resource not available"? (therefore my status code is 0, and there is no content in the thrownError?).
Any advice on identifying this as a successful POST so that I can trigger additional actions in a callback? I don't want to TOTALLY ignore the response, or I could end up in a scenario in which I'm acting on a failed POST as if it was successful. I need to capture the success somehow.
It occurred to me that it could be a cross-site scripting issue as well, but since the application doesn't exchange data in JSONP, I'm not sure how to get around that (and I'm not sure how to identify it in the first place).
Few things here:
1) The redirect response being sent by salesforce's API is most likely being interpreted as an error code.
2) The response code of the subsequent page (after the redirect) is 200 OK, from the sound of it.
3) It is not possible to do a POST request using JSONP. This is a limitation of JSONP; which is not actually an AJAX request, but an HTTP GET request wrapped inside of a dynamically generated script tag. Also, JSONP only works if the request yields an HTTP response of 200 OK.
I would recommend using your own server-side intermediary to handle your AJAX POST request. This will act as a proxy between your front-end app and salesforce's API. This will also allow you to better control the response being sent to your app.
var formData = $('#subForm').serialize();
var response = $.ajax({
type: "POST",
url: "https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
data: formData,
success: function() {
console.log('success!'); // or not!
},
error:function (xhr, ajaxOptions, thrownError){
console.log(xhr.status); // 0
console.log(thrownError); // empty
}
}).responseText;
where var response will contain the return value from your ajax call