POSTING data from Angular UI bootstrap modal window to PHP - mysql

I have a angular-ui modal, that is controlled with below controller:
var emailModal = angular.module('myApp.emailModal', ['ui.bootstrap', 'ui.bootstrap.tpls']);
emailModal.controller('ModalCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) {
$scope.open = function () {
var modalInstance = $uibModal.open({
templateUrl: 'components/emailModal/emailModalView.html',
backdrop: true,
controller: 'modalInstanceCtrl'
});
}
}]);
emailModal.controller('modalInstanceCtrl', function ($scope, $uibModalInstance, $http) {
//create blank object to handle form data.
$scope.user = {};
//calling our submit function.
$scope.submitForm = function() {
//posting data to php file
$http({
method: 'POST',
url: 'components/emailModal/emailInsert.php',
data: $scope.user, //forms user object
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
if (data.errors) {
//showing errors.
$scope.errorEmail = data.errors.email;
} else {
$scope.message = data.message;
}
});
};
});
This is the actual modal view:
<form name="userForm" ng-submit="submitForm()">
<div class="modal-header">
<h3 class="modal-title">Register</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label>E-Mail Address</label>
<input type="email" name="email" class="form-control" ng-model="user.email" placeholder="Email address" />
<span ng-show="errorEmail">{{errorEmail}}</span>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
Modal loads with no problem, bute once clicked to submit, nothing happens. I get no error once so ever in the console. What am I doing wrong? This is my PHP file, as well:
$errors = array();
$data = array();
// Getting posted data and decodeing json
$_POST = json_decode(file_get_contents('php://input'), true);
// checking for blank values.
if (empty($_POST['email']))
$errors['email'] = 'E-Mail erforderlich.';
if (!empty($errors)) {
$data['errors'] = $errors;
} else {
$data['message'] = 'The data should now be inserted into database!';
}
// response back.
echo json_encode($data);
?>
EDIT 1.
The event is triggered in Dev Tools - Network.
This is what I get:
Request URL: http://localhost:63342/url-to/emailInsert.php
Request method: POST
Remote address: 127.0.0.1:63342
Status code: 200 OK
Version HTTP/1.1
The page is not reloading on submit, at all, there is no error in Dev Tools - Console. It gives a OK status even though the email has not been ineserted into input, therefore it should print an error, which it doesn't do.
Any help is greatly appreciated.

Related

AngularJS, how to display contents of a received JSON object

I have successfully received the JSON object from an API, which is evident from a console.log code. Now, I want to display the various elements in that JSON file. For example, the JSON contains elements like "name" and "url". How do I display these individually, in an h1 HTML element, after clicking the submit button and fetching the JSON file. I'm a newbie and sorry if this is an obvious question, I'm kinda stuck and need help. Thank you in advance!
My HTML Code is:
<body ng-app="myApp">
<div ng-controller="UserCtrl">
Search : <input type="text" placeholder="Search Employees"
ng-model="formData.searchText"/> <br/><br/>
<button ng-click="getByID()">Submit</button>
{{response.data.name}}
</body>
The JS is:
var myApp = angular.module('myApp', []);
myApp.controller('UserCtrl', function($scope, $http) {
var id = "my secret key comes here";
$scope.formData = {};
$scope.searchText;
$scope.getByID = function() {
$http.get("https://rest.bandsintown.com/artists/" + $scope.formData.searchText + "?app_id="+id)
.then(response => {
console.log(response.data.name)
})
}
});
Thank you so much in advance!
You need to use a variable to assign it with the response data and then use it in html. For example to display name from response.data.name:
<body ng-app="myApp">
<div ng-controller="UserCtrl as vm">
Search : <input type="text" placeholder="Search Employees"
ng-model="vm.searchText"/> <br/><br/>
<button ng-click="vm.getByID()">Submit</button>
<h1>{{ vm.name }}</h1>
</body>
In controller:
var myApp = angular.module('myApp', []);
myApp.controller('UserCtrl', function($http) {
let vm = this;
var id = "my secret key comes here";
vm.searchText;
vm.name;
vm.getByID = function() {
$http.get("https://rest.bandsintown.com/artists/" + vm.searchText + "?app_id="+id)
.then(response => {
console.log(response.data.name);
vm.name = response.data.name;
})
}
});
Put the data on $scope:
$scope.getByID = function() {
var url = "https://rest.bandsintown.com/artists/" + $scope.formData.searchText;
var params = { app_id: id };
var config = { params: params };
$http.get(url, config)
.then(response => {
console.log(response.data.name)
$scope.data = response.data;
})
}
Then use the ng-repeat directive:
<body ng-app="myApp">
<div ng-controller="UserCtrl">
Search : <input type="text" placeholder="Search Employees"
ng-model="formData.searchText"/> <br/><br/>
<button ng-click="getByID()">Submit</button>
{{data.name}}<br>
<div ng-repeat="(key, value) in data">
{{key}}: {{value}}
</div>
</div>
</body>
For more information, see
AngularJS ng-repeat Directive API Reference

