ajax request is looping in Angularjs - javascript

Hi I am developing Angularjs application. I am making ajax call to server to get some details. Request is POST. Code written for Ajax is looping and it is not stopping.
(function () {
angular.module('RoslpApp').controller('ChangePassword', ['$scope', '$http', '$translatePartialLoader', '$translate', '$state', '$stateParams', 'cfg', 'toastr',
function ($scope, $http, $translatePartialLoader, $translate, $state, $stateParams, cfg, toastr) {
var url = cfg.Baseurl + "api/Customer/ResetPassword";
// alert(SomeFactory.getData());
var url = cfg.Baseurl + "api/Customer/ModifyPassword";
var ID = $stateParams.LoginID;
debugger;
//this loops and never stops
$scope.changePassword = function () {
var resetpassword = {
ID: ID,
NewPassword: $scope.otpnewpassword
};
$http.post(url, resetpassword).then(function (response) {
}, function (error) {
});
}
}]);
})();
This is my html code.
<div class="body-wrapper background-pattern">
<div class="form-wrapper">
<div class="form-container">
<h2 class="form-header">Change Password</h2>
<div class="form-row">
<div class="inputblock">
<span class="input-icon"><img src="images/lock-icon.png"></span>
<input type="password" class="with-icon" placeholder="New Password" ng-model="newpassword">
</div>
<div class="inputblock">
<span class="input-icon"><img src="images/lock-icon.png"></span>
<input type="password" class="with-icon" placeholder="Confirm Password">
</div>
</div>
<div class="button-container">
<input type="button" value="Change Password" id="input-submit" ng-bind="changePassword()">
<input type="submit" value="Cancel" id="input-cancel">
</div>
</div>
</div>
</div>
I am not sure why Ajax call is looping. May I get some help here to fix this? Any help would be appreciated. Thank you.

You are using ng-bind with a function, ngBind attribute tells AngularJS to replace the text content of the specified HTML element Try ng-click instead of that.
<input type="button" value="Change Password" id="input-submit" ng-bind="changePassword()">
to
<input type="button" value="Change Password" id="input-submit" ng-click="changePassword()">

Related

angularjs how to access mulitple input fields from a form inside controller

How do I access the individual input names defined in a form inside my controller?
rates.rateName
rates.rateBitrate
rates.rateWidth
rates.rateHeight
This does not work: var url = {{ tmp + data.rateName }};
I need to extract one of the input values from the form and append it to the url
to be used with a $http POST. I need to put the rest of the inputs from the form (all together) into the POST as well as json blob.
<div ng-controller="RateCtrlAdd">
<rd-widget>
<rd-widget-header icon="fa-users" title="Rates">
</rd-widget-header>
</rd-widget>
<p></p>
<div class="row">
<div class="col-sm-6">
<form name="myForm" ng-submit="SendData()">
<input class="form-control input-lg" type="text"
placeholder="rate name"
name="rates.rateName"
ng-model="rates.rateName" required/>
<br>
<input class="form-control input-lg" type="text"
placeholder="rate bit rate"
name="rates.rateBitrate"
ng-model="rates.rateBitrate" required/>
<br>
<input class="form-control input-lg" type="text"
placeholder="rate width"
name="rates.rateWidth"
ng-model="rates.rateWidth" required/>
<br>
<input class="form-control input-lg" type="text"
placeholder="rate height"
name="rates.rateHeight"
ng-model="rates.rateHeight" required/>
</form>
</div>
</div>
<div class="row" style="margin-top: 12px;">
<div class="col-sm-6">
<button class="btn btn-success btn" value="Send" ng-click="SendData()">
Add
</button>
<a href="/rates" class="btn btn-danger btn">
Cancel
</a>
</div>
</div>
</div>
'use strict';
angular.module('RDash')
.controller('RateCtrlAdd', ['$scope', '$http', function($scope, $http) {
console.log('RateCtrlAdd - enter...');
$scope.SendData = function () {
var data = $scope.rates;
console.log('RateCtrlAdd - rates from input form: ', $scope.rates);
var tmp = 'http://10.10.15.145:8085/lms/outputstream/';
var url = {{ tmp + data.rateName }};
console.log('RateCtrlAdd - url: ', url);
}; // end function()
console.log('RateCtrlAdd - ...exit');
}]); // end controller()
You cant use binding expression i.e. {{}} in controller. Add it using simple javascript
Try this
var url = tmp + data.rateName;

