need some help on angular i have no knowledge on, but i have a work to do ^^' . My problem is when i write into my inputs i can't get the ng-model return and get a scope error telling $scope.newemployee is undefined(corrected).
New problem my table 'List' stay empty like my object employee
<!DOCTYPE html>
<html ng-app="employe">
<head>
<meta charset="utf-8" />
<title>
List of employe
</title>
<meta name="viewport" content="with=device-width , initial-scale=0 ,shrink- to-fit=no" />
<link rel="stylesheet" href="./files/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="./files/style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" type="text/javascript">
</script>
<script type="text/javascript" src="./files/code.js">
</script>
</head>
<body>
<div ng-controller="FormController as FormCtrl">
<button ng-click="FormCtrl.setShow(2)">Add new employee</button>
<form class="form-horizontal" ng-controller="ListCtrl" name="infoForm" ng-submit="addEmployee()" ng-show="FormCtrl.isShow(2)" novalidate="" id="infoForm">
{{newemployee}}
<h2>
Add/Edit employee
</h2><!-- NOM -->
<div class="form-group">
<label for="name" class="col-xs-5 control-label">Name</label>
<div class="col-xs-2">
<input type="texte" ng-model:"newemployee.name" class="form-control" ng-required="true" name="name" />
</div>
</div><!-- AGE -->
<div class="form-group">
<label for="age" class="col-xs-5 control-label">Age</label>
<div class="col-xs-2">
<input type="number" ng-model:"newemployee.age" class="form-control" ng-required="true" />
</div>
</div><!-- NICKNAME -->
<div class="form-group">
<label for="nickname" class="col-xs-5 control-label">Nickname</label>
<div class="col-xs-2">
<input type="texte" ng-model:"newemployee.nickname" class="form-control" ng-required="true" />
</div>
</div><!-- EMPLOYEE -->
<div class="form-group">
<label for="employee" class="col-xs-5 control-label">Employee</label>
<div class="col-xs-2">
<label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="Yes" ng-model:"newemployee.yes" value="yes" />Yes</label> <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="No" ng-model:"newemployee.no" value="no" />No</label>
</div>
</div><!-- JOB -->
<div class="form-group">
<label for="job" class="col-xs-5 control-label">Job</label>
<div class="col-xs-2">
<select ng-model:"newemployee.job" class="form-control">
<option>
Founder
</option>
<option>
Market chef
</option>
<option>
Stage
</option>
</select>
</div>
</div><!-- ANNEE -->
<div class="form-group">
<label for="years" class="col-xs-5 control-label">Years</label>
<div class="col-xs-2">
<input type="number" ng-model:"newemployee.years" class="form-control" ng-required="true" />
</div>
</div><!-- BUTTON -->
<div class="center">
<button type="submit" class="btn btn-default btn-success">Validate</button> <button class="btn btn-default btn-warning" ng-click="FormCtrl.setShow(1)">Cancel</button>
</div>
</form>
</div>
</body>
Here angularjs code
(function () {
var app = angular.module('employe', []);
app.controller("FormController", function () {
this.Edit = 1;
this.isShow = function(checkEdit){
return this.Edit == checkEdit;
};
this.setShow = function(setShow){
return this.Edit = setShow ;
};
console.log(this.Edit);
});
app.controller("ListCtrl", ['$scope', function($scope) {
$scope.list = /*employee*/[];
$scope.addEmployee = function(){
$scope.list.push({
name: $scope.newemployee.name,
age : parseInt($scope.newemployee.age),
nickname : $scope.newemployee.nickname,
job : $scope.newemployee.job ,
years : parseInt($scope.newemployee.years),
salarie : $scope.newemployee.yes + $scope.newemployee.no
});
};
}]);
})();
You should probably initialize the newemployee object inside ListCtrl as follows
app.controller("ListCtrl", ['$scope', function($scope) {
$scope.list = /*employee*/ [];
$scope.newemployee = {};
$scope.addEmployee = function() {
$scope.list.push({
name: $scope.newemployee.name,
age: parseInt($scope.newemployee.age),
nickname: $scope.newemployee.nickname,
job: $scope.newemployee.job,
years: parseInt($scope.newemployee.years),
salarie: $scope.newemployee.yes + $scope.newemployee.no
});
};
}]);
Sample input tag
<input type="text" class="form-control" ng-required="true" name="name" ng-model="newemployee.name" />
You have to link the input fields to the properties you want to set. You can do this with ng-model like this:
<input type="texte" class="form-control" ng-required="true" name="name" ng-model="$scope.newemployee.name" />
Related
So I want to validate if the email submitted is valid. Tried to make it work with bootstrap because I have to use it.
Here's the codepen:
https://codepen.io/yytimo/pen/ExWLbLd
<div class="col-md-4">
<div class="form-outline">
<input
type="text"
class="form-control"
id="validationCustomEmail"
value=""
required
/>
<label for="validationCustomEmail" class="form-label">E-Mail</label>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Enter valid e-mail.</div>
</div>
</div>
Found a working solution with some javascript tricks. Try this
(() => {
'use strict';
const forms = document.querySelectorAll('.needs-validation');
Array.prototype.slice.call(forms).forEach((form) => {
form.addEventListener('submit', (event) => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
var email = document.getElementById('validationCustomEmail');
email.oninput = () => {
const re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(!re.test(email.value)){
email.setCustomValidity("Invalid field.");
email.classList.add('is-invalid');
} else {
email.classList.remove('is-invalid');
email.setCustomValidity("")
}
}
}
)();
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<div class="form-outline">
<input
type="text"
class="form-control"
id="validationCustom01"
value="Mark"
required
/>
<label for="validationCustom01" class="form-label">First name</label>
<div class="valid-feedback">Looks good!</div>
</div>
</div>
<div class="col-md-4">
<div class="form-outline">
<input
type="text"
class="form-control"
id="validationCustom02"
value="Otto"
required
/>
<label for="validationCustom02" class="form-label">Last name</label>
<div class="valid-feedback">Looks good!</div>
</div>
</div>
<div class="col-md-4">
<div class="form-outline">
<input
type="text"
class="form-control"
id="validationCustomEmail"
value=""
required
/>
<label for="validationCustomEmail" class="form-label">E-Mail</label>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Enter valid e-mail.</div>
</div>
</div>
<div class="col-md-6">
<div class="form-outline">
<input type="text" class="form-control" id="validationCustom03" required />
<label for="validationCustom03" class="form-label">City</label>
<div class="invalid-feedback">Please provide a valid city.</div>
</div>
</div>
<div class="col-md-6">
<div class="form-outline">
<input type="text" class="form-control" id="validationCustom05" required />
<label for="validationCustom05" class="form-label">Zip</label>
<div class="invalid-feedback">Please provide a valid zip.</div>
</div>
</div>
<div class="col-12">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="invalidCheck"
required
/>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">You must agree before submitting.</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
Use input with type:email can help you.
I have seen similar questions, but am unable to understand the mistake and the way around.
I have a basic mean stack application. I have a submit button, where if I click, it throws me an error saying in the browser saying :
Cannot POST /
Although, the post request has gone to the server and it gets updated in my database. I just want the browser to come back to the previous page after I click submit and post request is done!
The browser console also shows an error saying:
POST http://localhost:3000/ 404 (Not Found)
Here are my files for reference ctrl1.js:
var app = angular.module('myApp', []);
app.controller('myCtrl',['$scope', '$http', function($scope, $http) {
console.log("Hello from controller");
$scope.application = {};
var refresh = function(){
$http.get('/applicationList').then(function(response){
console.log("I got the applications I requested");
$scope.applicationList = response.data;
// $scope.contact = null;
});
};
refresh();
$scope.saveApplication = function(){
console.log($scope.application);
$scope.application.state = "saved";
$http.post('/applicationList', $scope.application).then(function(response){
console.log(response);
//refresh();
});
};
$scope.submitApplication = function(){
console.log("reached here");
console.log($scope.application);
console.log("reached here");
$scope.application.state = "submit";
$http.post('/applicationList', $scope.application).then(function(response){
console.log(response);
refresh();
});
};
$scope.remove = function(id){
console.log(id);
$http.delete('/applicationlist/'+id).then(function(response){
refresh();
});
};
$scope.edit = function(id){
console.log(id);
$http.get('/applicationlist/'+id).then(function(response){
$scope.application = response.data;
//refresh();
});
};
$scope.update = function(){
console.log($scope.application._id);
$http.put('/applicationlist/' + $scope.application._id, $scope.application).then(function(response){
//$scope.contact = response.data;
refresh();
});
};
// $scope.clear = function(){
// $scope.application = "";
// };
//Universities
$scope.application.selectname1={};
$scope.application.selectname2={};
$scope.application.selectname3={};
$scope.filter1 = function(item){
return (!($scope.application.selectname1&&$scope.application.selectname1.id)||item.id !=$scope.application.selectname1.id||item.id==100);
};
$scope.filter2 = function(item){
return (!($scope.application.selectname2&&$scope.application.selectname2.id)||item.id!=$scope.application.selectname2.id||item.id==100);
};
$scope.filter3 = function(item){
return (!($scope.application.selectname3&&$scope.application.selectname3.id)||item.id !=$scope.application.selectname3.id||item.id==100);
};
$scope.universities = [
{
id:1,
name: 'IITs'
},
{
id:2,
name: 'IIITs'
},
{
id:3,
name: 'BITS'
},
{
id:100,
name: 'None'
}
];
//Degrees
$scope.application.selectdegree1={};
$scope.application.selectdegree2={};
$scope.application.selectdegree3={};
$scope.filterDegree1 = function(item){
return (!($scope.application.selectdegree1&&$scope.application.selectdegree1.id)||item.id !=$scope.application.selectdegree1.id||item.id==100);
};
$scope.filterDegree2 = function(item){
return (!($scope.application.selectdegree2&&$scope.application.selectdegree2.id)||item.id!=$scope.application.selectdegree2.id||item.id==100);
};
$scope.filterDegree3 = function(item){
return (!($scope.application.selectdegree3&&$scope.application.selectdegree3.id)||item.id !=$scope.application.selectdegree3.id||item.id==100);
};
$scope.degrees = [
{
id:1,
name: 'PhD'
},
{
id:2,
name: 'Masters'
},
{
id:3,
name: 'BTech'
},
{
id:100,
name: 'None'
}
];
$scope.check = function(evt,cityName)
{
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
return true;
}
}]);
Server.js :
var express = require('express');
var app = express();
var mongojs = require('mongojs');
var db = mongojs('internapplications', ['internforms']);
var assert = require('assert');
var bodyParser = require('body-parser');
var request = require('request');
app.use(express.static(__dirname + "/public"));
app.use(bodyParser.json());
app.get('/applicationList', function(req, res){
console.log("I received a get request");
db.internforms.find(function(err, docs){
console.log(docs);
res.json(docs);
});
});
app.post('/applicationList', function(req, res){
console.log("I received a post request");
console.log(req.body);
db.internforms.insert(req.body, function(err,doc){
res.json(doc);
});
});
app.delete('/applicationList/:id', function(req,res){
console.log("reached here");
var id = req.params.id;
console.log(id);
db.internforms.remove({_id: mongojs.ObjectId(id)}, function(err,doc){
res.json(doc);
});
});
app.put('/applicationList/:id', function(req,res){
var id = req.params.id;
console.log(req.body.name);
db.internforms.findAndModify({query: {_id: mongojs.ObjectId(id)},
update: {$set: {name: req.body.name, email: req.body.email, number: req.body.number}},
new: true},
function(err,doc){
res.json(doc);
});
});
app.listen(3000);
console.log("Server running at port 3000");
And my html looks like this :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- Latest compiled and minified CSS - loading at the top, since we want stylesheets to load up as soon as the page comes up -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="controllers/ctrl1.js"></script>
<title>Intern Applications App</title>
</head>
<body ng-controller="myCtrl">
<div class="container">
<nav id="tab-navigation">
<a href ng-click="check(event, 'page1')" id="defaultOpen">Applications Form</a>
<a href ng-click="check(event, 'page2')" >Application List</a>
</nav>
<div class="tabcontent" id="page1">
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<!-- <fieldset> -->
<!-- Form Name -->
<legend>Intern Application Form</legend>
<div class="form-group">
<label class="col-md-4 control-label">Project Title</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" placeholder="Project Title" ng-model="application.title" ></textarea>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Project Description</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" ng-model="application.description" placeholder="Project Description" ></textarea>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Approach</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" ng-model="application.approach" placeholder="Approach" ></textarea>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Is the dataset available?</label>
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" id="yes" name="dataset" value="yes" ng-model="application.isData"/> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" id="no" name="dataset" value="no" ng-model="application.isData"/> No
</label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group" ng-show="application.isData == 'no'">
<label class="col-md-4 control-label">Approach for Data Collection</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<input name="first_name" ng-model="application.dataDescription" placeholder="Approach" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group" ng-show="application.isData == 'yes'">
<label class="col-md-4 control-label">Data Available at</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<input name="first_name" placeholder="Approach" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Impact</label>
<div class="col-md-4 inputGroupContainer">
<div class="checkbox">
<label>
<input type="checkbox" id="yes" value="Technical" ng-model="application.technical"/> Technical
</label>
<label>
<input type="checkbox" id="yes" value="Business" ng-model="application.business"/> Business
</label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Number of Interns</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<input name="first_name" placeholder="Number" ng-model="application.numberOfInterns" class="form-control" type="text" >
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Skill Set </label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" ng-model="application.skillSet" placeholder="Skill Set " ></textarea>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">University Preference</label>
<div class="col-md-4 inputGroupContainer">
<!-- <div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" ng-model="application.skillSet" placeholder="Skill Set " ></textarea>
</div> -->
<div class="input-group">
<select ng-model="application.selectname1"
ng-options="item as item.name for item in universities|filter:filter2|filter:filter3" ><option value="">- select -</option>
</select>
<select ng-model="application.selectname2"
ng-options="item as item.name for item in universities|filter:filter1|filter:filter3" ><option value="">- select -</option>
</select>
<select ng-model="application.selectname3" ng-options="item as item.name for item in universities|filter:filter1|filter:filter2" ><option value="">- select -</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Other Comments</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" ng-model="application.comments" placeholder="Comments"></textarea>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-2">
<button type="submit" class="btn btn-primary" ng-click="submitApplication()"> Submit <span class="glyphicon glyphicon-send"></span></button>
</div>
<div>
<button type="submit" class="btn btn-warning" ng-click="saveApplication()"> Save <span class="glyphicon glyphicon-floppy-disk"></span></button>
</div>
</div>
<!-- </fieldset> -->
</form>
</div>
<div class="tabcontent" id="page2" style="display: none;">
<table class="table">
<thead>
<tr>
<th>Project Title</th>
<th>Project Description</th>
<th>State</th>
<th></th>
</tr>
<tbody>
<tr ng-repeat="apllication in applicationList">
<td>{{application.title}}</td>
<td>{{application.description}}</td>
<td>{{application.state}}</td>
<td><button class="btn btn-danger" ng-click="remove(application._id)" ng-show="application.state='saved'">Delete</button></td>
<td><button class="btn btn-warning" ng-click="edit(application._id)" ng-show="application.state='saved'">Edit</button></td>
</tr>
</tbody>
</thead>
</div>
</div>
</body>
</html>
Your database gets updated because you have attached an ng-click directive to the submit button, which is correctly hitting your /applicationList route with a POST: that's good.
At the same time, your button is inside a form element and is of type submit, which means clicking it will trigger the form action. Because you have left the form action empty - action=" " - you are also hitting the non-existent / route. That's why you get your error.
A simple fix is to change your button types to button so that they don't trigger the form action, and remove the action attribute from the form.
you are trying to get '/' for this plealse write this code in
server.js
app.get('/', function(req, res) {
res.end('Welcome to api');
return;
})
I have a student registration form. I put one field named favorite color having three check box blue, green, red. user can check multiple check boxes.
now I require that when user check check boxes its values should be add in array list using ng-model.
Can Any one help me?
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center">
<i class="fa fa-bullseye bigicon"></i>
</span>
<div class="col-md-8">
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoritecolor." value="Red"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoritecolor.checked"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoritecolor.checked"> Green
</label>
</div>
</div>
</div>
above is my code:
and I want value as {favouritecolor:[red,blue,green]}
Try like this
<input type="checkbox" name="favoriteColors"
ng-click="addToList('Red')" value="Red">
and in controller:
$scope.addToList = function(color){
var index = $scope.data.favouritecolor.indexOf(color);
if(index > -1)
$scope.data.favouritecolor.splice(index,1);
else
$scope.data.favouritecolor.splice(color,index,0);
}
You can call a function on checkbox click and get the values.
JS:
function MyCtrl($scope) {
$scope.colorArray=[];
$scope.getChecked=function(color){
var index=$scope.colorArray.indexOf(color);
if(index>-1)
$scope.colorArray.splice(index,1);
else
$scope.colorArray.push(color);
$scope.temp={"favouritecolor":$scope.colorArray};
console.log($scope.temp);
}
}
HTML:
<div ng-controller="MyCtrl">
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i
class="fa fa-bullseye bigicon"></i></span>
<div class="col-md-8">
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-checked="colorArray.indexOf(color)>-1" value="Red" ng-click="getChecked('Red')"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-checked="colorArray.indexOf(color)>-1" ng-click="getChecked('Blue')"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-checked="colorArray.indexOf(color)>-1" ng-click="getChecked('Green')"> Green
</label>
</div>
</div>
</div>
</div>
JS Fiddle:http://jsfiddle.net/u2c9uLmv/1/
This is one way usually used for ng-model with turning array to object then adding extra key selected which in-turn used as boolean and you can filter out data.
angular.module('app', []).controller('formController', FormController);
function FormController($scope, $filter) {
$scope.list = ['blue', 'red', 'yellow'];
$scope.colors = [];
angular.forEach($scope.list, function(data) {
$scope.colors.push({
color: data,
selected: false
});
});
$scope.showSelected = function() {
var selectedColors = $filter('filter')($scope.colors, {
selected: true
}, true);
var favouriteColors = [];
angular.forEach(selectedColors, function(data) {
favouriteColors.push(data.color);
});
console.log(favouriteColors);
};
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div class="container" data-ng-controller="formController">
<div class="row">
<div class="col-sm-12">
<form class="form-horizontal" ng-submit="showSelected()">
<div class="checkbox" data-ng-repeat="data in colors">
<label>
<input type="checkbox" data-ng-value="data.color" data-ng-model="data.selected" />{{data.color}}
</label>
</div>
<div class="form-group">
<button class="btn btn-sm btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</body>
I have created an AngularJS webapp that uses node, loopback, ui-router, and bootstrap.
I am building my app using Brackets and when I launch their live preview (http://127.0.0.1:53490/index.html). The page loads all elements but does not populate the proper database information. I know that the loopback api and mysql database connection works because I can push and pull data from the table in the loopback explorer. The issue seems to be in the connection between my webapp and loopback.
The loopback api listens at localhost:3000 and the mysql port is 3306.
I have also seen that people can load their webapp by browsing to localhost:3000 alone, but for me I just see the runtime of the server.
Specifically, the error I am seeing is this: GET http://127.0.0.1:53490/api/se_users 404 (Not Found)
I also tried to debug by throwing in a breakpoint at the 'getse_users()' point in the users.js code. This showed that the error appears in the angular.js file at line 10460 at 'xhr.onload=function requestLoaded()'
Here is my code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>User Management Tool</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="client/js/lb-services.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="userApp">
<!-- NAVIGATION -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">User Management Tool</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a ui-sref='home'>All Users <span class="sr-only">(current)</span></a></li>
<li><a ui-sref="create">Create a User</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>User Admin</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
app.js
angular.module('userApp', ['ui.router', 'lbServices'])
.controller('UserController', ['$scope', '$state', 'Se_user', function ($scope, $state, Se_user) {
$scope.users = [];
function getse_users() {
Se_user
.find()
.$promise
.then(function (results) {
$scope.users = results;
});
}
getse_users();
$scope.addSe_user = function () {
Se_user
.create($scope.newUser)
.$promise
.then(function (user) {
$scope.newUser = '';
$scope.userForm.content.$setPristine();
$('.focus').focus();
getse_users();
});
};
$scope.removeUser = function (item) {
Se_user
.deleteById(item)
.$promise
.then(function () {
getse_users();
});
};
}])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('');
$stateProvider
.state('home', {
url: '',
templateUrl: 'partial-home.html',
controller: 'UserController'
})
.state('create', {
url: '/create',
templateUrl: 'partial-create.html',
controller: 'UserController'
});
// .state('edit',{
// url:'/edit',
// templateUrl:'partial-edit.html',
// contoller: 'UserDetailController'
// })
}]);
partial-home.html
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<h1>All Users</h1>
</div>
<br>
<div class="col-md-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div><!--/.container-fluid -->
<div class="container-fluid" ng-controller="UserController as users">
<table class="table table-hover">
<thead>
<tr>
<th>EID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.content}}</td>
<td>{{user.first_nm}}</td>
<td>{{user.last_nm}}</td>
<td>{{user.active}}</td>
</tr>
</tbody>
</table>
</div>
<div ui-view></div>
user.js
angular.module('userApp')
.controller('UserController', ['$scope', '$state', 'Se_user', function($scope, $state, Se_user) {
$scope.users = [];
function getSe_users() {
Se_user
.find()
.$promise
.then(function(results){
$scope.users = results;
});
}
getSe_users();
$scope.addSe_user = function() {
Se_user
.create($scope.newUser)
.$promise
.then(function(user){
$scope.newUser = '';
$scope.userForm.content.$setPristine();
$('.focus').focus();
getSe_users();
});
};
$scope.removeUser = function(item) {
Se_user
.deleteById(item)
.$promise
.then(function(){
getSe_users();
});
};
}]);
partial-create.html
<div class="row">
<div class="col-md-8">
<h1>Create a User</h1>
</div>
<div class="col-md-4">
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form name=userForm ng-submit="addSe_user()">
<div class="form-group">
<label for="user_id">ID</label>
<input type="text" class="form-control" ng-model="user.user_id" placeholder="Enter EID">
</div>
<div class="form-group">
<label for="first_nm">First Name</label>
<input type="text" class="form-control" ng-model="user.user_first_nm" placeholder="Enter First Name">
</div>
<div class="form-group">
<label for="last_nm">Last Name</label>
<input type="text" class="form-control" ng-model="user.user_last_nm" placeholder="Enter Last Name">
</div>
<div class="form-group">
<label for="email_adr">Email Address</label>
<input type="text" class="form-control" ng-model="user.user_email_adr" placeholder="Enter Item Type">
</div>
<div class="form-group">
<label for="user_role">Role</label>
<input type="text" class="form-control" ng-model="user.user_role" placeholder="Enter Status Code">
</div>
<div class="form-group">
<label for="user_active">Active</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="Yes" ng-model="user.user_active" checked>Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="No" ng-model="user.user_active">No
</label>
</div>
</div>
<div class="form-group">
<label for="mgr_full_nm">Manager Name</label>
<input type="text" class="form-control" ng-model="user.user_mgr_full_nm" placeholder="Enter Full Name">
</div>
<div class="form-group">
<label for="mgr_eid">Manager EID</label>
<input type="text" class="form-control" ng-model="user.user_mgr_eid" placeholder="Enter Manager EID">
</div>
<div class="form-group">
<label for="insrt_dt">Insert Date</label>
<input type="date" class="form-control" ng-model="user.insrt_dt" placeholder="Enter Date">
</div>
<div class="form-group">
<label for="insrt_user_id">Insert User EID</label>
<input type="text" class="form-control" ng-model="user.user_upd_user_id" placeholder="Enter User EID">
</div>
<div class="form-group">
<label for="upd_dt">Update Date</label>
<input type="date" class="form-control" ng-model="user.user_upd_dt" placeholder="Enter Update User Date">
</div>
<div class="form-group">
<label for="upd_user_id">Update User EID</label>
<input type="text" class="form-control" ng-model="user.upd_user_id" placeholder="Enter Update User EID">
</div>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
<br>
<br>
<pre>
{{user | json}}
</pre>
</form>
</div>
</div>
</div>
I am relatively new to coding and have really just begun to teach myself. Any help is appreciated!!
Thanks!!
EDIT:
rest-api.js
module.exports = function mountRestApi(server) {
var restApiRoot = server.get('restApiRoot');
server.use(restApiRoot, server.loopback.rest());
};
I figured it out!
The lbservices file was using a BaseURL of "/api" when it needed to be "http://localhost:3000/api"
Thank you everyone for your help!
I am trying to develop a responsive form with twitter bootstrap, but it is not submitting.
Why isn't it submitting?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Generate Reports</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/datepicker.css">
<script src='js/bootstrap-datepicker.js'></script>
<script src='js/bootstrap.js'></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script>
$(document).ready(function() {
$('#report_repetitions').change(function() {
var number_of_repetitions=$('#report_repetitions').val();
var container = $('#date_list');
var numItems = $('.date_group').length;alert(numItems);
if(number_of_repetitions>numItems)
{
for(var i=numItems+1;i<=number_of_repetitions;i++)
$('<div class="well"> <div class="date_group" id="group_'+i+'" > <div class="control-group" > <label class="control-label required span5" for="Step1_home_zip">Enter Date Range Text '+i+'<span class="required">*</span></label><div class="controls"><input class="span3" size="5" name="text_'+i+'" maxlength="5" name="Step1[home_zip]" id="report_repetitions" type="text" /></div></div>'
+'<div class="control-group" ><label class="control-label required span5" for="Step1_home_zip">From<span class="required">*</span></label><div class="controls "><div id="from'+i+'" class="input-append date "><input type="text" name="from_'+i+'" ></input><span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div></div></div><div class="control-group" ><label class="control-label required span5" for="Step1_home_zip">To<span class="required">*</span></label><div class="controls "><div id="to'+i+'" class="input-append date "><input type="text" name="to_'+i+'"></input><span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div></div></div></div></div>'
+'<script type="text/javascript">'
+'$(function() {'
+' $("#from'+i+'").datetimepicker({'
+' pickTime: false'
+' });'
+'$("#to'+i+'").datetimepicker({'
+' pickTime: false'
+'});});<'
+'/script>').click(function () {
window.open(path);
}).appendTo(container);
}
else if(number_of_repetitions<numItems)
{
alert("kkk");alert(number_of_repetitions);alert(numItems);
for(var i=number_of_repetitions;i<=numItems;i++)
{ alert(i);
('#group_2').remove();
}
}
else
alert("hhh");
});
});
</script>
</head>
<body>
<div class="container">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<center><h2>Generate Report</h2></center>
</div>
<div class="span4 pull-right"> </div>
</div>
<div class="row-fluid">
<form class="well span12">
<center>
<div class="row-fluid">
<div class="span12">
<form class="form-horizontal" id="report_form" action="insert.php" method="post">
<div id="report_group">
<div class="control-group">
<label class="control-label required span5" for="Step1_email">Improvement Threshold<span class="required">*</span></label>
<div class="controls">
<input class="span4" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required span5" for="Step1_home_zip">Services Top Threshold <span class="required">*</span></label>
<div class="controls">
<input class="span4" size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
<div id="date_list">
<div class="well">
<div class="date_group" id="group_1" >
<div class="control-group" id="date_group">
<label class="control-label required span5" for="Step1_home_zip">Enter Date Range Text 1<span class="required">*</span></label>
<div class="controls">
<input class="span3" size="5" maxlength="5" name="text_1" id="report_repetitions" type="text" />
</div>
</div>
<div class="control-group" >
<label class="control-label required span5" for="Step1_home_zip">From<span class="required">*</span></label>
<div class="controls ">
<div id="from1" class="input-append date ">
<input type="text" name="from_1" ></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div>
<div class="control-group" >
<label class="control-label required span5" for="Step1_home_zip">To<span class="required">*</span></label>
<div class="controls ">
<div id="to1" class="input-append date ">
<input type="text" name="to_1"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div> </div>
</div>
</div>
<div class="pull">
<button type="submit" class="btn btn-primary">Submit</button>
<input type="reset" class="btn" value="Reset">
</div>
</div>
</form>
</div>
</center>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#from1").datetimepicker({
pickTime: false
});
$("#to1").datetimepicker({
pickTime: false
});
});
</script>
</body>
</html>
insert.php also there on same folder
but it not moving to insert.php
You have nested forms. This is invalid and the cause of your problem.
Remove the extra form. Use a validator.
You have nested forms, which is invalid syntax.
<form class="well span12">
This should have been a div instead
<input type="submit" name="submit" value="Submit">
Can you try this
Replace the
<button type="submit" class="btn btn-primary">Submit</button>
with
<input type="submit" class="btn btn-primary" value="Submit" />