Trigger preview mode by passing data from one controller to another

I want to trigger a preview mode from one controller onto another using angular service but can't get the final step done. I am trying to get the url from the passed parameter into that ng-src in SideMenuCtrl. Not sure how to do it so that it would happen dynamically.
I have seen a few similar threads but not with a final end result like mine because I am trying to eventually display an image on the screen.
How would I link the passed parameter advert to vm.previewImage/.
var app = angular.module('app', [])
.service('appState', function() {
this.data = {
preview: {
enabled: false,
advert: ''
}
};
this.previewAdvert = function(advert) {
//flick the inPreview variable
this.data.preview = {
enabled: !this.data.preview.enabled,
advert: advert
}
}
})
.controller('SideMenuCtrl', function(appState) {
var vm = this;
vm.preview = appState.data.preview;
})
.controller('ContentCtrl', function(appState) {
var vm = this;
vm.advertUrl = 'http://1.bp.blogspot.com/-vXmHgrrk4ic/UpTbgBkp8eI/AAAAAAAAFjQ/ajBQ9WvwNUc/s1600/gloomy-stripes-dark-background-tile.jpg';
vm.previewAdvert = function() {
console.log('preview/stop preview');
appState.previewAdvert(vm.advertUrl);
}
});
<html ng-app="app">
<body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<div ng-controller="SideMenuCtrl as vm">
<div class="ads" ng-if="vm.preview.enabled">
<img ng-src="{{vm.previewImage}}">
</div>
</div>
<div ng-controller="ContentCtrl as vm">
<label for="adInput">Advert URL</label>
<input type="url" id="adInput" ng-model="vm.advertUrl"></input>
<button ng-mouseenter="vm.previewAdvert()" ng-mouseleave="vm.previewAdvert()">Preview</button>
</div>
</body>
</html>
Your service is shared all right between your controllers. However I noticed that with AngularJs properties from the controller are not always updated when their value change.
When this happens, you can use a function that returns your value and use the function call instead your value in your views. This way, updates are detected.
(NOTE: I moved the "SideMenuCtrl" div under because with the image appearing, the button was not hovered anymore, causing "mouseleave" to be called and that produced a flickering)
var app = angular.module('app', [])
.service('appState', function() {
this.data = {
preview: {
enabled: false,
advert: ''
}
};
this.previewAdvert = function(advert) {
//flick the inPreview variable
this.data.preview = {
enabled: !this.data.preview.enabled,
advert: advert
}
}
})
.controller('SideMenuCtrl', function(appState) {
var vm = this;
vm.getPreviewImage = function(){
return appState.data.preview.advert;
};
vm.isPreviewEnabled = function(){
return appState.data.preview.enabled;
};
})
.controller('ContentCtrl', function(appState) {
var vm = this;
vm.advertUrl = 'http://1.bp.blogspot.com/-vXmHgrrk4ic/UpTbgBkp8eI/AAAAAAAAFjQ/ajBQ9WvwNUc/s1600/gloomy-stripes-dark-background-tile.jpg';
vm.previewAdvert = function() {
console.log('preview/stop preview');
appState.previewAdvert(vm.advertUrl);
}
});
<html ng-app="app">
<body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<div ng-controller="ContentCtrl as vm">
<label for="adInput">Advert URL</label>
<input type="url" id="adInput" ng-model="vm.advertUrl"></input>
<button ng-mouseenter="vm.previewAdvert()" ng-mouseleave="vm.previewAdvert()">Preview</button>
</div>
<div ng-controller="SideMenuCtrl as vm">
<div class="ads" ng-if="vm.isPreviewEnabled()">
<img ng-src="{{vm.getPreviewImage()}}">
</div>
</div>
</body>
</html>