ng-submit not triggering in angularjs

I got no error in my console, but my ng-submit is just not triggering. I debug by putting something in my controller, it did trigger, means it's not the problem of my controller not loading.. Below is my source code
(function() {
angular.module('MyApp')
.controller('SignupCtrl', SignupCtrl);
SignupCtrl.$inject = ['$scope', '$rootScope', '$location', '$window', '$auth'];
function SignupCtrl($scope, $rootScope, $location, $window, $auth) {
console.log('hello') // triggered
var ctrl = this;
ctrl.signup = signup;
function signup() {
console.log('trigger') // nope??
}
}
});
View
<form ng-submit="signup()">
<div class="form-group">
<label for="name">First Name</label>
<input required type="text" name="fname" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" autofocus>
</div>
<button type="submit" class="btn btn-success">Sign up</button>
</form>
try this:
signup.js
(function () {
/* jshint validthis: true */
'use strict';
angular
.module('MyApp')
.controller('Signup', Signup);
Signup.$inject = ['$scope', '$rootScope', '$location', '$window', '$auth'];
function Signup($scope, $rootScope, $location, $window, $auth) {
var vm = this;
vm.signup = signup;
vm.user = ...;
function signup() {
console.log('trigger');
}
}
})();
signup.html
<section id="signup-view" data-ng-controller="Signup as vm">
<form>
<div class="form-group">
<label for="name">First Name</label>
<input required type="text" name="fname" id="fname" placeholder="First Name" class="form-control" ng-model="vm.user.fname" autofocus>
</div>
<button class="btn btn-success" data-ng-click="vm.signup()">Sign up</button>
</form>
</section>
As a side note, you missed two ';' in your code. I suggest you regularly test your JS code with a tool like JSHint.

angularjs JavaScript inheritance, fail to bind data from view to a controller

