How to use Jquery $.Ajax in angularjs - javascript

I am trying to use normal jQuery Ajax in anuglarjs .
$.ajax({
type: "POST",
url: window.apirooturl + "/logger",
contentType: "application/json",
data: angular.toJson({
url: $window.location.href,
message: errorMessage,
type: "exception",
stackTrace: stackTrace,
cause: ( cause || "")
})
});
But i am getting an error
Below two messages appears in the firbug
$ is not defined
Error: [$rootScope:inprog] $digest already in progress
Do we need to configure something to use normal jquery function in anagularjs?
I tried to look on Google but could not get a answer
More information :
I am trying to send client side error to the server side and trying to implement a global exception handler as suggested in this post .
http://www.bennadel.com/blog/2542-logging-client-side-errors-with-angularjs-and-stacktrace-js.htm

You are not supposed to use $.ajax in angular you need to use $http request
for example, this is ho you should use post:
$http({
url: "http://example.com",
method: "POST",
data: {"a":"b"}
}).success(function(data, status, headers, config) {
$scope.data = data;
}).error(function(data, status, headers, config) {
$scope.status = status;
});
please see more at : https://docs.angularjs.org/api/ng/service/$http

1) If you reference full jQuery library, Angular should use it instead of it's own. Do you reference it before angular.js file?
2) Wrap your code with $timeout to prevent error '$digest already in progress'

Related

Jquery: Probably a syntax Issue in ajax() method - Value not getting sent

I'm able to dump value of the variable message in console .
But im not able to send it off in POST Request.
AJAX call:
chat.throwmsg = function(message) {
if ($.trim(message).length != 0) {
console.log(message);
$.ajax({
url: 'ajax/chat.php',
type: 'post',
data: { method: 'throw', message: message} ,
success: function(data) {
chat.fetchmsgs();
$('textarea#entry').val('');
}
});
}
}
This maybe due to wrong syntax, but I've tried both single and double quotes, and combination as well .
With a wild assumption, you are not having any error messages in developer console and chat.php has a post handler forthese parameters
Since your data is JSON, please change the code as this way and have a try..
var temp={ method: 'throw', message: message};
var param=JSON.stringify(temp);
$.ajax({
url: 'ajax/chat.php',
type: 'post',
data: param ,
dataType: "json",
success: function(data) {
chat.fetchmsgs();
$('textarea#entry').val('');
}
});
after reviewing the code I could not find any issues that restrict the data to be sent along with ajax request,if you are having any syntax errors you should have been warned prior the request initialization, however I recommend you to check the request header in the network tab of browser console and see your sending data along with the request if it's there you probably need to check the code of getting the post data in your server-side implementations

Angular $http(...).success is not a function help rewriting the function

