ajax callback collision in asynchronous mode - javascript

$http({
url: "php/load.php",
method: "GET",
params: {'userId':userId}
}).success(function(data, status, headers, config) {
$scope.data = data;
}).error(function(data, status, headers, config) {
});
$scope.data[0]= "something";
How to wait above ajax to finish loading then load $scope.data[0]= "something";? I tried to place it within the $http and below $scope.data=data but it seem to have collision still..

var promise1 = $http({
url: "php/load.php",
method: "GET",
async: false,
params: {'userId':userId}
});
$.when(promise1).then(
function(data, status, headers, config) {
$scope.data = data;
},
function(data, status, headers, config) {
}
).done(function() {
$scope.data[0]= "something";
});
Haven't tested, but that should be right. Look into jQuery.when() and jQuery.promise() if not.

Related

unable to fetch json data from $http post method in angularjs

I am unable to fetch json data from $http post method in angularjs
I had try following code in my controller file
var sectionTypeVM = new Object();
sectionTypeVM.sessionid = 'Session';
sectionTypeVM.query = 'where LOB group by Report_Source_Type,Report_Object_Type';
// alert(JSON.stringify(sectionTypeVM));
$http({
method: 'post',
url: 'http://testserver/search',
dataType: 'json',
data: JSON.stringify(sectionTypeVM),
headers: { 'Content-Type': 'application/json' }
}).success(function(data, status, headers, config) {
alert('success');
alert(data);
})
.error(function(data, status, headers, config) {
alert('error');
alert(data+ status + headers + config );
});
My $http request return error function when called.
I am using AngularJS v1.2.16
Thanks
Gajanan

Success Callback not called when $http post is in method scope

I am trying to achieve a login functionality using Angular JS on front-end and PHP + Zend on the back-end. Below is the code snippet of the angular js controller. This doesn't redirect the user to the appropriate page and while debugging, the control doesn't enter the success part but enters the error part with data being NULL. However if I put the $http part outside the function, atleast the control enters the success part with data being that of the next page to be redirected.
What could i be missing and what is the correct way to achieve the redirection?
In the below code the control doesn't enter the success section.
var myApp = angular.module('myApp',[]);
myApp.controller('loginCtrl', function ($scope, $http) {
$scope.authenticatelogin = function () {
$http({
url: "/admin/auth/authenticatelogin",
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param({login: $scope.login, password: $scope.password, rememberMe: $scope.remember})
}).success(function(data, status, headers, config) {
$window.location.href= "index/index";
$scope.data = data;
}).error(function(data, status, headers, config) {
$scope.status = status;
});
};
});
In the below code the control enters the success section.
var myApp = angular.module('myApp',[]);
myApp.controller('loginCtrl', function ($scope, $http) {
$http({
url: "/admin/auth/authenticatelogin",
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param({login: 'abc#abc.com', password: 'xyzxyz', rememberMe: ''})
}).success(function(data, status, headers, config) {
$window.location.href= "index/index";
$scope.data = data;
}).error(function(data, status, headers, config) {
$scope.status = status;
});
});
I would rather go for success/error callbacks to be part of the then method.
From angular documentation for version 1.4.5:
The $http legacy promise methods success and error have been
deprecated. Use the standard then method instead. If
$httpProvider.useLegacyPromiseExtensions is set to false then these
methods will throw $http/legacy error.
Try this one, although if you say that your code works outside the closure, it might not be the solution you are looking for:
$http({
url: "/admin/auth/authenticatelogin",
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param({login: $scope.login, password: $scope.password, rememberMe: $scope.remember})
}).then(function(data, status, headers, config) {
$window.location.href= "index/index";
$scope.data = data;
}, function(data, status, headers, config) {
$scope.status = status;
});

How do I repeat an ajax call in angular.js and stop it based on response value

I have a simple controller that runs an ajax call. What is the most optimal running this ajax call every 15 seconds instead of just once. And how do I also stop the call?
myApp.controller('myCntrl', function($window,$scope,$http,$routeParams,$location) {
$http({
method: 'GET',
url: '../ajax/my_script.php',
})
.success(function(data, status, headers, config) {
console.log(data)
})
})
function httpCall (){
$http({
method: 'GET',
url: '../ajax/my_script.php',
})
.success(function(data, status, headers, config) {
if(data == "expectedData") //condition to stop recursive ajax.
$tiemout(httpCall, 15000);
})
}
You can use $interval service and stop it at an event as cancel(promise)
eg:
var promo = $interval(function(){
$http({
method: 'GET',
url: '../ajax/my_script.php',
})
.success(function(data, status, headers, config) {
console.log(data)
})
},1500);
clear interval as:
$interval.cancel(promo)
You could do it just by using $interval
var ajaxCall = function(){
$http({
method: 'GET',
url: '../ajax/my_script.php',
})
.success(function(data, status, headers, config) {
//on some condition
if(data.length == 0) //just for demonstration..you could add your own condition.
$interval.cancel(interval); //this is to cancel interval
console.log(data)
})
}
var interval = $interval(ajaxCall,15000)

ajax and php error : Undefined index: userid in my case

where have I went wrong?
$http({
url: "php/loaduser.php?userid=user_id",
method: "GET",
data: {'user_id':'1'}
}).success(function(data, status, headers, config) {
mydata = [];
mydata = data;
console.log(mydata);
}).error(function(data, status, headers, config) {
// $scope.status = status;
alert(status);
});
my php
echo $_GET['user_id'];
it return Undefined index: user_id
Your call should be like
$http({
url: "php/loaduser.php",
method: "GET",
data: {'user_id':'1'}
})
Or either you can use
$http({
url: "php/loaduser.php?user_id=" + user_id,
method: "GET"
})
In second Method you are directly passing the user_id through the url whereas in the first you are sending it in a variable manner
You are sending in the string user_id.
url: "php/loaduser.php?userid=user_id"
Remove that last query parameter.
Change it to this:
url: "php/loaduser.php"
try this--
$.ajax({
type:"GET",
url:"php/loaduser.php",
data: {'user_id':1}
success:function(data, status, headers, config){
ydata = [];
mydata = data;
console.log(mydata);
}),
error(function(data, status, headers, config) {
// $scope.status = status;
alert(status);
}
});
The key in your URL is wrong: you need to change it from userid to user_id.
Then, you don't need to set the data property, you can include the parameter in your URL like so:
url: "php/loaduser.php?user_id=" + '1'

pass function parameter into ajax url doesnt' work?

$scope.getPostItem = function(itemLength){
// load post items ajax
$http({
method: 'GET',
url: '../Rresume/loadPostItem.php?itemLength=itemLength'}).
success(function(data, status, headers, config) {
});
trying to pass itemLength into the url, possible? I got a null result. But when I put itemLength=4 it work.
scope.getPostItem = function(itemLength){
// load post items ajax
$http({
method: 'GET',
url: '../Rresume/loadPostItem.php?itemLength=' + itemLength}).
success(function(data, status, headers, config) {
});
Try this

Categories