We Keep Coding

JavaScript function is failing to clone table row

To give you some context of my situation, In my my code an item can have parts, with these parts the user can harvest, transfer, or dispose of them. For example, a item can have 5 parts. Right now when the user selects a radio box option it will handle all of these parts the same way. So I have created a checkBox option where a user can 'de-select' the "All" option. I then want this to create two identical rows so that the user can have options, for example , transfer 2, harvest 2, dispose of 1.
I have a checkbox that calls my jQuery function that looks like this
I have a checkbox field inside my row that calls my jQuery function when it is clicked, it looks like this
<tr class="tr_clone">
<td>
#part.PartIDLink
</td>
<td>
#Html.DisplayFor(x => x.Parts[i].PartName)
#Html.HiddenFor(x => x.Parts[i].PartName)
</td>
<td style="font-weight:bold">
#Html.DisplayFor(x => x.Parts[i].QtyInItem)
#Html.HiddenFor(x => x.Parts[i].QtyInItem)
</td>
<td>
<input type="checkbox" id="all#(part.ID)" onchange="doalert(this.id, #part.ID)" checked>
</td>
#foreach (var actionType in partActionTypes)
{
<td>
#Html.RadioButtonFor(x => x.Parts[i].SelectedActionType, actionType)
</td>
}
</tr>
And here is my JQuery function
<script>
function doalert(id, rowID) {
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find('td');
$tr.after($clone);
}
</script>
Here is the rendered HTML
<table class="table">
<tbody>
<tr>
<th>
IGT Part ID
</th>
<th>
Part Name
</th>
<th>
Qty used in Item
</th>
<th>
Move All
</th>
<th style="color:blue">
Transfer
</th>
<th style="color:forestgreen">
Harvest
</th>
<th style="color:red">
Dispose
</th>
</tr>
</tbody>
<tr class="tr_clone" ">
<td>
<a p-id="346 " style="color:#FF00FF; " href="# ">600601</a>
</td>
<td>
Supply - Packing Carton, 9" x 8 " x 8", MU/AX <input id="Parts_0__PartName" name="Parts[0].PartName" type="hidden" value="Supply - Packing Carton, 9" x 8" x 8", MU/AX">
</td>
<td style="font-weight:bold">
1
<input data-val="true" data-val-number="The field QtyInItem must be a number." data-val-required="The QtyInItem field is required." id="Parts_0__QtyInItem" name="Parts[0].QtyInItem" type="hidden" value="1">
</td>
<td>
<input type="checkbox" id="all346" onchange="doalert(this.id,346)" checked="">
</td>
<td>
<input checked="checked" data-val="true" data-val-required="The SelectedActionType field is required." id="Parts_0__SelectedActionType" name="Parts[0].SelectedActionType" type="radio" value="Transfer">
</td>
<td>
<input id="Parts_0__SelectedActionType" name="Parts[0].SelectedActionType" type="radio" value="Harvest">
</td>
<td>
<input id="Parts_0__SelectedActionType" name="Parts[0].SelectedActionType" type="radio" value="Dispose">
</td>
</tr>
But it is not cloning the table row. Why is this? Any help is appreciated