what am trying to do is to get data from the form use it in my controller in HTTP post call but it's not working
I know i might have problem with inheritance of scopes but icant solve it.
here is my controller code:
.controller('SignUpCtrl', function($scope, $http, $state) {
$scope.submit = function() {
var url = 'http://localhost:3000/register';
var user = {
email: $scope.email,
password: $scope.password,
};
console.log($scope.user);
$http.post(url, user)
.success(function(res){
console.log('You are now Registered');
//$state.go('app.items');
})
.error(function(err){
console.log('Could not register');
// $state.go('error');
});
};
})
Here is the code of my Template:
<form name="register">
<div class="list">
<label class="item item-input no-border">
<input name="fullname" type="text" ng-model="fullname" placeholder="Full Name" required="">
</label>
<label class="item item-input">
<input name="email" type="email" ng-model="user.email" placeholder="Email" required="">
</label>
<p class="blue-font" ng-show="register.email.$dirty && register.email.$invalid">Please Write valid Email.</p>
<label class="item item-input">
<input name="password" type="password" ng-model="user.password" placeholder="Password" required="">
</label>
<button ng-click="submit();" ng-disabled="register.$invalid" type="submit" class="button signup-btn sharb-border white-font blue-bg-alt border-blue-alt ">
Sign Up
</button>
</div>
</form>
Note: i tried the ng-submit its not really the problem
Inside the controller.
.controller('SignUpCtrl', function($scope, $http, $state) {
$scope.user = {
email: '',
password: ''
};
$scope.submit = function() {
And this
var user = {
email: $scope.user.email,
password: $scope.user.password
};
Also drop the ; in ng-click
<button ng-click="submit()" ...>
Try to use rootScope (docs.angularjs.org/$rootScope").

getting data back to controller from form

I have this form below. When I change the text fields, it shows the changes here
<div>
{{authform.email}}{{authform.password}}
</div>
but when I try to submit the form by ng-click="signup()" on a button, it doesn't send me the value of text fields.
below is my code
<div class="col-md-12" ng-controller="authCtrl">
<div class="row">
<div class="col-md-14">
<div class="jumbotron">
<form>
<div class="createUserDiv"><input type="text" name="email" placeholder="enter your email address" ng-model="authform.email"/></div>
<div class="createUserDiv"><input type="text" name="password" placeholder="enter your password" ng-model="authform.password"/></div>
<div class="createUserDiv"><input type="text" name="confirmpassword" placeholder="confirm your password" ng-model="authform.confirmpassword"/></div>
<p><a class="btn btn-lg btn-success" ng-click="signup()">Splendid!<span
class="glyphicon glyphicon-ok"></span></a></p>
</form>
<div>
{{authform.email}} {{authform.password}}
</div>
</div>
</div>
</div>
</div>
here is my js
angular.module('myAPP')
.controller('authCtrl', function ($scope, $http, $location) {
$scope.signup = function() {
$scope.authform = {};
$scope.authform.email = "";
$scope.authform.password = "";
$scope.authform.confirmpassword = "";
var data = {
"dataBlob": {
"email": $scope.authform.email,
"password": $scope.authform.confirmpassword
}
};
console.log($scope.authform.email);
});
my console.log is coming up empty ...null....I am not sure why is it not binding the fields to data. I am pretty new to angular so I am still trying to figure out these things.
Stat your controller like this:
angular.module('myAPP')
.controller('authCtrl', function ($scope, $http, $location) {
$scope.authForm = {};
Then change your signup method to do this:
$scope.signup = function() {
console.log($scope.authForm);
}
Your values are already bound, but when you called $scope.authForm = {}; inside of signup, you are overwriting all of your values.
Also instead of ng-click="signup()" on your button, do this:
<form ng-submit="signup()">
Which will allow you to implement validations and submit on [enter] keypress when the user in an input field
For an example, see this fiddle

How to submit a form using angular ui bootstrap's modal and csrf

I would like to submit a form using Angular UI Bootstrap's modal. I'm instantiating the modal like:
AdminUsers.factory('ProjectsService', ['$resource', function($resource) {
return $resource('/api/users?sort=createdAt desc');
}]).controller('AdminUsersCtrl', ['ProjectsService', '$scope', '$http', '$modal', '$log', function(ProjectsService, $scope, $http, $modal, $log, $modalInstance) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: '../templates/userModal.html',
controller: function($scope, $modalInstance) {
$scope.user = {};
$scope.ok = function () { $modalInstance.close($scope.user); };
$scope.cancel = function () { $modalInstance.dismiss('cancel'); };
},
resolve: {
items: function () {
return $scope.user;
}
}
});
modalInstance.result.then(function (user) {
$scope.user = user;
$http.post('/api/users/new', $scope.user).success(function() {
$scope.users.unshift($scope.user);
});
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}
PS: Please note the controller above does have other methods that is not being displayed above.
The code in my userModal.html is:
<div class="modal-header">
<button type="button" class="close" ng-click="cancel()">×</button>
<h6>New customer</h6>
</div>
<div class="modal-body">
<form class="form-horizontal fill-up separate-sections">
<div>
<label>Name</label>
<input type="text" ng-model="user.name" placeholder="Name" />
</div>
<div>
<label>Email</label>
<input type="email" ng-model="user.email" placeholder="Email" />
</div>
<div>
<label>Admin</label>
<select class="form-control" ng-model="user.admin"
ng-options="option as option for option in [true, false]"
ng-init="user.admin=false"></select>
<input type="hidden" name="user.admin" value="{{user.admin}}" />
</div>
<div>
<label>Password</label>
<input type="password" ng-model="user.password" placeholder="Password" />
</div>
<div>
<label>Password confirmation</label>
<input type="password" ng-model="user.confirmation" placeholder="Password confirmation" />
</div>
<div class="divider"><span></span></div>
<div class="divider"><span></span></div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-blue btn-lg" ng-click="ok()">Save</button>
<button class="btn btn-default btn-lg" ng-click="cancel()">Cancel</button>
<input type="hidden" name="_csrf" value=_csrf />
</div>
The problem lies with the hidden input. I need to submit the csrf with form to the server but I don't know how. If this was a jade template I could simply:
input(type="hidden", name="_csrf", value=_csrf)
and Sails/Express would deal with the rest. But because this is a html template used by Angular only, I don't know how to access the _csrf key. I've tried looking into window.document.cookie however it returned undefined.
Can anyone shed some light on this?
Many thanks

Categories