We Keep Coding

Angularjs Modal window implementation in my application - javascript

I need to implement modal window for my application but I am not able to do it, I saw multiple examples on net for the same but still, not able to get it proper in my application. I tried to replicate this plunker example in my application http://plnkr.co/edit/M35rpChHYThHLk17g9zU?p=preview
I am getting $modal.open() problem is javascript console as it is not able to read property "Cannot read property 'open' of undefined
at Scope.open"
Below is my code for the same.
app.js
(function() {
var app = angular.module('app', ['ui.bootstrap', 'ngFileUpload', 'bootstrap.fileField','angularUtils.directives.dirPagination','ui.router','ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/newMember', {
templateUrl: 'resources/templates/onBoard.jsp',
controller: 'onBoardCtrl'
})
.when('/toBeInitiated', {
templateUrl: 'resources/templates/toBeInitiated.jsp',
controller: 'tobeinitiatedCtrl'
})
.when('/initiated', {
templateUrl: 'resources/templates/initiated.jsp',
controller: 'initiatedCtrl'
})
.when('/pending', {
templateUrl: 'resources/templates/pendingWithFadv.jsp',
controller: 'pendingFadvCtrl'
})
.when('/inProgress', {
templateUrl: 'resources/templates/inProgress.jsp',
controller: 'inProgressCtrl'
})
.when('/completed', {
templateUrl: 'resources/templates/completed.jsp',
controller: 'completedCtrl'
})
.when('/accessList', {
templateUrl: 'resources/templates/accessList.jsp',
controller: ''
})
.when('/dataUpload', {
templateUrl: 'resources/templates/dataUpload.jsp',
controller: ''
})
.otherwise({redirectTo: '/'});
}]);
app.controller('uploadTestCtrl1',['$scope','$http',function($scope, $http){
$scope.loading = true;
$scope.doUpload = function(){
//console.log('title',$scope.title);
$scope.loading = true;
var file1 = $scope.uploadFile
//var file = $scope.myFile
console.log('uploadFile',$scope.uploadFile);
//console.log('uploadFile',$scope.myFile);
//alert('Upload Initiated');
//create form data object
var fd = new FormData();
//var file =$scope.myFile;
//console.log('file is ' + JSON.stringify(file));
fd.append('title',$scope.title);
fd.append('file', file1);
//console.dir(fd);
//send the file / data to your server
$http.post('continueFileUpload', fd, {
withCredentials : false,
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(data){
$scope.loading = false;
//do something on success
console.log("success");
alert("Data Saved Successfully");
}).error(function(data, status, headers, config){
//do something on error
$scope.loading = false;
alert(data.message);
console.log("failed");
})
}
}]);
app.controller('uploadTestCtrl',['$scope','$http',function($scope, $http){
$scope.doUpload = function(){
//console.log('title',$scope.title);
var file1 = $scope.uploadFile
//var file = $scope.myFile
console.log('uploadFile',$scope.uploadFile);
//console.log('uploadFile',$scope.myFile);
//alert('Upload Initiated');
//create form data object
var fd = new FormData();
//var file =$scope.myFile;
//console.log('file is ' + JSON.stringify(file));
fd.append('title',$scope.title);
fd.append('file', file1);
//console.dir(fd);
//send the file / data to your server
$http.post('continueFileUpload1', fd, {
withCredentials : false,
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(data){
//do something on success
console.log("success");
alert("Data Saved Successfully");
}).error(function(data, status, headers, config){
//do something on error
alert(data.message);
console.log("failed");
})
}
}]);
app.controller('AppController',function ($scope) {
$scope.name = "Admin";
});
app.controller('onBoardCtrl',['$scope','$http',function($scope, $http){
$scope.empList = [];
$scope.addemp = {};
$scope.createFailed=false;
$scope.saveEmp = function(){
$scope.empList.push($scope.addemp);
$http({
url: 'onBoardSubmit',
method: "POST",
data: JSON.stringify({empId: $scope.addemp.empId, empName: $scope.addemp.empName, empEmail: $scope.addemp.empEmail, empProgramName: $scope.addemp.empProgramName}),
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.createFailed=false;
alert("Data Saved Successfully");
$scope.reset();
}).error(function (data, status, headers, config) {
console.log("failed");
$scope.createFailed=true;
$scope.error=data.message;
alert(data.message);
});
};
$scope.reset = function() {
$scope.addemp = {};
$scope.onboardform.$setPristine();
}
}]);
app.controller('tobeinitiatedCtrl',['$scope','$http',function($scope, $http,$modal){
$scope.initiate=[];
$scope.names=[];
$scope.action='initiate';
//alert("tobeinitiated");
$scope.toBeInitiatedOnLoad = function(){
$scope.loading = true;
//alert($scope.id);
$http({
url: 'toBeInitiated',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.loading = false;
//$scope.initiate = angular.copy(data);
//$scope.initiate.push(data);
$scope.names=data;
//$scope.initiate = angular.copy($scope.names);
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
$scope.toggleSelection=function toggleSelection(x,conf,initiate,initiatedFor){
alert("change");
//$scope.initiate=[];
var idx = $scope.names.indexOf(initiatedFor);
alert(idx);
if (conf)
{
$scope.initiate.push(x);
//alert($scope.initiate[0].empName);
}
else
{
//var idx1 = initiate.indexOf(x.initiatedFor);
for (var i=0;i<initiate.length;i++)
{
if (angular.equals(initiate[i],x))
initiate.splice(i,1);
}
//alert("false");
}
};
$scope.open = function open () {
alert("Hi");
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl
});
};
$scope.resendIntitate = function(){
//$scope.name={};
var index = 0;
$scope.initiate.forEach(function (name) {
console.log('rows #' + (index++) + ': ' + JSON.stringify(name));
});
/*var data ={
initiatedFor : $scope.name.initiatedFor
}*/
alert(JSON.stringify($scope.initiate));
//alert(JSON.stringify($scope.initiate));
$http({
url: 'fromInitiated',
method: "POST",
data:JSON.stringify($scope.initiate),
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
//$scope.loading = false;
//$scope.initiate = angular.copy(data);
//$scope.initiate.push(data);
//$scope.names=data;
//$scope.initiate = angular.copy($scope.names);
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);;
app.controller('ModalInstanceCtrl',function ($scope, $uibModalInstance, items) {
});
app.controller('initiatedCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
$scope.initiatedOnLoad = function(){
$http({
url: 'initiated',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);
app.controller('pendingFadvCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
$scope.pendingFadvOnLoad = function(){
$http({
url: 'pendingWithFadv',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);
app.controller('inProgressCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
$scope.inProgressOnLoad = function(){
$http({
url: 'inProgress',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);
app.controller('completedCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
$scope.completedOnLoad = function(){
$http({
url: 'completed',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);
app.controller('TableData', function($scope, $http) {
$http.get("table_data.json")
.success(function (response) {
$scope.names = response.records;
for (var i=0; i<$scope.names.length; i++){
$scope.names[i].ReqDateParsed = new Date($scope.names[i].ReqDate);
$scope.names[i].InitDateParsed = new Date($scope.names[i].InitDate);
$scope.names[i].CompDateParsed = new Date($scope.names[i].CompDate);
$scope.names[i].DbDateParsed = new Date($scope.names[i].DbDate);
}
$scope.sortType = 'EmpName';
$scope.sortReverse = false;
});
});
app.controller('TabController', function(){
this.tab = 1;
this.setTab = function(newValue){
this.tab = newValue;
};
this.isSet = function(tabName){
return this.tab === tabName;
};
this.content = details;
});
app.directive('toBeInitiated', function(){
return{
restrict: 'E',
templateUrl: 'toBe-Initiated.html'
};
});
var details = [
{
description: "Description1",
accessCount: 2,
greenCount: 3,
orangeCount: 2
}
];
app.factory('Excel',function($window){
var uri='data:application/vnd.ms-excel;base64,',
template='<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64=function(s){return $window.btoa(unescape(encodeURIComponent(s)));},
format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];})};
return {
tableToExcel:function(tableId,worksheetName){
var table=$(tableId),
ctx={worksheet:worksheetName,table:table.html()},
href=uri+base64(format(template,ctx));
return href;
}
};
})
.controller('MyCtrl',function(Excel,$timeout){
$scope.exportToExcel=function(tableId){ // ex: '#my-table'
$scope.exportHref=Excel.tableToExcel(tableId,'sheet name');
$timeout(function(){location.href=exportHref;},100); // trigger download
}
});
})();
toBeInitiated.jsp
<!-- <div img src="resources/images/spinner.jpg" ng-show='loading'> -->
<div class="col-md-1" > </div>
<div class="col-md-10">
<!-- <input type="button" id="btnExport" value=" Export Table data into Excel " onclick="exportToExcel()" /> -->
<!-- <button type="submit" class="btn btn-primary" id="btnExport" onclick="exportToExcel()">Export to Excel</button> -->
<!-- <button class="btn btn-link" id="btnExport" > --> <!-- ng-click="exportToExcel('#toBeInitiatedData')"> -->
</span> Export to Excel
<!-- </button> -->
<div class="data" id="toBeInitiatedData" data-ng-controller="tobeinitiatedCtrl" data-ng-init="toBeInitiatedOnLoad()">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
test
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<table class="table table-hover table-condensed">
<thead>
<tr>
<!-- <th>S.No.</th> -->
<!-- <th>Employee ID</th> -->
<th>
<a href="#" ng-click="sortType = 'EmpId'; sortReverse = !sortReverse" ng-model="initiatedFor">
Employee ID
<span ng-show="sortType == 'EmpId' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'EmpId' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<!-- <th>Employee Name</th> -->
<th>
<a href="#" ng-click="sortType = 'EmpName'; sortReverse = !sortReverse" ng-model="empName">
Employee Name
<span ng-show="sortType == 'EmpName' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'EmpName' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<!-- <th>Requested By</th> -->
<th>
<a href="#" ng-click="sortType = 'ReqBy'; sortReverse = !sortReverse" ng-model="initiatedBy">
Requested By
<span ng-show="sortType == 'ReqBy' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'ReqBy' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'ReqDateParsed'; sortReverse = !sortReverse" ng-model="requestedDate">
Requested Date
<span ng-show="sortType == 'ReqDateParsed' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'ReqDateParsed' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>Review Data</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="x in names | orderBy:sortType:sortReverse | filter:query | itemsPerPage:10">
<!-- <td>{{x.SNo}}</td> -->
<td>{{x.initiatedFor}}</td>
<td>{{x.empName}}</td>
<td>{{x.initiatedBy}}</td>
<td>{{x.requestedDate | date: 'dd-MMM-yyyy'}}</td>
<td><button type="button" class="btn btn-link" ng-click="open()">View {{x.initiatedFor}}</button></td>
<td>
<select name="action" class="selectContainer actionSelect form-control" ng-model= "action"title="Select 1 action" width="50px">
<option value="resend">Resend</option>
<option value="initiate">Initiate</option>
</select>
</td>
<td><input type="checkbox" ng-model="confirmed" ng-click="toggleSelection(x,confirmed,initiate,initiatedFor)" value="{{x}}" /></td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true"></dir-pagination-controls>
<button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button>
</div>
<div>
<!-- <button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button> -->
</div>
</div>
<div class="col-md-1"> </div>
<!-- </div> --
home.jsp
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html>
<head>
<title>Background Check App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body ng-app="app" ng-controller="TabController as tab">
<div class="container-fluid" ng-controller="TableData">
<div class="row jumbotron" ng-controller="AppController" ng-include="'resources/templates/header.jsp'"></div>
<!-- <div class="row" ng-include="'templates/navigation.html'"></div> -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-7 tab" ng-include="'resources/templates/navigation.jsp'"></div>
<div class="col-md-1"></div>
<div class="col-md-3">
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q" ng-model="query">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<!-- <button class="close">×</button> -->
</form>
</div>
</div>
<hr>
<div class="row" id="home" ng-show="tab.isSet(1)" ng-include="'resources/templates/homeData.jsp'"></div>
<!-- <toBe-Initiated ng-show="tab.isSet(2)"></toBe-Initiated> -->
<!-- <div class="row" ng-show="tab.isSet(2)" id="toBeInitiated" ng-include="'resources/templates/toBeInitiated.jsp'"></div> -->
<!-- <div class="row" ng-show="tab.isSet(3)" id="initiated" ng-include="'resources/templates/initiated.jsp'"></div>
<div class="row" ng-show="tab.isSet(4)" id="pending" ng-include="'resources/templates/pendingWithFadv.jsp'"></div>
<div class="row" ng-show="tab.isSet(5)" id="inProgress" ng-include="'resources/templates/inProgress.jsp'"></div>
<div class="row" ng-show="tab.isSet(6)" id="completed" ng-include="'resources/templates/completed.jsp'"></div>
<div class="row" ng-show="tab.isSet(7)" id="accessList" ng-include="'resources/templates/accessList.jsp'"></div>
<div class="row upload" ng-show="tab.isSet(8)" id="dataUpload" ng-include="'resources/templates/dataUpload.jsp'"></div>
<div class="row" ng-show="tab.isSet(9)" id="newMember" ng-include="'resources/templates/onBoard.jsp'"></div> -->
<div class="footer"></div>
</div>
<div ng-view></div>
<!--scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="resources/angular/angular.js"></script>
<!-- <script src="resources/angular/ui-bootstrap-tpls.js"></script> -->
<!-- <script src="resources/angular/ui-bootstrap.js"</script> -->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.0.js"</script>
<script src="http://urigo.github.io/angular-spinkit/javascripts/angular-spinkit.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="resources/angular/bootstrap-table-angular.js"></script>
<script src="resources/angular/bootstrap-table-all.js"></script>
<script src="resources/scripts/app.js"></script>
<script src="resources/scripts/loginValidate.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="resources/angular/angular-bootstrap-file-field.js"></script>
<!-- <script src="js/app.js"></script> -->
<!-- <script src="silviomoreto-bootstrap-select-a8ed49e/dist/js/bootstrap-select.js"></script> -->
<!-- <script src="https://code.jquery.com/jquery.js"></script> -->
<script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="resources/angular/ng-file-upload/ng-file-upload-shim.js"></script> <!-- for no html5 browsers support -->
<script src="resources/angular/ng-file-upload/ng-file-upload.js"></script>
<script src='resources/angular/angular-upload.min.js'></script>
<script src="resources/angular/dirPagination.js"></script>
<script src="resources/angular/angular-route.js"></script>
<!--scripts -->
</body>
</html>

app.controller('tobeinitiatedCtrl',['$scope','$http',function($scope, $http,$modal){
you do not inject $modal hence $modal will be undefined.
try this instead:
app.controller('tobeinitiatedCtrl',['$scope','$http','$modal',function($scope, $http,$modal){

Related

I have a button named "add realm", when I click the button, a pop up form should open and submit the request through POST, after I click submit.
How to do the pop up thing in AngularJS?

You can refer below example,
index.html
<body ng-app="plunker">
<div ng-controller="ModalCtrl">
<button class="btn btn-info" ng-click="open()" style="margin: 15px;">Open Modal</button>
<h2 style="color: red;">{{result}}</h2>
</div>
</body>
script.js
app.controller('ModalCtrl', function($scope, $uibModal) {
$scope.open = function() {
var modalInstance = $uibModal.open({
templateUrl: "modalContent.html",
controller: "ModalContentCtrl",
size: '',
});
modalInstance.result.then(function(response){
$scope.result = `${response} button hitted`;
});
};
})
app.controller('ModalContentCtrl', function($scope, $uibModalInstance) {
$scope.ok = function(){
$uibModalInstance.close("Ok");
$http.post('/ServerRequest/PostDataResponse', data, config)
.success(function (data, status, headers, config) {
$scope.PostDataResponse = data;
})
.error(function (data, status, header, config) {
$scope.ResponseDetails = "Data: " + data +
"<hr />status: " + status +
"<hr />headers: " + header +
"<hr />config: " + config;
});
}
$scope.cancel = function(){
$uibModalInstance.dismiss();
}
});
modalContent.html
<div class="modal-header">
<h3>Modal header</h3>
</div>
<div class="modal-body">
<h4>Just something random here</h4>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

I need to execute two functionalities: Adding and Deleting a User to/from the database (using Mongoose). However, on execution I get a 200 OK page and a blank username.
Is there an issue with the ajax calls?
I am trying to extract user input from a Form (for adding) and make ajax calls to refresh the updated list.
The code for it is below:
frontend.js
console.log('Frontend Reached');
$(document).ready(function() {
/*$(".delete_user").click(function(){
});*/
var url = '/users/delete_user';
var user_url = '/users/add_user';
function load_users(e) {
$.ajax({
url: 'userview.ejs',
dataType: 'text',
type: 'post',
ContentType: 'application/x-www-form-urlencoded',
data: $('#list').serialize(), //$('#user_form').serialize()
success: function(data, textStatus, jQxhr) {
$('#list').load('userview.ejs #list');
//$('#user_form').submit( load_users );
},
error: function(jqXhr, textStatus, errorThrown) {
console.log(errorThrown);
}
});
e.preventDefault();
}
$('#user_form').on('submit', '#user_form', function(e) {
e.preventDefault();
var user_name = $("#nameinput").val();
var user_age = $("#ageinput").val();
$.ajax({
url: 'userview.ejs',
dataType: 'text',
type: 'post',
ContentType: 'application/x-www-form-urlencoded',
data: {
'user_name': user_name,
'user_age': user_age
},
success: function(data, textStatus, jQxhr) {
$('#user_form').submit(load_users);
load_users();
},
error: function(jqXhr, textStatus, errorThrown) {
console.log(errorThrown);
}
});
e.preventDefault();
}); //onclick
$(document).on('click', '.delete_user', function(e) {
e.preventDefault();
var user_id = $(this).attr('data-id');
//console.log(user_id);
var data = {
user_id: user_id
};
$.ajax({
url: 'userview.ejs',
dataType: 'text',
type: 'post',
ContentType: 'application/x-www-form-urlencoded',
data: {
data
},
success: function(data, textStatus, jQxhr) {
// $('#list').html( data );
load_users();
},
error: function(jqXhr, textStatus, errorThrown) {
console.log(errorThrown);
}
});
e.preventDefault();
}); //onclick delete
}); //document ready
userview.ejs
<meta charset="UTF8">
<link href="javascripts/frontend.js">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/userlist.css">
<link href='//fonts.googleapis.com/css?family=Amatic SC' rel='stylesheet'>
<link href='//fonts.googleapis.com/css?family=NTR' rel='stylesheet'>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></script>
<script>
</script>
<title>Userlist</title>
<script src="javascripts/frontend.js"></script>
</head>
<div class="container-fluid">
<div class="row">
<h1><strong>FORM</strong></h1>
<hr id="hr2" style="border: 6px solid palevioletred">
<div id="black">
<form class="form-horizontal" method="post" action="/users/add_user" id="user_form">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Name : </label>
<div class="col-md-4">
<input id="nameinput" name="name" placeholder="Enter Username" class="form-control input-md" type="text" value="Name" onfocus="if (this.value=='Name') this.value='';">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Age : </label>
<div class="col-md-4">
<input id="ageinput" name="age" placeholder="Enter Age" class="form-control input-md" type="number">
</div>
</div>
<!-- Button -->
<!-- Button (Double) -->
<div class="form-group">
<div class="col-md-8">
<button id="singlebutton" name="button1id" class="btn btn-success"><b>Add User</b></button>
</div>
</div>
</form>
<body>
<h1><strong>USERS</strong></h1>
<hr id="hr1" style="border: 6px solid #7ec4ec;">
<ul id="list" class="triangle">
<!-- Link trigger modal -->
<!-- Modal -->
<div class="modal fade" id="openModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit :</h4>
</div>
<div class="modal-body">
<form>
Name:<input type="text" name="modal_username" id="nameId" value="" /> Age:
<input type="number" name="modal_age" id="ageId" value="" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<% for(var i=0; i<userlist.length; i++) {%>
<li>
<%= userlist[i].name %> :
<%= userlist[i].age %> Delete || <a data-toggle="modal" href="#openModal" data-target="#openModal" data-id="<%= userlist[i]._id %>" id="update" title="Update user info"
class="update_user">Update</a></li>
<% } %>
</ul>
</body>
</fieldset>
</div>
</div>
</div>
</html>
This is userController.js
var User = require('../models/usermodel.js');
var userService = require('../services/userService');
var userController = {
add: function(request, response) {
var user_name = request.body.user_name;
var user_age = request.body.user_age;
var newUser = new User({
name: user_name,
age: user_age
});
console.log(newUser);
userService.add(newUser, function(err, added) {
if (err != null) {
response.send(500);
} else {
response.send(200);
}
});
},
delete: function(request, response) {
var userId = request.body.user_id;
userService.delete(userId, function(err, deleted) {
if (err != null) {
response.send(500)
} else {
response.send(200);
}
});
}
};
module.exports = userController;

console.log('Frontend Reached');
$(document).ready(function() {
var url = '/users/delete_user';
var user_url = '/users/add_user';
function load_users() {
$.ajax({
url: 'userview.ejs',
dataType: 'text',
type: 'post',
ContentType: 'application/x-www-form-urlencoded', //not advisable or use html instead
data: $('#list').serialize(), //it should be refer to form tag
success: function(data, textStatus, jQxhr) {
console.log(data);
//#list should be the html wrapper to where you load the response data
$('#list').html(data); //view the response in html
},
error: function(jqXhr, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
$('#user_form').on('submit', '#user_form', function(e) {
e.preventDefault();
var user_name = $("#nameinput").val();
var user_age = $("#ageinput").val();
$.ajax({
url: 'userview.ejs',
dataType: 'text',
type: 'post',
ContentType: 'application/x-www-form-urlencoded',
data: {
'user_name': user_name,
'user_age': user_age
},
success: function(data, textStatus, jQxhr) {
load_users();
},
error: function(jqXhr, textStatus, errorThrown) {
console.log(errorThrown);
}
});
e.preventDefault();
}); //onclick
$(document).on('click', '.delete_user', function(e) {
e.preventDefault();
var user_id = $(this).attr('data-id');
$.ajax({
url: 'userview.ejs',
dataType: 'json',
type: 'post',
ContentType: 'application/x-www-form-urlencoded',
data: {
user_id: user_id
},
success: function(data, textStatus, jQxhr) {
load_users();
},
error: function(jqXhr, textStatus, errorThrown) {
console.log(errorThrown);
}
});
e.preventDefault();
}); //onclick delete
}); //document ready

i want make a login with angularjs and ionic. but when i run this program, this program is error. the error is :
TypeError: Cannot read property 'username' of undefined
anyone help me?
form :
<body ng-app="apps" ng-controller="PostController as postCtrl">
<ion-view view-title="Please Sign in">
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Name" ng-model="postCtrl.inputData.username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="postCtrl.inputData.password">
</label>
</div>
<div class="alert alert-danger" role="alert" ng-show="errorMsg">{{errorMsg}}</div>
<button class="button button-full button-balanced" ng-click="postForm()">Sign In</button>
</ion-content>
</ion-view>
<script src="controller.js"></script>
</body>
controller :
angular.module('apps', ['ionic'])
.controller('PostController', ['$scope', '$http', function($scope, $http) {
$scope.postForm = function() {
var encodedString = 'username=' +
encodeURIComponent(this.inputData.username) +
'&password=' +
encodeURIComponent(this.inputData.password);
$http({
method: 'POST',
url: 'check-login.php',
data: encodedString,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data, status, headers, config) {
console.log(data);
if ( data.trim() === 'correct') {
window.location.href = 'home.html';
} else {
$scope.errorMsg = "Login not correct";
}
})
.error(function(data, status, headers, config) {
$scope.errorMsg = 'Unable to submit form';
})
}
}]);

In your controller do
var self = this;
self.inputData = {};
And replace
this.inputData.username with self.inputData.username
this.inputData.password with self.inputData.password

I tried a sample. Look at this
$scope.inputData = {
username: null,
password: null
}
http://jsfiddle.net/JKBbV/1179/

You can just do it in the angular way, like below.. that should be the correct purpose of using ng-model..
The Form:
<body ng-app="apps" ng-controller="PostController as postCtrl">
<ion-view view-title="Please Sign in">
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Name" ng-model="username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="password">
</label>
</div>
<div class="alert alert-danger" role="alert" ng-show="errorMsg">{{errorMsg}}</div>
<button class="button button-full button-balanced" ng-click="postForm()">Sign In</button>
</ion-content>
</ion-view>
<script src="controller.js"></script>
</body>
controller :
angular.module('apps', ['ionic'])
.controller('PostController', ['$scope', '$http', function($scope, $http) {
$scope.username="";$scope.password:"";
$scope.postForm = function() {
var encodedString = 'username=' +
encodeURIComponent($scope.username) +
'&password=' +
encodeURIComponent($scope.username);
$http({
method: 'POST',
url: 'check-login.php',
data: encodedString,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data, status, headers, config) {
console.log(data);
if ( data.trim() === 'correct') {
window.location.href = 'home.html';
} else {
$scope.errorMsg = "Login not correct";
}
})
.error(function(data, status, headers, config) {
$scope.errorMsg = 'Unable to submit form';
})
}
}]);

I got undefined inside my ng-model. I already defined inside my controller. $scope.rule.message no issue but for $scope.rule.ruleId got undefined.
html
<form>
<div class="form-group">
<label>Group</label> <select ng-model="rule.ruleId" ng-repeat="rule in rules">
<option value="{{rule.ruleId}}">
#{{rule.keyword}}
</option>
</select>
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" cols="" name="" rows="" ng-model="rule.message">
</textarea>
</div>
<div class="form-group">
<button class="btn btn-default" type="submit" ng-click="create()">Save</button>
</div>
</form>
js
mzsmsControllers.controller('MemberBlastCreateCtrl', ['$scope', '$http',
'$location',
function($scope, $http, $location) {
$scope.rule = {};
$http({
method: 'GET',
url: 'http://example.com/get_all_rules.php?fbId=' + sessionStorage.id
}).
success(function(data, status, headers, config) {
$scope.rules = data.rules;
}).
error(function(data, status, headers, config) {
alert("No internet connection.");
});
$scope.create = function() {
$http({
method: 'GET',
url: 'http://example.com/create_blast.php?fbId=' + sessionStorage.id +
'&ruleId=' + $scope.rule.ruleId + '&message=' + $scope.rule.message
}).
success(function(data, status, headers, config) {
alert(JSON.stringify(data));
alert("SMS Blast successfuly created.");
$location.path("/member/blast");
}).
error(function(data, status, headers, config) {
alert("No internet connection.");
});
}
}
]);

I guess the problem is that ng-repeat creates a new scope, try changing the ng-repeat:
<select ng-model="rule.ruleId" ng-repeat="r in rules">
<option value="{{r.ruleId}}">
#{{r.keyword}}
</option>
</select>

I am pretty new to angular and can't for the life of me figure out what is wrong with this bit of code. I would be happy to supply more code as is needed.
The issue is that none of the angular actions are happening. The table does not get populated and none of the buttons do anything. The http get never makes it to my server. So, I was wondering if anyone wouldn't mind taking a quick look and letting me know if I made a dumb mistake.
here is my angular code:
function locateController($scope, $http) {
$scope.init = function () {
$http.get('#(Url.Action<WorkorderController>(c => c.GetLocateNumbers(Model.Id)))').success(function (data) {
$scope.model = data;
$scope.locateNumber = $scope.locateNumbers();
$("#loading").css('display', 'none');
$("#ctrl").css('visibility', 'visible');
$scope.master = angular.copy($scope.model);
});
};
$scope.init();
$scope.reset = function () {
if (confirm('Are you sure you want to discard all your changes?')) {
$scope.model = angular.copy($scope.master);
$(".selected").removeClass("selected");
$scope.locateNumber = $scope.locateNumbers();
};
};
$scope.removeLocate = function (remove) {
if (confirm('Are you sure you want to remove this location number?')) {
var oldLines = $scope.locateNumber;
$scope.labor = [];
angular.forEach(oldLines, function (line) {
if (line != remove) $scope.locateNumber.push(line);
});
}
};
$scope.locateNumbers = function () {
if (!$scope.model) {
return null;
}
var lines = [];
angular.forEach($scope.model, function (item) {
if (item.IsActive) {
lines.push(item);
}
});
return lines;
};
$scope.addLocateLine = function () {
$scope.locateNumber.push({
locationNum: ''
});
};
$scope.dirty = function () {
if ($scope.model === undefined) {
return false;
}
var isDirty = !angular.equals($scope.locateNumber, $scope.master.locateNumbers);
if (isDirty) {
$scope.notice = null;
}
return isDirty;
};
$scope.save = function () {
$scope.model.Size = $scope.locateNumber.length;
$scope.model.locateNumbers = $scope.locateNumber;
$http({
method: 'post',
url: '#(Url.Action<WorkorderController>(c => c.AssignLocate(Model.Id,null)))',
headers: {
"Content-Type": 'application/json',
Accepts: 'application/json'
},
data: { wo: $scope.model }
}).success(function (data, status, headers, config) {
$scope.init();
}).error(function (data, status, headers, config) {
alert('An error has occurred. Please try again later or contact an administrator');
});
};
};
Here is the HTML:
<div class="modal hide" id="assignLocate" data-ng-controller="locateController">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="addRow">Locate Number <button type="button" class="btn btn-warning btn-mini" data-ng-click="addLocateLine()">Add</button></h3>
</div>
<div>
<div class="span3 offset1">
<table cellpadding="0" cellspacing="25" border="0" class="table" id="locateNumbers">
<thead>
<tr>
<th>Locate Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="num in locateNumber">
<td>
<ng-form name="LocateNum">
<input type="text" ng-model="num.LocateNum" class="span2" required name="Input"/>
<span class="alert-error" ng-show="LocatenNum.Input.$error.required"><strong>*Required</strong></span>
</ng-form>
</td>
<td>
<button class="btn btn-mini btn-danger" ng-click="removeLocate(line)">Remove</button>
</td>
</tr>
</tbody>
</table>
<br /><br />
<div>
<div class="span3" style="padding-bottom:25px; margin-left: 0px">
<button type="button" class="btn btn-inverse" ng-click="reset()" ng-disabled="!dirty()">Reset</button>
<button type="button" class="btn btn-primary pull-right" ng-disabled="form.$invalid" ng-click="save()" ng-disabled="!dirty()">Save</button>
</div>
</div>
</div>
</div>
</div>
And here is a js fiddle:
http://jsfiddle.net/exmMY/

Here are issues that I've noticed:
There is no 'ng-app' in HTML.
locateNumbers function sometimes returns null, but other parts of code expect locateNumber to be array.
I didn't excepted further functionality. Changed your sample could be found here: http://plnkr.co/edit/A52VmYLznpNqMLq4XLK0?p=preview