Handling multiple forms in a single page [AngularJS]

Handling multiple forms in a single page [AngularJS] - javascript

So I have this page where a user should be able to log details for multiple projects he had applied to . Each project has multiple milestones and each milestone has a form where the user is able to log in the details . I designed the page and all but the problem is when the user updates one form , it reflects on all the forms present in the page.
This is my html where i display the form to the user.
<form>
<table>
<thead>
<tr>
<th>Date</th>
<th>Task Name</th>
<th>Hours</th>
</tr>
</thead>
<p> {{project.id}}--{{milestone.id}} </p>
<tbody ng-repeat="taskDetail in ::taskDetails">
<tr>
<td style="width:25px;">
<input type="text" ng-model="taskDetail.date" required/>
</td>
<td>
<input type="text" ng-model="taskDetail.taskname" required/>
</td>
<td>
<input type="text" ng-model="taskDetail.hours" required/>
</td>
<td>
<input type="hidden" ng-model="taskDetail.milestone_id" value="{{ ::milestone.id }}" required/>
</td>
<td>
<button class="remove" ng-show="$last" ng-click="removeLast()">Remove</button>
</td>
</tr>
</tbody>
<tr>
<td></td>
<td>
<button ng-click="addRow()">Add Row</button>
</td>
<td>
<button ng-click="savetask()"> Save </button>
</td>
</tr>
</table>
and the corresponding action is done in the controller by
$scope.taskDetails = [{
'date': '',
'taskname': '',
'hours': '',
'milestone_id': ''
}];
$scope.addRow = function (taskDetail) {
$scope.taskDetails.push({
'date': "",
'taskname': "",
'hours': "",
'milestone_id': ""
});
};
$scope.removeLast = function () {
var lastItem = $scope.taskDetails.length - 1;
$scope.taskDetails.splice(lastItem);
};
$scope.savetask = function (id) {
console.log("Details= " + id);
myFrm = document.getElementById(frmId);
$http.put('/api/v1/projects/'+ :project_id '/milestones/' +:milestone_id' /timetracker', { timetracker: $scope.taskDetails
})
.then(function(data) {
console.log($scope.taskDetails)
flash.setMessage('Successfully logged your time', true);
}, function(data) {
flash.setMessage('Error updating bank account', false);
})
};
});
Milestone ID is unique for each form.

Related

Jquery executes Error section by default - Servlet