The value of this is the issue, but Guy Incognito's hint doesn't tell the whole story. With jQuery, $(this) usually refers to the event target on a proper event handler. Since you aren't using one, it's null.
Instead of your inline change handler, bind the event in your script like this:
$('.tr_clone input.some-class').change(function() { // where some-class is on the checkbox
let Id = $(this).attr('id');
// set this attribute in your template
let partId = $(this).attr('data-partId');
// ...
}
To pass the value of partId from your template, use a data attribute:
<input type="checkbox" id="all#(part.ID)" data-partId="#(part.ID)" class="some-class">

Please help to send checklist to service without changing the model value?

I have a json array like
$scope.tablesData = [
{
"table_name": 'table1',
"charts": 0,
"flex_sheet": 0,
"dtf": 0
},{
"table_name": 'table2',
"charts": 1,
"flex_sheet": 1,
"dtf": 1
},{
"table_name": 'table3'
},{
"table_name": 'table4'
},
{
"table_name": 'table5'
}]
I have html page like this
<div ng-controller="MyCtrl">
<table class="table">
<thead class="table-inverse">
<tr>
<th>Table Name</th>
<th>Charts</th>
<th>FlexSheet</th>
<th>Dtf</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="table in tablesData">
<td>{{table.table_name}}</td>
<td><input type="checkbox" ng-true-value="1" ng-false-value='0' ng-model="table.charts"></td>
<td><input type="checkbox" ng-true-value="1" ng-false-value='0' ng-model="table.flex_sheet"></td>
<td><input type="checkbox" ng-true-value="1" ng-false-value='0' ng-model="table.dtf"></td>
</tr>
</tbody>
</table>
<input type="button" class="btn btn-info" value="submit" ng- click="upadateTableInfo()">
</div>
You can see this by http://jsfiddle.net/soumyagangamwar/gpm72kmo/
I have to send table data to service in submit click.
So I called 'updateTableInfo' method in ng-click.
Please observe data i.e $scope.tableData once. After controller is loading after getting data in view if I checked some values like rows 3,4,5 (table 3,4,5) then click submit button then controller receives the one array contain 5 objects each object contain 4 properties like table_name, charts, fles_sheet, dtf with thiere values. it's receives fine.
My problem is after view loading. If I didn't change any values(3,4,5) then in submit click I receive the array contain 5 objects but in that I receive 3,4,5 objects with out have properties charta, flex sheet, dtf. But if user not doing any thing then I have to send 0 to post method but object should contain all 4 properties.

Just add the ng-init to set the modal values by default to 0 as follows. I hope it solves your problem.
<tr ng-repeat="table in tablesData">
<td>{{table.table_name}}</td>
<td><input type="checkbox" ng-init="table.charts = 0" ng-true-value="1" ng-false-value='0' ng-model="table.charts"></td>
<td><input type="checkbox" ng-init="table.flex_sheet = 0" ng-true-value="1" ng-false-value='0' ng-model="table.flex_sheet"></td>
<td><input type="checkbox" ng-init="table.dtf = 0" ng-true-value="1" ng-false-value='0' ng-model="table.dtf"></td>
</tr>
Check this fiddle: http://jsfiddle.net/gpm72kmo/1/

ng repeat in table using Angularjs

The Array I use is [{"cell":["jobcode","resume_number","score"]},{"cell":["jc100","rc1",80]},{"cell":["jc100","rc123",70]}]
And I came up with javascript code as
var cell=response;
for (var i in cell) {
for(var j in cell[i])
{
console.log(cell[i][j]);
profiles.push(cell[i][j]);
$scope.profiles=profiles;
for(k in cell[i][j])
{
resumes.push(cell[i][j]);
console.log("resume length"+resumes.length);
$scope.columns=resumes;
console.log(JSON.stringify($scope.columns));
}
}
}
And html is
<tr ng-repeat="profile in profiles track by $index" >
<td ng-repeat="col in columns track by $index">
<label >{{col.cell}}</label>
</td>
</tr>
And ended up enter image description here
I have no idea to proceed further. I need to organize those data as a table. Please help.

Your data contains an array of objects which contains another array. Therefore, you need to extract each object from outer array and then go down to inner one.
If you need this data only to organise them in a table, then you can simply use the following code:
Your Controller code:
$scope.cell = response;
Your HTML :
<tr ng-repeat="profile in cell track by $index" >
<td ng-repeat="col in profile.cell track by $index">
<label >{{col}}</label>
</td>
</tr>
In case you need to store each array object, then you can use forEach loop:
Your controller code:
var cell=[{"cell":["jobcode","resume_number","score"]}, {"cell":["jc100","rc1",80]}, {"cell":["jc100","rc123",70]}];
angular.forEach(cell, function(data){
$scope.profiles.push(data);
});
Your HTML :
<table>
<tr ng-repeat="profile in profiles track by $index" >
<td ng-repeat="col in profile.cell track by $index">
<label >{{col}}</label>
</td>
</tr>
</table>

Try the following code. Take header as separate part from json and display header first then start ng-repeat from index first
<table border="1">
<tr>
<td>
{{columns[0].cell[0]}}
</td>
<td>
{{columns[0].cell[1]}}
</td>
<td>
{{columns[0].cell[2]}}
</td>
</tr>
<tr ng-repeat="col in columns" ng-if="$index>0">
<td>
{{columns[$index].cell[0]}}
</td>
<td>
{{columns[$index].cell[1]}}
</td>
<td>
{{columns[$index].cell[2]}}
</td>
</tr>
</table>

Model is not getting updated - AngularJS

I have a simple page where there are list of existing item (these can be modified) and option to add new items to the existing list.
There are 2 sections, CodeLookup and Benchmark. Design of both section is same ( as explained above).
There is a link which will restore all the changes back to the initial state of page.
On JS , there are arrays, one for storing the list which is displayed and a backup array which stores initial state of list. There is an add function which adds newly input data to the list. Lastly there is a cancel method (linked to cancel link) which will restore the list to its initial state. This cancel method just put the original list in the list used to display data.
Now the codelookup value is restored on hit of cancel the first time. But if you modify again in the list and hot cancel, restoration doesnot happen. Also benchmark is not resored at all. I have put breakpoint on Chrome dev tool and found that the list contain the values from original list however its not reflecting on UI.
Any help in fixing this is appreciated.
Below is the code :
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<SCRIPT type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></SCRIPT>
<script type="text/javascript">
var referenceDataMaintainenceApp = angular.module('referenceDataMaintainenceApp',[] );
referenceDataMaintainenceApp.controller('referenceDataMaintainenceCtrl', function ($scope) {
$scope.orig_lookup_codes_details;
$scope.orig_calendar_details;
$scope.orig_pams_fields;
$scope.orig_brokers_details;
$scope.lookup_codes_details = [{'lookupName':'ac_asset','codeName':'ABCD','codeDetail':'sdfsdfsdf','ruleDetail':'sdsdsdsdsd','active':false}];
$scope.benchmarks_details = [{'benchmarkName':'Bench1','benchmarkDesc':'First Entry','active':false}];
$scope.orig_lookup_codes_details = angular.copy($scope.lookup_codes_details);
$scope.orig_brokers_details = angular.copy($scope.benchmarks_details);
$scope.addLookupCode = function() {
$scope.lookup_codes_details.push($scope.new_lookup_code);
$scope.new_lookup_code = getLookupCodeObject();
};
$scope.addBenchMark = function() {
$scope.benchmarks_details.push($scope.new_benchmark);
$scope.new_benchmark = getBenchMarkObject();
};
$scope.cancelData = function() {
$scope.brokers_details = $scope.orig_brokers_details;
$scope.lookup_codes_details = $scope.orig_lookup_codes_details;
console.log("sdsd");
//$http.post('/data/save', $scope.benchmarks_details);
};
});
function getLookupCodeObject () {
lookup_code = {
lookupName : '',
codeName : '',
codeDetail : '',
ruleDetail : '',
active : false
};
return lookup_code;
}
function getBenchMarkObject () {
benchmark = {
benchmarkName : '',
benchmarkDesc : '',
benchmarkId : '',
benchmarkType : ''
};
return benchmark;
}
</script>
</head>
<body ng-app="referenceDataMaintainenceApp" ng-controller="referenceDataMaintainenceCtrl" >
<div><A class="operationalnav" ng-click="cancelData()"
href="javascript:;">Cancel</A> </div>
<br />
<br />
<TABLE id="tblGridLookupCodes" class="tableData" border="0"
width="100%">
<THEAD>
<TR bgColor="#eaeaea">
<TD class="tableTitle" noWrap>Code Name</TD>
<TD class="tableTitle" noWrap>Description</TD>
<TD class="tableTitle" noWrap align="center">Active</TD>
</TR>
</THEAD>
<TBODY>
<TR ng-repeat="lookup_code_detail in lookup_codes_details">
<td nowrap="nowrap">{{lookup_code_detail.codeName}}</td>
<td nowrap="nowrap">
<input type="text" name="codeLookupBean[0].codeDescription"
maxlength="100" size="80" ng-model="lookup_code_detail.codeDetail" />
</td>
<td nowrap="nowrap" align="center">
<input type="checkbox" name="codeLookupBean[0].active"
ng-model="lookup_code_detail.active" />
</td>
</TR>
</TBODY>
</TABLE>
<HR width="100%">
<table>
<tr>
<td>
<INPUT id="codeNameInput" name="codeNameInput"
maxLength="32" ng-model="new_lookup_code.codeName" />
</td>
<td>
<INPUT id="descInput" name="descInput" maxLength="100"
size="80" ng-model="new_lookup_code.codeDetail">
</td>
<td>
<INPUT id="activeInput" name="activeInput" CHECKED type="checkbox"
ng-model="new_lookup_code.active" />
</td>
<td>
<INPUT id="btnAddRow" class="btnz" title="Add Row"
ng-click="addLookupCode($event)" name="btnAddRow" value=" Add "
type="button" />
</td>
</tr>
</table>
<br /><br /><br />
<TABLE id="tblGridBenchmarks" class="tableData" border="0" width="100%">
<THEAD>
<TR bgColor="#eaeaea">
<TD class="tableTitle" noWrap>Benchmark Name</TD>
<TD class="tableTitle" noWrap>Description</TD>
</TR>
</THEAD>
<TBODY>
<TR ng-repeat="benchmark_detail in benchmarks_details">
<TD>{{benchmark_detail.benchmarkName}}</TD>
<TD><INPUT name="benchmarkBean[0].benchmarkDesc"
maxLength="255" size="120" ng-model="benchmark_detail.benchmarkDesc"></TD>
</TR>
</TBODY>
</TABLE>
<HR width="100%">
<table>
<tr>
<td>Enter Benchmark Name:<BR> <INPUT
id="benchmarkNameInput" name="benchmarkNameInput"
ng-model="new_benchmark.benchmarkName" maxLength="100" size="30">
</td>
<td>Description:<BR> <INPUT name="benchmarkDescInput"
ng-model="new_benchmark.benchmarkDesc" maxLength="255" size="80">
</td>
<td><INPUT id="btnAddRowComment" class="btnz" title="Add Row"
ng-click="addBenchMark($event)" name="btnAddRowComment"
value=" Add " type="button"></td>
</tr>
</table>

It seems like $digest cycle was not run at all or correctly.
try to run $scope.$apply() and see if it works.
example:
http://jsfiddle.net/00d0ux1x/
For more information see
http://www.sitepoint.com/understanding-angulars-apply-digest/
However in your case problem is
javascript:; change to javascript:void(0);
use angular.copy(); to copy original array if you don't want to modify it in later use.
in cancel function you are setting $scope.brokers_details and in view using $scope.benchmarks_details. (also having orig_brokers_details)
See fixed solution
http://jsfiddle.net/00d0ux1x/3/

CRUD operations in angularjs with REST API

The CRUD operations with AngularJS are working fine. On click of submit button values get submitted in db, but its not getting reflected on view with at the same time.
Either I required separate button for showing values from database or I need to click twice.
My view:
<div style="float:left; margin-left:50px;">
<div><label for="id">Update Records</label></div><br>
<table>
<tr >
<td><label for="id">Id:</label> </td>
<td><input type="text" name="id" ng-model="user.id"/></td>
</tr>
<tr >
<td><br><label for="uname">Name:</label> </td>
<td><input type="text" name="uname" ng-model="user.uname"/></td>
</tr>
<tr>
<td><br><label for="ucity">City:</label> </td>
<td><input type="text" name="ucity" ng-model="user.ucity"/></td>
</tr>
<tr>
<td>
<a ng-click="updatecust(user.id,user.uname,user.ucity)" class="btn btn-primary">Update</a>
</td>
</tr>
<!--<tr>
<td><br>
<a ng-click="viewtable()" class="btn btn-primary">View All</a>
</td>
</tr> -->
</table>
</div>
My controller:
var phonecatControllers = angular.module('phonecatControllers', ['templateservicemod', 'navigationservice','restservice']);
$scope.updatecust=function(id,name,city){
console.log("update is clicked");
$scope.user={id:id,uname:name,ucity:city};
RestService.update(id,name,city).success( RestService.vieww().success(viewdata));
};
REST API:
var restservice = angular.module('restservice', [])
.factory('RestService', function ($http) {
return{
update: function(id,name,city){
console.log(id+name+city);
return $http.get("http://localhost/code/index.php/demo/updatedemo?id="+id+"& uname="+name+"&ucity="+city,{});
}
}
});

RestService.update(id,name,city).success( RestService.vieww().success(viewdata));
this should be changed to
RestService.update(id,name,city).success(function(){
RestService.vieww().success(function(data){
$scope.viewdata = data.data;
}));
});
by considering that, you have RestService function vieww to get the data array.
and in your HTML, you need to do ngRepeat for viewdata to display the table.