I am using an angular form which edits data. The data is fetched by $http and assigned to a controller object. I see that the form is set to modified due to this data assignment. I would like to have form state as not modified. This is being done on a button click, i would rather do it $http.success. this does not seem to be working though. Can you please advice?
Thanks
I had the same problem and I did the delayed initialization as shown at http://betsol.github.io/angular-input-modified/delayed-init/
Here is my code.
$http({
...
...
}).success(function(rdata, status, headers, config) {
$scope.user = angular.copy(rdata.data);
// Calling set-pristine after digest cycle.
if ($scope.myProfileForm) {
$timeout(function() {
$scope.myProfileForm.$setPristine();
});
}
}).error(function(data, status, headers, config) {
...
...
});
Related
I am getting a valid JSON request but only $http fail method is invoked. It shows OK 200 in firebug. Also the view is not getting updated. Newbie trying out AngularJS so something could be too wrong :)
$http.jsonp("http://localhost:51377/api/Books/1").success(function(data, status, headers, config) {
alert("Suc");
$scope.people = data;
}).error(function(data, status, headers, config) {
$scope.people = data;
alert("fail");
});
This is the response in firebug:
{"ID":1,"BookName":"ASP.Net"}
Also fails for:
[{"ID":1,"BookName":"ASP.Net"}]
getting 404 in status code in $http call. I am using jsonp which should take care CORS? as I read from somewhere. My angular is in file:// protocol
Update-1:
Tried with launching my angular in localhost from VS. Same results
Update-2:
I added configuration changes to remove CORS in my backend .net webapi and now it works with the following code but still the original above code using jsonp fails
$http({
method: 'get',
url: 'http://localhost:51377/api/Books/',
responseType: "json"
}).success(function (data, status, headers, config) {
alert(data);
console.log('Success: ' + data);
$scope.people = data;
}).error(function (data, status, headers, config) {
console.log('Error: ' + data);
});
I believe you need to add a callback parameter to your request:
$http.jsonp("http://localhost:51377/api/Books/1?callback=JSON_CALLBACK")
More info here:
https://docs.angularjs.org/api/ng/service/%24http#jsonp
Also, see this JSFiddle (not mine):
http://jsfiddle.net/saarmstrong/hYACX/8/light/
When you remove the callback parameter it fails...
try to use only "/api/Books/1" instead of "http://localhost:51377/api/Books/1"
I have a page which makes an API call to retrieve data and display it. Everything appears to work fine when navigating from home to this page, but if I press F5 the data is lost and only the bindings are shown {{first_name}}
Here is my controller:
app.controller('examinersCtrl', function($scope, $http) {
$http.defaults.useXDomain = true;
$http({
method: 'GET',
url: 'https://shielded-reaches-93856.herokuapp.com/v1/examiners'
}).success(function(data, status, headers, config) {
$scope.examiners = data;
}).error(function(data, status, headers, config) {
console.log('There was an error getting the data');
});
});
});
It seems bizarre that the http request is being made only on the initial page load, and not when a refresh happens. Is there another way to do this?
Thanks!
I'm writing a Google Chrome extension which will interact directly with an AngularJS app.
Data is passed into Chrome's localstorage (chrome.storage.local) in one page, and then retrieved when the user loads my app's page.
The Angular is basically just a form with ng-models attached, like so:
<input id="q1" ng-model="inputName" >
<input id="q2" ng-model="inputTitle" >
<input id="q3" ng-model="inputAge" >
<button ng-click='submit()' >
The submit() function saves the ng-model values to my database to be retrieved later.
There are similar questions here which use older versions of AngularJS and I cannot get to work with Angular 1.2+ (I'm on Angular 1.2.2).
I've tried:
$('#q1').val(obj.title).trigger('input');
I've also tried:
$('#q1').val(obj.title);
angular.element($('#q1')).triggerHandler('input');
Neither work, in fact the latter makes no value change occur at all. What's the fix?
EDIT: Here's the Angular function being called on click, if there's something I can do in here to force ng-model to check the html input's value (that was set by jQuery in the Google Chrome extension) then that could be a solution:
$scope.submit = function(){
var theEvent = {
inputTitle: $scope.inputTitle,
inputName: $scope.inputName,
inputAge: $scope.inputAge
};
$rootScope.existing = theEvent;
$http({
url: '/api/saveToMongo/newEvent',
method: "POST",
data: theEvent
}).
success(function(data, status, headers, config) {
$cookies.oldSession = data;
$location.path('/collect');
}).
error(function(data, status, headers, config) {
console.log("There was an error submitting!");
});
};
All of these are returning null when I submit to my database, although if I type in the values manually then they work fine.
I'm having some problems when I try to make some $http calls after the user session has expired. Server side the methods are created in such a way that if a request comes and the user isn't authenticated it redirects to the login page. Making the call with JS doesn't help much because for some method it returns me the HTML mark-up for the login page and for other calls it doesn't work at all. I would like to know why some calls return something and some calls don't do a thing.
CODE - Call that works
$http({
url: url + $scope.ftValue,
method: 'GET'
})
.success(function (data, status, headers, config) {
//stuff on success
})
.error(function (data, status, headers, config) {
console.log("An error occured when applying the Free Text Search!");
});
Call that doesn't work
$http({
url: url + '¤tFacet=' + facetName,
method: 'GET'
})
.success(function (data, status, headers, config) {
//stuff on success
})
.error(function (data, status, headers, config) {
console.log("Error during facet values extraction. Status: " + status);
});
To note that the only thing that's different is the method that's getting called. And that's kind of irrelevant because the controller has an authorisation annotation and the call doesn't even reach the method (which is fine, because for the one that works it returns me the login page).
I would like to know what would cause the second call to not work. Both are triggered by an ng-click directive.
I need to do some cross site scripting. The block of code below contains the method of jsonp, the method returns as if it failed, but when I change it to be a get request I then have success. I need to be able to a successful response using the jsonp method. The following can be ruled out. The response is valid json and this param is in the url ?callback=JSON_CALLBACK. Here is the json I receive from doing the http request and the code block that executes this code.
http response status code 200
[{"cube":"1" ,"points":"160"},{"cube":"2","points":"690"},{"cube":"3","points":"331"}]
code block
var myApp = angular.module('test', []);
myApp.controller('UserCtrl', function($scope, users) {
$scope.usersPerCube = users.getUsers();
})
myApp.factory('users', function($http) {
return {
getUsers: function() {
var deferred = $q.defer();
var url = "http://localhost/api/api/index.php/analytics/UsersPerCube?callback=JSON_CALLBACK";
$http.get(url).success(function (data, status, headers, config) {
console.log(data);
deferred.resolve(data);
}).error(function (data, status, headers, config) {
//this always gets called
console.log(status);
deferred.reject(status);
});
return deferred.promise;
}
}
Note that I have edited my server side code and now receive
"angular.callbacks._1( {"cube":"1","points":"160"},{"cube":"2","points":"690"},{"cube":"3","points":"331"})"
UPDATE
The above is valid and now the success method is executing. I just need to figure out how to parse the objects. I will post again once I figure out the answer.
I have decided to give a detailed description of how to do a jsonp request so others will not run into the same troubles as I did.
myApp.factory('users', function($http) {
return {
getUsers: function() {
var deferred = $q.defer();
var url = "http://localhost/api/api/index.php/analytics/UsersPerCube?callback=JSON_CALLBACK";
$http.get(url).success(function (data, status, headers, config) {
console.log(data);
deferred.resolve(data);
}).error(function (data, status, headers, config) {
//this always gets called
console.log(status);
deferred.reject(status);
});
return deferred.promise;
}
Notice that the url contains ?callback=JSON_CALLBACK. Here is a nice stackoverflow on that. Once you get the response then you'll receive a json like the one below.
"angular.callbacks._1( {"cube":"1","points":"160"},{"cube":"2","points":"690"},{"cube":"3","points":"331"})"
Here is a nice stackoverflow on that subject
Now the one part that got me is that the server has to return the GET param, callback. Here is a good tutorial for that. http://niryariv.wordpress.com/2009/05/05/jsonp-quickly/ So the json looks like the one above.
Well, I hope this helps someone in the future.
If you want to make several JSONP requests through $http service, you should use a little hack. Agular change JSON_CALLBACK to internal value, and best way to use next solution: put this js code into your returned js-file:
var callbackId = '_' + (angular.callbacks.counter - 1).toString(36);
angular.callbacks[callbackId](/* YOUR JSON */);
To be sure that this code will work for you, please check createHttpBackend method in angular sources.