I am new to Ajax and JQuery. I am attempting to insert data into my database without submitting the form. The data gets inserted into the table but:
I am not able to get either the Error Message or Success Message on My jsp. It Comes as [object Object]
Looks like the success section of the Jquery is not executed at all
My Jquery:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function () {
//On Button Click
$("#countrybutton").click(function () {
//Get Text box values
var country = $("#country").val();
var continent = $("#continent").val();
var region = $("#region").val();
var population = $("#population").val();
var capital = $("#capital").val();
$.ajax({
url: 'do?MOD=BOK&ACT=domcountry&country=' + country + "&continent=" + continent + "&region=" + region + "&population=" + population + "&capital=" + capital,
dataType: "json",
type: "Post",
success: function (result) {
$("#message").text(result);
//Clear Textbox data
$("#country").val('');
$("#continent").val('');
$("#region").val('');
$("#population").val('');
$("#capital").val('');
},
error: function (responseText) {
$("#message").text(responseText);
}
});
});
});
</script>
My JSP
<table width="100%" border="0" align="left" cellpadding="5" cellspacing="1">
<th colspan="5" align="left" scope="col"></th>
<tr>
<td colspan="2" id="message" style="color: red; font-size: 14px;"></td>
</tr>
<tr>
<td> </td>
<td>Country Name</td>
<td style="color: red">*</td>
<td><label>
<input name="country" value="${country}" onkeyup="this.value = this.value.toUpperCase();" type="text" id="country"/>
</label></td>
<td> </td>
<td>Continent Name</td>
<td style="color: red">*</td>
<td><label>
<input name="continent" value="${continent}" onkeyup="this.value = this.value.toUpperCase();" type="text" id="continent"/>
</label></td>
</tr>
<tr>
<td> </td>
<td>Region</td>
<td style="color: red">*</td>
<td><label>
<input name="region" value="${region}" onkeyup="this.value = this.value.toUpperCase();" type="text" id="region"/>
</label></td>
<td> </td>
<td>Population</td>
<td style="color: red">*</td>
<td><label>
<input name="population" value="${population}" type="text" id="population"/>
</label></td>
<td></td>
</tr>
<tr>
<td> </td>
<td>Capital</td>
<td style="color: red">*</td>
<td><label>
<input name="capital" value="${capital}" type="text" id="capital"/>
</label></td>
<td> </td>
</tr>
</table>
</div>
<div>
<table width="100%" border="0" align="left" cellpadding="5" cellspacing="1">
<th colspan="5" align="left" scope="col"></th>
<tr>
<td> </td>
<td><div align="right">
<input type="reset" name="Submit2" value="Reset" class="redButton" />
</div></td>
<td><label>
<input name="Submit" class="redButton" type="button" id="countrybutton" onclick="MM_validateForm('country', '', 'R', 'continent', '', 'R', 'region', '', 'R', 'population', '', 'R',
'capital', '', 'R');
return document.MM_returnValue" value="Submit" />
<td> </td>
</tr>
</table>
And My servlet section:
response.setContentType("application/json");
String country = request.getParameter("country");
String continent = request.getParameter("continent");
String region = request.getParameter("region");
int population = Integer.parseInt(request.getParameter("population"));
String capital = request.getParameter("capital");
String returnMessage;
if (Countries.addCountry(country, continent, region, population, capital)) {
returnMessage = "Record Inserted.";
} else {
returnMessage = "Unable to Insert Record.";
try {
throw new InsertException("Unable to Insert record");
} catch (InsertException ex) {
log.debug(ex.getMessage());
}
}
new Gson().toJson(returnMessage, response.getWriter());
response.sendRedirect("index.jsp");
What am I missing?

Try remove this line:
response.sendRedirect("index.jsp");
and to get exception in Ajax error, you will need set http code 500 in response, add this inside your "else":
response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
Servlet final:
response.setContentType("application/json");
String country = request.getParameter("country");
String continent = request.getParameter("continent");
String region = request.getParameter("region");
int population = Integer.parseInt(request.getParameter("population"));
String capital = request.getParameter("capital");
String returnMessage;
if (Countries.addCountry(country, continent, region, population, capital)) {
returnMessage = "Record Inserted.";
} else {
returnMessage = "Unable to Insert Record.";
response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
try {
throw new InsertException("Unable to Insert record");
} catch (InsertException ex) {
log.debug(ex.getMessage());
}
}
new Gson().toJson(returnMessage, response.getWriter());

Angular JS Filed to Get Input text value and Does not Post to Wcf Service

