Angularjs With Ajax Form Submission Needing To Click Twice
Solution 1:
Just do this: Inject $timeout
service in your controller and wrap your code as following:
complete: function(response) {
console.log(response.responseText);
$timeout(function() {
if (response.responseText == 'success') {
console.log('Registration Success');
alert('Success');
$scope.msgalert = 'Registration Success, Proceed to Login and Continue';
} elseif (response.responseText == 'fail') {
alert('registration failed');
$scope.msgalert = 'Registration Failed, Please try again';
}
});
}
Also, change your HTML code like this:
<h3ng-show="msgalert"><em>{{msgalert}}</em></h3>
So there is a concept of digest cycle in Angular. If you are doing something outside the Angular's context (like you are using jQuery AJAX to get the data and updating the $scope variable of msgalert
), we have to tell Angular that something has changed in the data.
So after you get the response from the server and you updated the msgalert
, Angular is unaware of that change since it is outside of the Angular's context so new digest cycle of Angular is triggered and the view is not updated.
Why you are seeing this is, when you click the submit button again in the form, then a digest cycle of Angular is triggered behind the scene and then your actual message is getting displayed.
To fix the problem, we wrapped your custom (outside angular context) code into the Angular's context using the $timeout
service which is notifying the Angular immediately that the value in msgalert
has changed
Optionally, you can write the $scope.$apply()
after your if-else
condition but it throws an exception sometimes that digest cycle is already in progress
because calling $scope.$apply()
, we are manually triggering the Angular's digest cycle. That is why the cleaner approach is to the $timeout
service.
Update
Please note that you don't have to use jQuery at all to do that AJAX call. Angular has $http
service and using it you will not face that problem at all. You can write your code like this:
$scope.submitForm = function (isValid, user) {
var regData = {
email: user.email,
password: user.password1
};
$http({
method: "POST",
url: "myurl",
data: regData, // You don't need to stringify it and no need to set any headers
}).then(function (response) {
// Success callback
console.log(response.responseText);
if (response.responseText == 'success') {
$scope.msgalert = 'Registration Success, Proceed to Login and Continue';
} elseif (response.responseText == 'fail') {
$scope.msgalert = 'Registration Failed, Please try again';
}
}, function() {
// Error callback
});
};
Solution 2:
Your actual problem is jquery AJAX usage. Normaly when a AJAX call is being made by angular $http it calls a scope.digest cycle internally while ajax response found. But here you are calling jquery ajax so angular is not able to digest the changes so binding is not working.
Try the following after just before complete method finished.
$scope.$apply();
As follows
complete: function(response) {
console.log(response.responseText);
if(response.responseText == 'success'){
console.log('Registration Success');
alert('Success');
$scope.msgalert='Registration Success, Proceed to Login and Continue';
}
elseif(response.responseText == 'fail'){
alert('registration failed');
$scope.msgalert='Registration Failed, Please try again';
}
$scope.$apply();
}
But it is better to use $http because it call $scope.$apply() internally.
Post a Comment for "Angularjs With Ajax Form Submission Needing To Click Twice"