changing model objects inside controllers to manipulate DOM objects - javascript

So I am learning how to use controllers in angularjs and I am stuck. I created a form using html and tested to see if the controller was responding to the html through the data-binded attribute "message". However "enter your details" does not appear under "Add Event" in the browser. Am I missing something in my code? Is there somewhere in the app.module folder where I should declare a constructor? Let me know your thoughts.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h3>Add Event</h3>
<div ng-app='eventForm' name='AddEventForm' ng-submit='AddEvent();' ng-controller='eventsCtrl'>
{{message}}
<table>
<tr>
<td>Event Name</td>
<td><input type="text" ng-model="event.Name" required /></td>
</tr>
<tr>
<td>Event Location</td>
<td><input type="text" ng-model="event.Location" required /></td>
</tr>
<tr>
<td>Event Description</td>
<td><input type="text" ng-model="event.Description" required /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="submit" ng-disabled="AddEventForm.$invalid"></td>
</tr>
</table>
</div>
<script>
var eventForm = angular.module('eventForm', []);
eventForm.controller('eventsCtrl', function($scope) {
$scope.message = 'Enter your details';
$scope.addEvent = function()
{
}
});
</script>
</body>
</html>


You can like this following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h3>Add Event</h3>
<form
ng-app="eventForm"
ng-controller="eventsCtrl"
name="AddEventForm"
ng-submit="AddEvent()"
>
{{ message }}
<table>
<tr>
<td>Event Name</td>
<td><input type="text" ng-model="event.Name" required /></td>
</tr>
<tr>
<td>Event Location</td>
<td><input type="text" ng-model="event.Location" required /></td>
</tr>
<tr>
<td>Event Description</td>
<td><input type="text" ng-model="event.Description" required /></td>
</tr>
<tr>
<td colspan="2">
<button type="submit" ng-disabled="AddEventForm.$invalid">
Submit
</button>
</td>
</tr>
</table>
</form>
<script>
var eventForm = angular.module("eventForm", []);
eventForm.controller("eventsCtrl", function($scope, $log) {
$scope.message = "Enter your details";
$scope.AddEvent = function() {
$log.log($scope.event);
};
});
</script>
</body>
</html>


I think you should to use form tag in this situation:
<form ng-app='eventForm' name='AddEventForm' ng-submit='AddEvent();' ng-controller='eventsCtrl'>

Related

Angular JS Application failed to return Mesaage from Wcf Service