I am trying to catch input text value into Angular JS Application. I am using javaScript to display the current date and time into text filed and text box is able to get the current get and time. I am trying to post the input values to wcfr service when I click the submit button but the problem is it's unable to post the date and time to wcf service. I checked in Google Chrome in console Window and it is not posting current date and time...
Here is My HTML Code:
#{
Layout = null;
}
<!DOCTYPE html>
<html ng-app="WebClientModule">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/RegistrationScript/CreateCurrentAccount.js"></script>
<script>
function myFunction() {
document.getElementById('account_creation_date').placeholder= Date();
}
</script>
</head>
<body onload="myFunction()">
<table id="tblContainer" data-ng-controller="Web_Client_Controller">
<tr>
<td></td>
</tr>
<tr>
<td>
<table style="border: solid 4px Red; padding: 2px;">
<tr>
<td></td>
<td>
<span>Account Creation Date</span>
</td>
<td>
<input type="text" id="account_creation_date" placeholder=" " data-ng-model="Account_Creation_Date" required="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Account Type</span>
</td>
<td>
<input type="text" id="account_type" required data-ng-model="Account_Type" require="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Branch Sort Code</span>
</td>
<td>
<input type="text" id="branch_sort_code" data-ng-model="Branch_Sort_Code" required="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Account Fee</span>
</td>
<td>
<input type="text" id="account_fee" required data-ng-model="Account_Fee" require="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Account Balance</span>
</td>
<td>
<input type="text" id="account_balance" data-ng-model="Account_Balance" required="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span> Over Draft Limit</span>
</td>
<td>
<input type="text" id="over_draft_limit" required data-ng-model="Over_Draft_Limit" require="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span> Account Holder Id</span>
</td>
<td>
<input type="text" id="account_holder_id" required data-ng-model="Account_Holder_Id" require="" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="button" id="Login" value="Login" data-ng-click="login()" />
</td>
</tr>
</table>
<div style="color: red;">{{msg}}</div>
</td>
</tr>
</table>
</body>
</html>
<script src="~/RegistrationScript/CreateCurrentAccount.js"></script>
Here is Script file code.
///// <reference path="../angular.min.js" />
var app = angular.module("WebClientModule", [])
.controller('Web_Client_Controller', ["$scope", 'myService', function ($scope, myService) {
$scope.OperType = 1;
//1 Mean New Entry
//To Clear all input controls.
function ClearModels() {
$scope.OperType = 1;
$scope.Account_Creation_Date = "";
$scope.Account_Type = "";
$scope.Branch_Sort_Code = "";
$scope.Account_Fee = "";
$scope.Account_Balance = "";
$scope.Over_Draft_Limit = "";
$scope.Account_Holder_Id = "";
}
$scope.login = function () {
var User = {
Account_Creation_Date: $scope.Account_Creation_Date,
Account_Type: $scope.Account_Type,
Branch_Sort_Code: $scope.Branch_Sort_Code,
Account_Fee: $scope.Account_Fee,
Account_Balance: $scope.Account_Balance,
Over_Draft_Limit: $scope.Over_Draft_Limit,
Account_Holder_Id: $scope.Account_Holder_Id
};
myService.AuthenticateUser(User).then(function (pl) {
console.log(pl.data)
if (pl.data) {
$scope.msg = "Account Created Successfully";
window.location.href = "/Register/Index";
}
else {
$scope.msg = "Account is not Created !";
console.log("Some error Occured" + err);
}
}, function (err) {
$scope.msg = "Account is not Created !";
console.log("Some error Occured" + err);
});
};
}]);
app.service("myService", function ($http) {
this.AuthenticateUser = function (User) {
return $http.post("http://localhost:52098/HalifaxIISService.svc/CreateCurrentAccountDetail", JSON.stringify(User));
}
})
Here is the vlaues are catched in Network Tab..
{"Account_Type":"Business","Branch_Sort_Code":"11-00-11","Account_Fee":"12.0","Account_Balance":"12300","Over_Draft_Limit":"123000","Account_Holder_Id":"2"}
Here is the Screen Shot When I run the Application..

AngularJs : Show Hide Fields According Select Value