I'm trying to fix a website for a group I volunteer for.
I'm trying to update it from Angular 1.3.16 to Angular 1.6.4, but I'm getting an error message that says:
TypeError: $http(...).success is not a function
at b.$scope.init (angular-custom.js:107)
The code that seems to be causing it from what I can tell by debugging it is the angular-custom.js file with the .success and .error functions:
$scope.init = function(){
$http({
method: 'post',
url: url,
data: $.param({ 'type' : 'getUsers' }),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).
success(function(data, status, headers, config) {
if(data.success && !angular.isUndefined(data.data) ){
$scope.post.users = data.data;
}else{
$scope.messageFailure(data.message);
}
}).
error(function(data, status, headers, config) {
//$scope.messageFailure(data.message);
});
};
I have also put the files up at plunker The 1.3.16 files at Plunker
I understand that it might be the .success and .error results, but I don't know Angular that much in how to fix it.
I'm a bit of a self-taught coder so any help would be great so I can this group up and running.
Thanks in advance for any advice.
Rod
I recommend you to read this article
Don't use $http's .success()
And
$http({
method: 'post',
url: url,
data: $.param({'user' : $scope.tempUser, 'type' : 'save_user' }),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).
then(function(response) {
your code
excuted when post request is success
},function(response) {
your code
excuted when post request is failed
});
response is returned from server, you can debug to explore more deeply.
For angular 1.6.4 use .then and .catch to deal with the response and the error respectfully:
(note you can save some lines of code by using $http.post)
$scope.init = function(){
$http.post('yourURL', $scope.yourData).
then(function(results) {
if(results.data.success ){
$scope.post.users = results.data;
}else{
$scope.messageFailure(results.data.message);
}
}).
catch(function(results) {
//$scope.messageFailure(results.data.message);
});
};
Thanks everyone for your help, it seems that I really need to take some time out and learn Angular as I really don't understand how it works.
I found that the person before me got the code from AngularJS Insert Update Delete in PHP and MySQL
But it seems that it pops up in a few places on the net as others claiming the code as theirs. Pity about that.
Again thanks for the input but I think I can get it working on ver 1.5.11 and I'll just have to work it out at a later date.
Rod

jQuery or AngularJS Ajax "POST" request to server using code below however do not sending param data to server.

"POST" request to server using code below
however do not sending param data to server.
I tried jQuery Way and
var request = $.ajax({
url: baseUrl,
type:'post',
data: 'userId=userabcd&passwd=abcd1234',
});
request.done(function( msg ) {
console.log(msg);
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
AngularJS Way.
$http({
method : 'POST',
url : baseUrl,
headers : { 'Content-Type': 'application/x-www-form-urlencoded' },
data : 'userId=userabcd&passwd=abcd1234'
}).success(function(data, status, headers, config) {
console.log(data);
console.log(status);
console.log(headers);
console.log(config);
}).error(function(data, status, headers, config) {
console.log(data);
// called asynchronously if an error occurs
// or server returns response with an error status.
});
but both are not sending "POST" query to server.
what am i doing wrong
please help.
server information
Mircrosoft/IIS8.0, ASP
Without seeing your server-side code it is difficult to say if that is a problem. The JS you have presented generally looks okay. You say that it runs without errors but fails to produce the expected results on the server. So I suggest you add the server-side code.
Both cases accept data as an object rather that a string which is generally more convenient. (avoids having to deal with encoding characters yourself)
For example:
data: {userId:'userabcd', passwd:'abcd1234'},
Have a read of the the documentation for $.ajax and $http

$http angularjs shows error on callback

I tested my php alone and it gave me this result
{"tabId":1,"tabName":"Main","uId":"1"}{"tabId":2,"tabName":"Photography","uId":"1"}
but my angularjs can't receive the callback, it return an error somewhere in angularjs
userId = '1';
$http({
url: "php/loadTab.php",
method: "GET",
params: {'userId':userId}
}).success(function(data, status, headers, config) {
console.log(data);
}).error(function(data, status, headers, config) {
});
the wierd thing I reuse the exact ajax code and it worked previously. Any thought on this?
the error : SyntaxError: Unexpected token {
at Object.parse (native)
the more strange thing : I purposely add another echo on my php and it able to console the value. what?!
The data from the server isn't valid JSON.
$httpProvider.defaults.transformResponse will try to parse the JSON if the data looks like JSON.
https://docs.angularjs.org/api/ng/service/$http
To fix this you could make the parent an array of objects like this
[{"tabId":1,"tabName":"Main","uId":"1"},{"tabId":2,"tabName":"Photography","uId":"1"}]

Catch / Handle 502 Bad Gateway Error

I have to update a large collection so I am calling in a loop an web api. I use jQuery.ajax()
Something like this:
$.ajax({
type: 'GET',
url: 'http://www.somesite.com/API/API.php',
jsonpCallback: 'API_SC4',
contentType: "application/json",
dataType: 'jsonp',
data:'action=update&page='+collection[currentIndex].name+'&callback=API_SC4',
async:false,
success: function(data) {
//use data for update of collection[currentIndex]
UpdateNext(currentIndex+1);
},
error: function(e) {
//interpret error
UpdateNext(currentIndex+1);
}
});
The problem is the collection is quite large and sometimes I get a 502 Bad Gateway error and the ajax error handler is not called.
I even tried $( document ).ajaxError() but i'm doing a cross-domain jsonp call , and it seems .ajaxError() does not get called in that situation.
Is there any way to handle that error? Something at window level?
I can see the error in the Chrome development console , and I was thinking there might be a way.
Thanks
Yes, there is: statusCode. See the jQuery documentation on AJAX for details.
Simple example:
$.ajax({
statusCode: {
502: function () {
alert('Fail!');
}
}
});

Categories

Resources