Unable to clear form fields after Submit in Angular

I am new to angular. I have looked up a lot of answers on clearing form fields after submitting but none seems to work.
Here's my HTML code:
<form name="myForm" ng-submit="formSubmit()" class="form-horizontal">
<div class="form-group">
<input type="text" class="form-control" ng-model="user.FullName" placeholder="Full Name" required=""/>
</div>
<div class="form-group">
<input type="text" class="form-control" ng-model="user.Address" placeholder="Address" required=""/>
</div>
<button type="submit" class="btn btn-primary" style="background-color: purple;">Submit</button>
</form>
Here's my JS code:
var myApp = angular.module('myApp', ['ui.router']);
myApp.controller("RegisterCtrl", function ($window,$scope,$http) {
$scope.user={}
$scope.formSubmit=function(){
$http({
method:'POST',
url:'myurl',
data:$scope.user,
headers:{'Content-Type':'application/json'}
}).then(function(res){
console.log(res);
$scope.myForm.$setPristine();
$scope.myForm.$setPristine(true);
$scope.myForm='';
})
}
});
I have tried setPristine as well as setUntouched but none working.
I don't see something strange in your code, i make plnkr based on your code, the modifications i do are below. also put the plnkr sample
CONTROLLER
var myApp = angular.module('myApp', ['ui.router']);
myApp.controller("RegisterCtrl", function ($window,$scope,$http) {
$scope.user={}
$scope.formSubmit=function(){
$http({
method:'POST',
url:'myurl',
data:$scope.user,
headers:{'Content-Type':'application/json'}
}).then(function(res){
$scope.myForm.$setPristine();
$scope.user = {};
}, function(rej){ //error});
}
});
you should try
var myApp = angular.module('myApp', ['ui.router']);
myApp.controller("RegisterCtrl", function ($window,$scope,$http) {
$scope.user={}
$scope.formSubmit=function(){
$http({
method:'POST',
url:'myurl',
data:$scope.user,
headers:{'Content-Type':'application/json'}
}).then(function(res){
$scope.$broadcast('show-errors-reset');
$scope.forms.user = {};
$scope.forms.userFrom.$setPristine = true;
}, function(rej){ //error});
}
});

Unable to show a wrong password in login page

I have a application running with a flask backend and angular frontend. Apparently when a wrong password is entered i want to show a error message. I have tried out ng-show and ng-if both nothing seems to work.
This is the html for my login page -
<div layout="column" layout-align="center center" class="">
<img class="logo" ng-src="assets/images/logo.png">
<h1 class="md-display-2 login-heading">Login to Bassa</h1>
<div layout="row">
<md-input-container>
<label>User name</label>
<input type="text" ng-model="user.user_name"/>
</md-input-container>
<md-input-container>
<label>Password</label>
<input type="password" ng-model="user.password" ng-enter="login()"/>
</md-input-container>
<br>
</div>
<div>
<md-button class="md-raised md-primary" ng-click="login()">Login</md-button>
<md-button class="md-raised md-primary" ng-click="signup()">Signup</md-button>
</div>
And this is the login controller -
(function(){
'use strict';
angular
.module('app')
.controller('LoginCtrl', ['$scope', '$state', 'UserService', LoginCtrl]);
function LoginCtrl($scope, $state, UserService) {
$scope.user = {};
$scope.incorrectCredentials = false;
$scope.login = function(){
UserService.login($scope.user, function(status) {
if (status){
$state.go('home.dashboard');
} else {
$scope.incorrectCredentials = true;
}
});
};
$scope.signup = function() {
$state.go('signup');
};
UserService.removeToken();
}
})();
When the incorrectCredentials becomes true , i want to show a message.
After logging the User service -
var login = function(credentials, cb) {
var $http = $injector.get('$http');
return $http({
method: 'POST',
url: BassaUrl + '/api/login',
transformRequest: function(obj) {
var str = [];
for(var p in obj)
str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]));
return str.join('&');
},
data: credentials,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function (response) {
setToken(response.headers()['token']);
setName(credentials.user_name);
setAuthLevel(response.data.auth);
console.log(response);
cb(true);
}, function(error){
console.log("hello i am here")
cb(false);
});
};
I received a response log -
Object {data: "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final/…ead-protected or not readable by the server.</p>↵", status: 403, config: Object, statusText: "FORBIDDEN"}
It isn't entering the error block , which prevents me from prompting wrong password message.
It was actually my own fault. My custom Interceptor simply swallowed authentication errors.

"[object object]" shown when double-clicking input

Below is the template I am using for the directive. In code we are
fetching the data from a service in that data we have all the
information of that particular person. And from that data we are
showing only first name, last name and designtion or company
affiliation.
<div ng-if="model" class="entry-added">
<span class="form-control"><b>{{model.fullName}}</b>, <br/><span class="small-font">{{(model.designation)?model.designation:model.companyAffiliation}}</span></span>
<a ng-click="removePerson()" class="action-remove"><i class="fa fa-remove"></i></a>
</div>
<div ng-show="!model" class="input-group">
<input type="text"
class="form-control"
name="{{name}}"
id="{{name}}"
placeholder="{{placeholder}}"
ng-required="{{isRequired}}"
typeahead-on-select = "change($item, $model, $label)"
ng-model="model"
typeahead-min-length="3",
typeahead="suggestion for suggestion in searchEmployees($viewValue)"
typeahead-template-url="typeAheadTemplate.html"
typeahead-loading="searching"
typeahead-editable="false">
<script type="text/ng-template" id="typeAheadTemplate.html">
<a class="ui-corner-all dropdown" tabindex="-1">
<div class="col-md-2"><img class="dropdown-image" ng-src="https://people.***.com/Photos?empno={{match.model.employeeNumber}}"></div>
<div>
<div bind-html-unsafe="match.model.fullName"></div>
<div bind-html-unsafe="match.model.designation"></div>
</div>
</a>
</script>
I am using a custom directive to display a search field. The drop down is displaying [object object].
Directive
// In backend taxDeptContact is a Person type object
/*
Directive code
*/
(function () {
'use strict';
angular.module('treasuryApp.directives').directive('employeeSearch', employeeSearch);
employeeSearch.$inject = ['$resource', '$rootScope', 'ErrorHandler'];
function employeeSearch($resource, $rootScope, ErrorHandler) {
return {
restrict: 'E',
require: '^form',
scope: {
model: "=",
isRequired: '#',
submitted: "=",
onSelect: '&',
name: '#',
index:'#'
},
link: function(scope, el, attrs, formCtrl) {
//set required attribute for dynamically changing validations
scope.searchEmployees = function (searchTerm) {
var users = [];
var myResult = [];
var result = $resource($rootScope.REST_URL + "/user/getEmployees", {term: searchTerm}).query().$promise.then(function (value) {
//console.log(value)
$.each(value, function(i, o) {
users.push(o);
});
return users;
});
return result;
}
scope.removePerson = function() {
scope.model=null;
}
scope.userNotSelectedFromTypeahead = function(name) {
if(undefined === formCtrl[name]) {
return false;
}
return formCtrl[name].$error.editable;
};
scope.change = function(item, model, label) {
scope.model = item
scope.onSelect(
{name: scope.name, person: scope.model});
},
templateUrl: 'app/components/common/directives/employee-search.tpl.html'
};
}
})();
View that is using the directive
<div class="form-group">
<label class="col-sm-3>Tax Dept Contact</label>
<div class="col-sm-4">
<employee-search model="reqCtrl.requestObj.taxDepartmentContact" name="taxDeptContact" is-required="false" submitted="reqCtrl.submitted"/>
</div>
</div>
Image of the error occuring
Looks like this may be your trouble spot
typeahead="suggestion for suggestion in searchEmployees($viewValue)"
suggestion for suggestion is pulling the whole object. Have you tried displaying a particular attribute of suggestion?
For example: if you had a suggestion.name attribute you would write:
typeahead="suggestion.name for suggestion in searchEmployees($viewValue)"
Finally got the answer: I used autocomplete="off" in my directive and thats all
<input type="text" autocomplete="off" />