I am Consuming Wcf Service into Angular JS Application. My Wcf Service is working correctly and My Angular JS application are able to intract with wcf Service but I am facing one problem. I have an variable in script file called $scope.msg. Here what i trying to achieve if the username and password is correct then i want to redirect the user into next page otherwise if username or password is incorrect then i want to display the messaage that worng username or password . I am getting this error in console application of Google Chrome instaed of returing into Chorme console application i want to dispaly into Angular JS application but i can not ..
Here is the Script 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.Username = "";
$scope.Password = "";
}
$scope.login = function () {
var User = {
Username: $scope.Username,
Password: $scope.Password,
};
myService.AuthenticateUser(User).then(function (pl) {
$scope.msg = "Username and password is correct ";
}, function (err) {
$scope.msg = "Password Incorrect !";
console.log("Some error Occured" + err);
});
};
}]);
app.service("myService", function ($http) {
// Create new record
this.AuthenticateUser = function (User) {
return $http.post("http://localhost:52098/HalifaxIISService.svc/AuthenticateUser", JSON.stringify(User));
}
})
Here is the 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/LoginScript.js"></script>
</head>
<body>
<table id="tblContainer" data-ng-controller="Web_Client_Controller">
<tr>
<td>
</td>
</tr>
<tr>
<td>
<div style="color: red;">{{Message}}</div>
<table style="border: solid 4px Red; padding: 2px;">
<tr>
<td></td>
<td>
<span>Username</span>
</td>
<td>
<input type="text" id="username" data-ng-model="Username" required="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Password</span>
</td>
<td>
<input type="password" id="password" required data-ng-model="Password" require="" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="button" id="Login" value="Login" data-ng-click="login()" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script src="~/RegistrationScript/LoginScript.js"></script>
As far i understand add if statement on this line but i am not sure where i will add this ..
myService.AuthenticateUser(User).then(function (pl) {
$scope.msg = "Username and password is correct ";

The issue is you missed to include the error message display code in your html.
SO you can include it just like
<div>
{{msg}}
</div>
Here your full 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/LoginScript.js"></script>
</head>
<body>
<table id="tblContainer" data-ng-controller="Web_Client_Controller">
<tr>
<td></td>
</tr>
<tr>
<td>
<div style="color: red;">{{msg}}</div>
<table style="border: solid 4px Red; padding: 2px;">
<tr>
<td></td>
<td>
<span>Username</span>
</td>
<td>
<input type="text" id="username" data-ng-model="Username" required="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Password</span>
</td>
<td>
<input type="password" id="password" required data-ng-model="Password" require="" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="button" id="Login" value="Login" data-ng-click="login()" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script src="~/RegistrationScript/LoginScript.js"></script>

How to data-bind checkbox value to Javascript object

I am trying to set up 2-way data binding in Javascript for a simple form. I have been using the databind plugin by grnadav, but have been unable to get a (or multiple) checkbox values to bind to an object array. The data model, js binding and test output function are
// DataBind model
var model = {
title: 'sample',
cb: ['option', 'option', 'option']
}
// bind form
window.onload = function() {
DataBind.bind( document.getElementById('form'), model );
};
// log data values
function sendForm(){
console.log(JSON.stringify(model));
document.getElementById('data').innerHTML = JSON.stringify(model);
}
The HTML markup is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Checkbox Test</title>
</head>
<body>
<table id="form">
<tr>
<td>Input</td>
<td><input id="title" data-key="title"></td>
</tr>
<tr>
<td>Checkboxes</td>
<td>
<input name="checkbox-group" data-key="cb[0]" id="in-checkbox1" value="one" type="checkbox"/>
<input name="checkbox-group" data-key="cb[1]" id="in-checkbox2" value="two" type="checkbox"/>
<input name="checkbox-group" data-key="cb[2]" id="in-checkbox3" value="three" type="checkbox"/>
</td>
</tr>
<tr>
<td><pre id="data"></pre></td>
</tr>
<tr>
<td colspan="2"><input type="Button" name="Submit" value="Continue" onclick="sendForm()"></td>
</tr>
</table>
<script src="DataBind.js"></script>
...
</body>
</html>

It seems that you can only bind to objects not arrays, try:
var model = {
title: 'sample',
cb: [{key:'option'}, {key:'option'}, {key:'option'}]
};
// bind form
window.onload = function() {
DataBind.bind( document.getElementById('form'), model );
};
// log data values
function sendForm(){
console.log(JSON.stringify(model));
document.getElementById('data').innerHTML = JSON.stringify(model);
}
<script src="https://rawgit.com/grnadav/databind/0.4.x/src/DataBind.min.js"></script>
<table id="form">
<tr>
<td>Input</td>
<td><input id="title" data-key="title"></td>
</tr>
<tr>
<td>Checkboxes</td>
<td>
<input name="checkbox-group" data-key="cb[0].key" id="in-checkbox1" value="one" type="checkbox"/>
<input name="checkbox-group" data-key="cb[1].key" id="in-checkbox2" value="two" type="checkbox"/>
<input name="checkbox-group" data-key="cb[2].key" id="in-checkbox3" type="checkbox"/>
</td>
</tr>
<tr>
<td><pre id="data"></pre></td>
</tr>
<tr>
<td colspan="2"><input type="Button" name="Submit" value="Continue" onclick="sendForm()"></td>
</tr>
</table>
You can add issue for that on github.

onClick enable form

I have problem when i want show form edit
<!-- this is form-->
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<% while(resultset.next()){ %>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td><%= no %></td>
<td><input id='f1' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(2)%>'></td>
<td><input id='f2' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(3)%>'></td>
<td><input id='f3'class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(4)%>'></td>
<td><input id='f4' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(5)%>'></td>
<td><input id='f5' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(6)%>'></td>
<td><input id='f6' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(7)%>'></td>
<td><a id='elementId' onclick="showDiv()"><span class='glyphicon glyphicon-pencil'></span></a> <input type='submit' id="welcomeDiv" style="display:none;"></td>
<td><span class="glyphicon glyphicon-trash"></span></td>
</tr>
</form>
</tbody>
<% no++; } %>
</table>
The form will enable when the glypicon edit click. Here is the
JAVASCRIPT :
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('#elementId').click(function(){
$('#f1').removeAttr("disabled");
$('#f2').removeAttr("disabled");
$('#f3').removeAttr("disabled");
$('#f4').removeAttr("disabled");
$('#f5').removeAttr("disabled");
$('#f6').removeAttr("disabled");
$('#f7').removeAttr("disabled");
});
</script>
when <a id='elementId' onclick="showDiv()"><span class='glyphicon glyphicon-pencil'></span></a> <input type='submit' id="welcomeDiv" style="display:none;"> click
for first row, work.
but for the second row like this

You are repeating the same id on one page. You must use only one id on a page. You can use the same class multiple times but not id.

Basically when you click on AAA then it is removing the class "aaa" from input field. You can check it with Firebug . It is not showing or popping up anything in it. But I have written a new code. It will enable and disable the input
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td>1</td>
<td><input type="text" class="aaa" value ="kool" disabled="disabled"/></td>
<td><input type="text" class="aaa" value ="fool" disabled="disabled"/></td>
<td class="abc">AAA</td>
</tr>
</form>
</tbody>
</table>
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('.abc').click(function(){
$(this).closest('tr').find('.aaa').attr('disabled',false);
});
</script>
box.

A small example to do for this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td>1</td>
<td><input type="text" class="aaa"/></td>
<td><input type="text" class="aaa"/></td>
<td class="abc">AAA</td>
</tr>
</form>
</tbody>
</table>
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('.abc').click(function(){
$(this).closest('tr').find('.aaa').removeClass('aaa');
});
</script>

In this way you are just referring to closest element of click.You can modified any content based on this. Please feel free to ask any query, if you face any problem in it. I just shared an example for execution for this.
This is applicable for any number of rows in a table.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td>1</td>
<td><input type="text" class="aaa" value ="kool" disabled="disabled"/></td>
<td><input type="text" class="aaa" value ="fool" disabled="disabled"/></td>
<td class="abc">AAA</td>
</tr>
</form>
</tbody>
</table>
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('.abc').click(function(){
$(this).closest('tr').find('.aaa').attr('disabled',false);
$(this).closest('tr td:eq(2)').find('a:eq(0)').show();
$(this).closest('tr td:eq(2)').find('a:eq(1)').hide();
// Or YOu can use
$(this).closest('tr td:eq(2)').find('a:eq(0)').css('display','block');
$(this).closest('tr td:eq(2)').find('a:eq(0)').css('display','none');
});
</script>
Please refer eq:(COlUMN of TR). It starts from zero so make adjustment accordingly. Hope you get complete answer of your query.

Add some class in tr.
<script type="text/javascript">
$('.abc').click(function(){
$('trClassName').find('.aaa').attr('disabled',true);
$(this).closest('tr').find('.aaa').attr('disabled',false);
});
</script>
Hope it will solve all your problems.

Only add class in tbody tr and also it should be with dot in jquery syntax.I have mentioned classname and it should also be with .TrClassName which you will mention in tr.

jQuery Find First Row From Closest Method

Using jQuery, I'm trying to find the first row of a given column in a table based on the control that has focus. The below kind of works, but it finds the last row of the given column. I want it to find the first row.
var $next= $('input:focus').closest('table').find('td:nth-child(3)').find('input')
I believe this is going to the last row because of the use of the 'closest()' method which traverses through the elements starting from the bottom.
What this ultimately being used for is navigate through a table using the arrow keys. It's based on this helpful code someone was kind enough to share: https://gist.github.com/krcourville/7309218.
EDIT: Adding additional fuller jquery and html as requested.
jQuery (stripped down version):
<script>
$('table.arrow-nav').keydown(function(e){
switch(e.which){
case //... other cases for other keycodes ...
case e.ctrlKey && 38: // <ctrl> + <Up>
$next = $('input:focus').closest('tr').parent().find("tr:first").find('td:nth-child(3)').find('input');
break;
}
if($next && $next.length){
$next.focus();
}
});
</script>
HTML:
<html>
<head></head>
<body>
<table class="arrow-nav" border="1" cellpadding="2" cellspacing="2">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td><input id="ctl_1_1" type="text"></td>
<td><input id="ctl_2_1" type="text"></td>
<td><input id="ctl_3_1" type="text"></td>
<td><input id="ctl_4_1" type="text"></td>
</tr>
<tr>
<td><input id="ctl_1_2" type="text"></td>
<td><input id="ctl_2_2" type="text"></td>
<td><input id="ctl_3_2" type="text"></td>
<td><input id="ctl_4_2" type="text"></td>
</tr>
<tr>
<td><input id="ctl_1_3" type="text"></td>
<td><input id="ctl_2_3" type="text"></td>
<td><input id="ctl_3_3" type="text"></td>
<td><input id="ctl_4_3" type="text"></td>
</tr>
</table>
</body>
<html>

Try like this
$('input:focus').closest('tr').parent().find("tr:nth-child(2)").find('td:nth-child(3)').find('input')

You can use the ids for referencing each row:
$(function() {
$('input').on('focus', function(event) {
var foc = $(this).attr('id');
var ctl = parseInt(foc.charAt(6), 10);
var next = $('tr')[ctl];
if (next === $('tr')[2]) {
next = $('tr')[0];
}
console.log('Focused input is ' + foc);
console.log('The next row is ' + (ctl + 1));
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Next Row</title>
</head>
<body>
<table class="arrow-nav" border="1" cellpadding="2" cellspacing="2">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>
<input id="ctl_1_1" type="text">
</td>
<td>
<input id="ctl_2_1" type="text">
</td>
<td>
<input id="ctl_3_1" type="text">
</td>
<td>
<input id="ctl_4_1" type="text">
</td>
</tr>
<tr>
<td>
<input id="ctl_1_2" type="text">
</td>
<td>
<input id="ctl_2_2" type="text">
</td>
<td>
<input id="ctl_3_2" type="text">
</td>
<td>
<input id="ctl_4_2" type="text">
</td>
</tr>
<tr>
<td>
<input id="ctl_1_3" type="text">
</td>
<td>
<input id="ctl_2_3" type="text">
</td>
<td>
<input id="ctl_3_3" type="text">
</td>
<td>
<input id="ctl_4_3" type="text">
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>

How to fix this calculate script which has "NaN" in cost box?

I have a calculate script for cost, but I have a little problem when I try to empty price box, there is "NaN" in cost box.
I do not know where is the problem. I have made following changes: digitsVal=isNaN(digitsVal)?0:digitsVal; became var digitsVal=isNaN(digitsVal)?0:digitsVal; and first this code is working, but second I try to empty in cost box, there is still "NaN" in cost box.
How to fix this calculate script ?. Are there solution about this script?
Example :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var price=$('#price'),
phone=$('#phone_number'),
digits=$('#digits'),
sum=$('#sum');
function calculateSum() {
var digitsVal=parseInt(phone.val().substr(-2));
digitsVal=isNaN(digitsVal)?0:digitsVal;
digits.val(digitsVal);
sum.val(parseFloat(price.val())+digitsVal);
};
phone.on('keyup', calculateSum);
price.on('keyup', calculateSum);
});
</script>
<table width="300px" border="1">
<tr>
<td width="40px">1</td>
<td>Price</td>
<td><input class="txt" name="price" type="text" id="price"></td>
</tr>
<tr>
<td>2</td>
<td>Phone Number</td>
<td><input name="phone_number" type="text" id="phone_number"></td>
</tr>
<tr>
<td>3</td>
<td>2 Digits</td>
<td><input class="txt" name="digits" type="text" id="digits" readonly></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Cost :</td>
<td align="center"><input type="text" name="sum" id="sum" value="0"></span></td>
</tr>
</table>
</body>
</html>

Replace:
sum.val(parseFloat(price.val())+digitsVal);
With:
isNaN(parseFloat(price.val())+digitsVal) ? sum.val(0) : sum.val(parseFloat(price.val())+digitsVal);
I think this should work for you

Categories