Develop Reference

Fetched value is undefined jquery (traversal)

Actually am using Jqgrid but in browser console html look like this
<tbody>
<tr>
<td></td>
<td></td>
<td>
<input type="text" id="priority_1per" value='10'>hello <input>
</td>
<td>
<input type="text" id="priority_2per" value='20'>hellob <input>
</td>
</tr>
</tbody>
there is a column: "priority1" "priority2" which has textbox
$('body').on('change', '#priority_1per', function () {
//debugger;
var priority1 = $(this).val();
var priority2 = $(this).closest("tr").children("td").find("input[type=text]").find("#priority_2per")
alert(priority1)
alert(priority2)
console.log(priority2)
});
=>var priority1 am getting value (this).val()
=> but am not getting value of priority2 column data (i dono am doing crrt traversing or not)
jQuery.fn.init [prevObject: jQuery.fn.init(10)]
length: 0
prevObject: jQuery.fn.init(10) [input#productpriority.form-control.productpriority, input#divisionname.form-control._division.ui-autocomplete-input, input#categoryname.form-control.category.ui-autocomplete-input, input#subcategoryname.form-control.subcategory.ui-autocomplete-input, input#priority_1.form-control.plantname.plantCode1, input#priority_1per.form-control.priority_1per.number, input#priority_2.form-control.plantname.plantCode2, input#priority_2per.form-control.priority_2per.number, input#priority_3.form-control.plantname.plantCode3, input#priority_3per.form-control.priority_3per.number, prevObject: jQuery.fn.init(12)]
[[Prototype]]: Object(0)
this is the error am finding (not an error but mistake in travesal)
PLEASE help me out
html look like

The problem is due to your find() logic. You use the first find() to get both the input type="text" elements, then the second is trying to find a child #priority_2per element inside the first input. This clearly cannot be found as it's not valid HTML.
To fix the problem remove the first find() and add val():
var priority2 = $(this).closest("tr").children("td").find("#priority_2per").val()
However as the elements have id attributes on them, and id have to be unique in the DOM, then the traversal logic is entirely redundant. You can just select by the id directly.
In addition, your HTML is invalid. <input /> elements have no closing tag. Here's a full working example:
$('body').on('change', '#priority_1per', function() {
var priority1 = $(this).val();
var priority2 = $("#priority_2per").val();
console.log(priority1);
console.log(priority2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td>
<input type="text" id="priority_1per" value="10" />hello
</td>
<td>
<input type="text" id="priority_2per" value="20" />hellob
</td>
</tr>
</tbody>
</table>

Maximum call stack size exceeded in AngularJS

I am loading data from SQL table using AngularJS and web API. I made a function that shows values in input texts when a row is selected from HTML table. I got this error when i click on any row on the html table when debug.
The HTML
<td>Code</td>
<td><input type="text" size="10" pattern="^[a-zA-Z0-9]+$" title="Alphnumeric" required autofocus ng-model="selectedMember.Code.Staff_Type_Code">
<input type="text" size="10" hidden ng-model="selectedMember.sys_key" /> </td>
</tr>
<tr>
<td>Latin Description</td>
<td><input type="text" required size="35" ng-model="selectedMember.Latin.L_Desc"></td>
</tr>
<tr>
<td>Local Description</td>
<td><input type="text" required size="35" ng-model="selectedMember.Local.A_Desc"></td>
</tr>
<tbody>
<tr ng-repeat="c in Contracts | filter:selectedMember.Code | filter:selectedMember.Latin | filter:selectedMember.Local ">
<td style="display:none;">{{c.sys_key}}</td>
<td>{{c.Staff_Type_Code}}</td>
<td>{{c.L_Desc}}</td>
<td>{{c.A_Desc}}</td>
<td>{{c.Hours_Day}}</td>
<td>{{c.Days_Week}}</td>
<td>{{c.Type_EndWork}}</td>
<td>{{c.Num_EndWork}}</td>
</tr>
</tbody>
Controller.js
$scope.selectedMember = { Code: "",sys_key:"", Latin:"" , Local:"", Hours_Day :"", Days_Week:"", Num_EndWork:"" }
$scope.showInEdit = function (member)
{
debugger;
$scope.selectedMember = member;
$scope.selectedMember.Code = member;
$scope.selectedMember.Latin = member;
$scope.selectedMember.Local = member;
}
when I comment the last 3 lines, selected row values are not displayed in input texts. or i must cancel the filter. is there is a way to work both both
Any help would be appreciated , thanks in advance

You can sometimes get this if you accidentally import/embed the same JS file twice, worth checking in your resources tab of the inspector . or if you are calling a function which is calling another function and so forth .

Issue sending JSON from array to web service on Angular

I have a table. Every cell of the row tables are form fields. Also, I have two buttons: one button add a new row to the table and a second one whitch send all the rows.
This is for add new blank rows:
$scope.atributs =[];
$scope.addRow = function(){
var newRow = {nomAtribut: "",tipus: "",mida: "",prioritat: "",obligatori: "",observacions: ""};
$scope.atributs.push(newRow);
}
View :
<table class="table">
<tr>
<td>Nom atribut</td>
<td>Tipus</td>
<td>Mida</td>
<td>Prioritat</td>
<td>Obligatori</td>
<td>Observacions</td>
</tr>
<tr ng-repeat="atribut in atributs">
<td><input type="text" ng-model="atribut.nomAtribut" /> </td>
<td>
<select ng-options="option as option.valor for option in options" ng-model="atribut.tipus"></select>
</td>
<td><input type="number" ng-model="atribut.mida" /></td>
<td>
<select ng-options="option as option.valor for option in options" ng-model="atribut.tipus"></select>
</td>
<td><input type="checkbox" ng-model="atribut.obligatori" ng-true-value="'YES'" ng-false-value="'NO'"></td>
<td><input type="text" ng-model="atribut.observacions" /> </td>
</tr>
</table>
Angular Code for sending data to web Service :-
$scope.sendRow = function(){
$http.post("http://10.0.203.73/WS/ws.php/tipusactius/alta", $scope.atributs).success(function(data){
$scope.status = data;
})
}
Json Array Sending:-
[{"nomAtribut":"j",
"tipus":{"idvalors_combo":"3","valor":"Date"},
"mida":11,"prioritat":"",
"obligatori":"YES",
"observacions":"fcefwq"}]
Is all correct and the problem come from the web service? or the angular code is wrong? It's my first try with angular. Thank you.

So it looks like your web service wants a single element from your data array at a time.
I think you should modify the sendRow function to take the row index you want to send, like so:
$scope.sendRow = function(atributRow){
$http.post("http://10.0.203.73/WS/ws.php/tipusactius/alta", atributRow).success(function(data){
$scope.status = data;
})
}
Then, you can send all rows in a loop by:
angular.forEach($scope.atributs, $scope.sendRow);
or a single row with a specific index:
$scope.sendRow($scope.atributs[0])

Passing the `ng-repeat` element to javascript function

I want to pass the ng-repeat element to javascript function tried but it is not working
<tr ng-repeat="x in myArry">
<td><input type="text" value="{{x.firstname}}" id="{{x.firstname}}{{$index}}" onblur="FirstNamseCon(this.id, {{x.firstname}}{{$index}})" /></td>
<td><input type="text" value="{{x.lastname}}" id="{{x.lastname}}{{$index}}" onblur="FirstNamseCon(this.id, {{x.lastname}}{{$index}})"></td>
<td><input type="text" value="" id="{{x.fullname}}{{$index}}"></td>
<!--<td><label id="{{x.fullname}}{{$index}}"></label></td>-->
</tr>
this my javascript function
function FirstNamseCon(value1,value2) {
document.getElementById('B Madhukar0').value = document.getElementById(value1).value + ' ' + document.getElementById(value2).value;
}
I want to pass the name last name id to function using {{x.firstname}}{{$index}} but I am getting x is undefined error how to solve this

A angular solution will be to use ng-model to update the values
var app = angular.module('my-app', [], function() {})
app.controller('AppController', function($scope) {
$scope.myArry = [{
firstname: 'John',
lastname: 'Thomas',
fullname: 'John Thomas'
}, {
firstname: 'Arun',
lastname: 'Johny',
fullname: 'Arun Johny'
}]
$scope.updateFullName = function(x) {
x.fullname = x.firstname + ' ' + x.lastname
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
<div ng-controller="AppController">
<table>
<tr ng-repeat="x in myArry">
<td>
<input type="text" ng-model="x.firstname" ng-change="updateFullName(x)" />
</td>
<td>
<input type="text" ng-model="x.lastname" ng-change="updateFullName(x)">
</td>
<td>
<input type="text" ng-model="x.fullname">
</td>
</tr>
</table>
</div>
</div>

use angulars ng-blur insted onblur and write your FirstNamseCon in controlles as $scope.FirstNamseCon

Use ng-model instead of value. Just change your code something like this:
<tr ng-repeat="x in myArry">
<td><input type="text" ng-model="x.firstname" id="{{x.firstname}}{{$index}}" onblur="FirstNamseCon(this.id, {{x.firstname}}{{$index}})" /></td>
<td><input type="text" ng-model="x.lastname" id="{{x.lastname}}{{$index}}" onblur="FirstNamseCon(this.id, {{x.lastname}}{{$index}})"></td>
<td><input type="text" value="" id="{{x.fullname}}{{$index}}"></td>
<!--<td><label id="{{x.fullname}}{{$index}}"></label></td>-->
</tr>
But you don't have to use the onblur for this.

You can do like this -
onblur="FirstNamseCon('firstName',$index,x)
and in your javascript code you can get id like this.
var id = x[type]+index;
// A['firstName']+0

Doing DOM manipulation inside controller considered as bad pattern,
don't dare to do that if you wanted to manipulate scope variable's
from jQuery.
Use ng-model over the input field to get two way binding feature of angular and then you could easily pass the value of scope ng-model value to your controller.
Also make you function available inside a scope by having, $scope.FirstNamseCon = FirstNamseCon exposed FirstNamseCon method in scope by assigning its reference to scope variable.
Markup
<tr ng-repeat="x in myArry">
<td><input type="text" ng-model="firstName" ng-clur="FirstNamseCon(firstName)" /></td>
<td><input type="text" ng-model="x.lastName" ng-blur="FirstNamseCon(x.lastName)"></td>
<td><input type="text" ng-model="x.fullName" ng-blur="FirstNamseCon(x.lastName)"></td>
</tr>

Add new columns with specific ng-model to HTML table

So I am trying to add additional columns to a table inside a form. Adding the columns themselves is not that difficult but I don't know how to go about setting their ng-models.
This is my current code:
(HTML)
<button ng-click="add()" type="button">+ column</button>
<table>
<thead id="inputtablehead">
<th class="theadlabel">(in 1.000 EUR)</th>
<th>{{startyear}}</th>
<th class="NBBCodesHeader">NBB Codes</th>
<th>Source</th>
</thead>
<tbody class="input">
<tr>
<td>number of months</td>
<td>
<input ng-model="input{{startyear}}.NumberMonths" type="text" class="{{startyear}}" required>
</td>
<td class="NBBCodes"></td>
</tr>
<tr>
<td>Fixed assets</td>
<td>
<input ng-model="input{{startyear}}.FixedAssets" class="{{startyear}}" type="text" required>
</td>
<td class="NBBCodes">20/28</td>
</tr>
<tr>
<td>Inventory</td>
<td>
<input ng-model="input{{startyear}}.Inventory" class="{{startyear}}" type="text" required>
</td>
<td class="NBBCodes">3</td>
</tr>
</table>
(JS)
angular.module("inputFields", []).controller("MyTable", function ($scope) {
$scope.startyear = new Date().getFullYear();
var nextyear = new Date().getFullYear() - 1;
$scope.add = function () {
$(".NBBCodesHeader").before("<th>"+nextyear+"</th>");
$(".input .NBBCodes").before('<td><input class='+nextyear+' type="text" required></td>');
nextyear--;
};
});
So in my JS the <input class='+nextyear+' type="text" required> should become something like <input ng-model="input'+nextyear+'.NumberMonths" class='+nextyear+' type="text" required> for the <td> element added next to the 'number of months' row.
I was thinking to give ea row an id in the form of NumberMonths and then look up the id when adding the column.
So my question would be: is this a valid way to do it and how would I get this id? Or am I overthinking it and is there an easier way to do this?

Use standard javascript [] object notation for variable property names.
<input ng-model="input[startyear].Inventory"

You shouldn't do DOM manipulations from a controller. It's not a good practice when working with AngularJS. A good rule to remember that is: don't use jQuery. It's a common mistake when starting working with AngularJS. And, in case you would be completely sure that you need to modify the DOM, do it always from a directive.
About your problem, maybe you can base your solution in create a data structure in your controller (a Javascript Object), and render it through a ng-repeat in your template. This way, if you modify the object (adding a new column), the template will be automatically updated.