I want to show hide form fields on the basis of Select Value. e.g my form has 5 text fields and 1 select option field In those fields 4 fields are depended on select value. if i select cloth then cloth type and cloth value remains, lether type and lether value hide. but when i select Bags lether type and lether value remain else hide. i am trying some condition and ng-class="{'hideCheck': isHideCheck}" model but it behaving abnormally.
var app = angular.module('mainApp', []);
app.controller('appCont', function($scope) {
$scope.ProductTypeChnaged = function () {
$scope.ProductStatus = $scope.ProductValue;
if ($scope.AccountStatus == 'checking') {
$scope.isHideCheck = !$scope.isHideCheck;
} else if ($scope.AccountStatus == 'saving'){
$scope.isHideSave = !$scope.isHideSave;
}
};
});
.hideCheck{display:none}
.hideSave{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="appCont">
<p>Product box status: {{ ProductStatus }}</p>
<form name="frm">
<table>
<tr>
<td>Account Type :
</td>
<td>
<select name="ProductType" ng-model="ProductValue" ng-change="ProductTypeChnaged()">
<option value="checking">Checking</option>
<option value="saving">Saving</option>
</select><br />
</td>
</tr>
<tr>
<td>Amount :
</td>
<td>
<input type="text" name="amount" ng-model="amount" required>
</td>
</tr>
<tr ng-class="{'hideCheck': isHideCheck}">
<td>Lether value :
</td>
<td>
<input type="text" name="Lethervalue" ng-model="Lethervalue">
</td>
</tr>
<tr ng-class="{'hideCheck': isHideCheck}">
<td>Lether Type :
</td>
<td>
<input type="text" name="LetherType" ng-model="LetherType">
</td>
</tr>
<tr ng-class="{'hideSave': isHideSave}">
<td>Cloth Type :
</td>
<td>
<input type="text" name="ClothType" ng-model="ClothType">
</td>
</tr>
<tr ng-class="{'hideSave': isHideSave}">
<td>Cloth value :
</td>
<td>
<input type="text" name="Clothvalue" ng-model="Clothvalue">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button ng-click="addProduct()" ng-disabled="frm.$invalid">Add Account</button>
</td>
</tr>
</table>
</form>
</div>

use ng-hide to hide the element. ng-class is used to alter css.
I changed your code, it will hide element valus and type when option checking is selected, just an example for you, not implement your feather. you would like to read https://docs.angularjs.org/api/ng/directive/ngHide.
by the way , ng-repeat is a good way to do table things.
var app = angular.module('mainApp', []);
app.controller('appCont', function($scope) {
$scope.ProductTypeChnaged = function () {
$scope.ProductStatus = $scope.ProductValue;
if ($scope.AccountStatus == 'checking') {
$scope.isHideCheck = !$scope.isHideCheck;
} else if ($scope.AccountStatus == 'saving'){
$scope.isHideSave = !$scope.isHideSave;
}
};
});
.hideCheck{display:none}
.hideSave{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="appCont">
<p>Product box status: {{ ProductStatus }}</p>
<form name="frm">
<table>
<tr>
<td>Account Type :
</td>
<td>
<select name="ProductType" ng-model="ProductValue" ng-change="ProductTypeChnaged()">
<option value="checking">Checking</option>
<option value="saving">Saving</option>
</select><br />
</td>
</tr>
<tr>
<td>Amount :
</td>
<td>
<input type="text" name="amount" ng-model="amount" required>
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Lether value :
</td>
<td>
<input type="text" name="Lethervalue" ng-model="Lethervalue">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Lether Type :
</td>
<td>
<input type="text" name="LetherType" ng-model="LetherType">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Cloth Type :
</td>
<td>
<input type="text" name="ClothType" ng-model="ClothType">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Cloth value :
</td>
<td>
<input type="text" name="Clothvalue" ng-model="Clothvalue">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button ng-click="addProduct()" ng-disabled="frm.$invalid">Add Account</button>
</td>
</tr>
</table>
</form>
</div>

Can not delete the required row using Angular.js/JavaScript

I can not delete the proper row from an array using Angular.js. I am providing my code below:
<tr ng-repeat="d in days">
<td>{{d.day_name}}</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<select class="form-control" id="answer_{{$index}}_{{$parent.$index}}_category" name="answer_{{$index}}_category" ng-model="answer.category" ng-options="cat.name for cat in listOfCategory track by cat.value" ng-change="removeBorder($index,answer.category.value,$parent.$index)" ng-init="renderWithMode($index,answer.category.value,$parent.$index,isEditMode)">
<option value="">Select Category</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<select class="form-control" id="answer_{{$index}}_{{$parent.$index}}_subcategory" name="answer_{{$index}}_subcategory" ng-model="answer.subcategory" ng-options="sub.name for sub in listOfSubCategory[$parent.$index][$index] track by sub.value">
<option value="">Select Subcategory</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<!--<input type="text" id="answer_{{$index}}_{{$parent.$index}}_comment" name="answer_{{$index}}_comment" placeholder="Add Comment" ng-model="answers.comment">-->
<input type="text" id="answer_{{$index}}_{{$parent.$index}}_comment" name="answer_{{$index}}_comment" placeholder="Add Comment" ng-model="answer.comment">
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td style="width:20px">
<input ng-show="d.answers.length>1" class="btn btn-red" type="button" name="minus" id="minus" value="-" style="width:20px; text-align:center;" ng-click="removeRow(d.answers, $index)">
</td>
<td ng-show="$last">
<input type="button" class="btn btn-success" name="plus" id="plus" value="+" style="width:20px; text-align:center;" ng-click="addNewRow(d.answers)">
<button type="button" id="btn" ng-click="checkAnswer(d.answers)">Check</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
The above table is giving the output like below.
Here I have added 3 row for monday and suppose I have clicked on middle row - button as per requirement the only middle row should delete but here it is deleting wrong subcategory part from the 3rd row whose screen shot is given below.
I have deleted second row from first screen shot still the second row subcategory part is present and 3rd row subcategory part has deleted which is wrong deletion process. Here is my controller side code:
$scope.days=[];
$http({
method:'GET',
url:"php/customerInfo.php?action=day",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
//console.log('day',response.data);
angular.forEach(response.data, function(obj) {
obj.answers = [];
$scope.addNewRow(obj.answers);
$scope.days.push(obj);
});
},function errorCallback(response) {
})
}
$scope.addNewRow = function(answers,hasDelete) {
answers.push({
category: null,
subcategory: null,
comment: null,
hasDelete: hasDelete ? hasDelete : false
});
};
$scope.removeRow = function(answers, $index){
answers.splice($index, 1);
//answers.splice(answers.length-1,1);
};
Here all data are binding dynamically. I need to delete the right row.

Try to remove $ from $index parameter.
$scope.removeRow = function(answers, index){
answers.splice(index, 1);
//answers.splice(answers.length-1,1);
};

AngularJS ng-click function not reached

When I'm adding new product to a product list its not working. So the products get loaded well but the ng-click function does not getting called. (The alert I put in the addProduct function is not executed).
HTML
<div ng-controller="ProductController as ProductCtrl">
Zoeken <input type="text" ng-model="search" placeholder="Search" />
<div>
Filter Type
<button ng-repeat="cat in categories" ng-click="filterProductsByCategory(cat)">{{cat}}</button>
</div>
<table cellpadding="5" cellspacing="0" border="1">
<tr>
<th>ID</th>
<th>Product</th>
<th>Type</th>
<th>Price</th>
<th>Toevoegen</th>
</tr>
<tr ng-repeat="product in ProductCtrl.products">
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.type}}</td>
<td>{{product.price}}</td>
<td></td>
</tr>
<tr><td></td>
<td><input type="text" name="newProduct.name" ng-model="productCtrl.newProduct.name"></td>
<td><input type="text" name="newProduct.price" ng-model="productCtrl.newProduct.price"></td>
<td><input type="text" name="newProduct.type" ng-model="productCtrl.newProduct.type"></td>
<td><a href ng-click="productCtrl.addProduct()">Product {{productCtrl.newProduct.name}} toevoegen</a></td></tr>
</table>
Any help would appreciated.
The controller:
app.controller('ProductController', function(productService) {
var that = this;
productService.getProducts().success(function(data) {
that.products = data;
});
this.newProduct = "";
this.addProduct = function() {
that.products.push(this.newProduct);
window.alert(that.products);
this.newProduct = "";
};
});

Its a typo, your controller alias name is ProductCtrl not productCtrl, Additionally you need to change your ng-model's to correct the same thing
Replace productCtrl to ProductCtrl will fix your issue.
<tr>
<td>
<input type="text" name="newProduct.name" ng-model="ProductCtrl.newProduct.name"/>
</td>
<td>
<input type="text" name="newProduct.price" ng-model="ProductCtrl.newProduct.price"/>
</td>
<td>
<input type="text" name="newProduct.type" ng-model="ProductCtrl.newProduct.type"/>
</td>
<td>
<a href ng-click="ProductCtrl.addProduct()">
Product {{productCtrl.newProduct.name}} toevoegen
</a>
</td>
</tr>

Develop Reference

JavaScript is the programming language of the Web.

Handling multiple forms in a single page [AngularJS] - javascript

Related

Jquery executes Error section by default - Servlet

Angular JS Filed to Get Input text value and Does not Post to Wcf Service

AngularJs : Show Hide Fields According Select Value

Can not delete the required row using Angular.js/JavaScript

AngularJS ng-click function not reached

Categories

Resources