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">

Getting next element in a table javascript

https://jsfiddle.net/en6jh7pa/1/
I am having issues grabbing the next element, it is returning null for the next element.
I am passing "this? as onclick and I assumed that you could use this to grab the next element but it seems that it instead returns null
Thanks for your help
function assignnames(checkboxelement){
checkboxelement.setAttribute("name", "checkbox");
var value1box = checkboxelement.nextSibling;
value1box.setAttribute("name", "notnull");
var value2box = checkboxelement.nextElementSibling;
value2box.setAttribute("name", "notnull");
alert("done");
}
<table border="1">
<tr>
<th>
Checkbox
</th>
<th>
value1
</th>
<th>
value2
</th>
</tr>
<tr>
<td>
<input type="checkbox" onclick="assignnames(this)" id="checkbox1"/>
</td>
<td>
<input type="text" name="" id="fname1">
</td>
<td>
<input type="text" name="" id="lname1">
</td>
</tr>
</table>

If you want to get the text inputs in the same row, you can go up to the row, then use a selector to get the inputs, e.g.
function getParent(node, tag) {
var tag = tag.toLowerCase();
do {
if (node.tagName.toLowerCase() == tag) {
return node;
}
node = node.parentNode;
} while (node && node.tagName && node.parentNode)
return null;
}
function getInputs(evt) {
var row = getParent(this, 'tr');
var inputs;
if (row) {
inputs = row.querySelectorAll('input[type="text"]');
}
console.log(`Found ${inputs.length} text inputs, node is ${this.checked? '':'not '}checked.`);
}
window.onload = function(){
document.getElementById('checkbox1').addEventListener('click', getInputs, false);
};
<table border="1">
<tr><th>Checkbox
<th>value1
<th>value2
<tr><td><input type="checkbox" id="checkbox1">
<td><input type="text" name="" id="fname1">
<td><input type="text" name="" id="lname1">
</table>

For the inputs to be siblings, they would all have to be within the same <td>, sharing a singular parent. With them spread out across multiple table cells, they would be considered cousins instead (keeping with the family tree metaphor), which doesn't have a similar shortcut property.
You can still use nextElementSibling along the way between inputs, but you'll also have to move up and back down between generations.
function assignnames(checkboxelement){
checkboxelement.setAttribute("name", "checkbox");
var value1box = checkboxelement
.parentElement // up a generation the checkbox' parent <td>
.nextElementSibling // then to the next <td> in the row
.firstElementChild; // and back down a generation to the next input
// the last step could also be: .querySelector('input')
value1box.setAttribute("name", "notnull");
var value2box = value1box
.parentElement
.nextElementSibling
.firstElementChild;
value2box.setAttribute("name", "notnull");
alert("done");
}
<table border="1">
<tr>
<th>
Checkbox
</th>
<th>
value1
</th>
<th>
value2
</th>
</tr>
<tr>
<td>
<input type="checkbox" onclick="assignnames(this)" id="checkbox1"/>
</td>
<td>
<input type="text" name="" id="fname1">
</td>
<td>
<input type="text" name="" id="lname1">
</td>
</tr>
</table>

Want to add users to an array and display it dynamically in a table using angular and javascript

I'm a beginner at javascript and angularjs and was recently coding to display all the users in my array in a table and have them update dynamically as I add more users through a form... however when I run my code all I get is "Fill out the entire form!". I was hoping you guys could tell me what I am doing wrong (most importantly) and how I could fix it.
Thanks!
My HTML:
<table>
<tr>
<td colspan="5" class="align-center"><input type="text" placeholder="Search Users" class="search-users" ng-click="userSearch"/></td>
</tr>
<tr>
<td><input type="text" placeholder="First Name" class="add-user" id="formFirstName" /></td>
<td><input type="text" placeholder="Last Name" class="add-user" id="formLastName" /></td>
<td><input type="text" placeholder="Race" class="add-user" id="formRace" /> </td>
<td><input type="text" placeholder="Class" class="add-user" id="formClass" /></td>
<td><input type="text" placeholder="Faction" class="add-user" id="formFaction" /></td>
</tr>
<tr>
<td colspan="4" class="align-right error-field" id="errorField"></td>
<td colspan="1" class="align-right"><button type="button" class="add-user" ng-click="addUser()"/> Add </button></td>
</tr>
</table>
My Javascript/Angular:
$scope.jsFirstName = document.getElementById('formFirstName').value;
$scope.jsLastName = document.getElementById('formLastName').value;
$scope.jsRace = document.getElementById('formRace').value;
$scope.jsClass = document.getElementById('formClass').value;
$scope.jsFaction = document.getElementById('formFaction').value;
$scope.jsID = users.length;
$scope.addUser = function () {
$scope.character = {};
$scope.character.id = $scope.jsID+1;
$scope.character.firstName = $scope.jsFirstName;
$scope.character.lastName = $scope.jsLastName;
$scope.character.faction = $scope.jsFaction;
$scope.character.class = $scope.jsClass;
$scope.character.race = $scope.jsRace;
if ($scope.jsFirstName.length === 0 || $scope.jsLastName.length === 0 || $scope.jsFaction.length === 0 || $scope.jsClass.length === 0 || $scope.jsRace.length === 0) {
document.getElementById('errorField').innerHTML = "Fill out the entire form!";
} else {
users.push(character);
}
};
});

As you are using AngularJS, you should use ng-model directive to pass the data from the view to controller instead of doing it manually using Javascript. So, you should never use document.getElementById within a controller.
These changes you have to made in your code :
add ng-model directive in each input type.
pass all the form data inside an object using ng-model.
Ex :
<td><input type="text" placeholder="First Name" class="add-user" ng-model="user.formFirstName" id="formFirstName" /></td>
Here, I created user object and then we can pass this whole object using ng-click="addUser(user)".
Working demo :
var app = angular.module('myApp',[]);
app.controller('userController',function($scope) {
$scope.usersData = [];
$scope.addUser = function(user) {
$scope.usersData.push(user);
$scope.user = {};
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="userController">
<table>
<tr>
<td><input type="text" placeholder="First Name" class="add-user" ng-model="user.formFirstName" id="formFirstName" /></td>
<td><input type="text" placeholder="Last Name" class="add-user" ng-model="user.formLastName" id="formLastName" /></td>
<td><input type="text" placeholder="Race" class="add-user" ng-model="user.formRace" id="formRace" /> </td>
<td><input type="text" placeholder="Class" class="add-user" ng-model="user.formClass" id="formClass" /></td>
<td><input type="text" placeholder="Faction" class="add-user" ng-model="user.formFaction" id="formFaction" /></td>
</tr>
<tr>
<td colspan="1" class="align-right">
<input type="button" class="add-user" ng-click="addUser(user)" value="Add User"/>
</td>
</tr>
</table>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Race</td>
<td>Class</td>
<td>Faction</td>
</tr>
<tr ng-repeat="users in usersData">
<td>{{users.formFirstName}}</td>
<td>{{users.formLastName}}</td>
<td>{{users.formRace}}</td>
<td>{{users.formClass}}</td>
<td>{{users.formFaction}}</td>
</tr>
</table>
</div>

Since you use angular, you should not do what you do.
Let's take an exemple out of your code : FirstName :
<td><input type="text" id="formFirstName" ng-model="firstName" /></td>
<!-- Others like this -->
<td ng-bind="errorField"></td>
<!-- OR INSTEAD -->
<td>{{errorField}}</td>
Now you should have a controller, right ? So, in your controller, you can do this :
$scope.addUser = function() {
$scope.character = {};
$scope.character.firstName = $scope.firstName;
// Others like this
if($scope.firstName === "") { // More conditions
$scope.errorField="Please fill out the form";
}
}
This is why Angular has been made.

If you are using angular use 2 way data binding. Add ng-modal="fromFirstName" .... Etc to your inputs . In your controller set up local variable like var firstname = $scope.formFirstName . As it's 2 way data binding in real time you views and models are changed. When the user clicks the button you can check for emptiness. Hope this helps

Try using the bellow
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script>
var app = angular.module("myusersList", []);
app.controller("myCtrl", function($scope) {
$scope.users = [{fname:"sj",lname:"rao",class:"10"},{fname:"fvsdf",lname:"sdf",class:"1120"}];
$scope.addUser = function () {
var newUser = {};
newUser.fname=$scope.fname;
newUser.lname=$scope.lname;
newUser.class=$scope.class;
$scope.users.push(newUser);
}
});
</script>
<div ng-app="myusersList" ng-controller="myCtrl">
<ul>
<li ng-repeat="data in users">First Name : {{data.fname}} last Name : {{data.lname}} class : {{data.class}}</li>
</ul>
<input ng-model="fname">
<input ng-model="lname">
<input ng-model="class">
<button ng-click="addUser()">Add</button>
</div>
<p>Write in the input field to add users.</p>
</body>
</html>

angularjs data is not showing in table

I am creating a web app in which I am using angularjs for SQL connectivity.
I have two users (admin,Regional Partner Manager) data of admin is showing properly on my table but data of Regional Partner manager Is Not showing.
Here is my js file:
$scope.getsonvindata = function () {
$scope.loadimage = true;
$scope.names = '';
$scope.resetfilters();
//$scope.area = location;
// get sonvin data list and stored in sonvinrpm $scope variable
$http.get('/angularwebservice/frmcosonvinrpm4.asmx/frmsonvinrpm', {
params: {
log: log,
from: $scope.from,
to: $scope.to,
pm: pm
}
})
.then(function (response) {
$scope.sonvinrpm = response.data.procompanysonVin;
console.log($scope.sonvinrpm);
//pagination
$scope.totalItems = $scope.sonvinrpm.length;
$scope.numPerPage = 50000;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.sonvinrpm.indexOf(value);
return (begin <= index && index < end);
};
$scope.loadimage = false;
if ($scope.sonvinrpm == '') {
$scope.errormessage = 'Data Not Found... Please Select Correct Date Range';
}
else {
$scope.errormessage = '';
}
});
My table:
<table id="table" class="table table-bordered font" style="width: 110%;">
<thead>
<tr class="bg-primary">
<th>Edit</th>
<th>SrNo</th>
<th>Date</th>
<th>Hotel/School</th>
<th>Venue</th>
<th>Zone</th>
<th>Location</th>
<th>Start Time</th>
<th>Brand Name</th>
<th>Program</th>
<%--<th>Count</th>--%>
</tr>
</thead>
<tbody>
<tr class="bg-primary">
<td><i class="glyphicon glyphicon-filter"></i></td>
<td></td>
<%--<th>SonvinId</th>--%>
<td>
<div class="left-margin form-control-wrapper form-group has-feedback has-feedback">
<input type="text" class="date floating-label erp-input" ng-model="search.date" placeholder="Date">
</div>
</td>
<td>
<input type="text" ng-model="search.venuename" placeholder="Hotel/School" class="erp-input" /></td>
<td>
<input type="text" ng-model="search.venue" placeholder="Venue" class="erp-input" />
</td>
<%--<th>Day</th>--%>
<%--<th>Company</th>--%>
<td>
<input type="text" ng-model="search.zone" placeholder="Zone" class="erp-input" /></td>
<td>
<input type="text" ng-model="search.location" placeholder="Location" class="erp-input"></td>
<td>
<%--<div class="form-control-wrapper"> id="time"--%>
<input type="text" ng-model="search.starttime" class="floating-label erp-input" placeholder="Start Time">
<%--</div>--%>
</td>
<%-- <th>End</th>--%>
<%--<th>Hrs</th>--%>
<td>
<input type="text" ng-model="search.brand" placeholder="Brand Name" class="erp-input" /></td>
<td>
<input type="text" ng-model="search.program" placeholder="Program" class="erp-input" /></td>
</tr>
<%--| filter :{date: mddate,brand: mdbrand, zone: mdzone, location: mdlocation, starttime: mdstart,program: mdprogram,venuename: mdvenuename,venue: mdvenue }--%>
<tr ng-repeat="x in sonvinrpm | orderBy:predicate:reverse | filter:paginate| filter:search">
<td><button type="button" ng-click="getassigntrainerdata(x)" class="btn btn-sm btn-primary" data-controls-modal="modal-from-dom" data-backdrop="static" data-keyboard="true" data-toggle="modal" data-target="#assigntrainermodel"><i class="glyphicon glyphicon-pencil"></i></button></td>
<td>{{x.srno}}</td>
<%--<td>{{x.sonvinid}}</td>--%>
<td>{{x.date}}</td>
<td class="bg-success"><a ng-bind="x.venuename" ng-click="DetailsFunction(x)" class="erp-table-a" data-controls-modal="modal-from-dom" data-backdrop="static" data-keyboard="true" data-toggle="modal" data-target="#Detailsmodel"></a></td>
<td>{{x.venue}}</td>
<%-- <td>{{x.day}}</td>--%>
<%--<td>{{x.company}}</td>--%>
<td>{{x.zone}}</td>
<td>{{x.location}}</td>
<td>{{x.starttime}}</td>
<%--<td>{{x.endtime}}</td>--%>
<%--<td>{{x.hrs}}</td>--%>
<td>{{x.brand}}</td>
<td>{{x.program}}</td>
<%--<td>count</td>--%>
</tr>
<tr>
<td colspan="12"><pagination total-items="totalItems" ng-model="currentPage" max-size="5" boundary-links="true" items-per-page="numPerPage" class="pagination-sm"></pagination></td>
</tr>
</tbody>
</table>
and now the data I am getting from web service for my Regional Partner Manager:
{"procompanysonVin":[{"srno":1,"sonvinid":null,"id":3401,"date":"22-10-2016","day":"Sat ","company":24,"brand":"QED - TM","zone":"East","location":"Kolkata ","starttime":"10:00","endtime":"12:00","hrs":"02:00:00 ","program":"HBKBH","venuename":" NARAYANA SCHOOL","venue":" SITLA ASANSOL"},{"srno":2,"sonvinid":null,"id":3400,"date":"23-10-2016","day":"Sun ","company":24,"brand":"QED - TM","zone":"East","location":"Kolkata ","starttime":"10:00","endtime":"12:00","hrs":"02:00:00 ","program":"HBKBH","venuename":"NARAYANA SCHOOL","venue":" BENGAL AMBUJA HOUSING COMPLEX AMBUJA DURGAPUR WEST BENGAL"}]}
the data is coming in my webservice, what is wrong here?
NOTE: data of admin is printing on my table but not of regional partner manager

First thing is i was not able to find where are you calling $scope.getsonvindata function. You are just defining function but not calling anywhere in the code. like this
$scope.getsonvindata();
Second is you have applied filters wrongly.
Here is the proper way to set order by filter.
add scope
$scope.predicate = 'venue';
$scope.reverse = true;
then add to the ng-repeat
orderBy:predicate:reverse
Here is the working link
https://jsfiddle.net/U3pVM/27907/

In the .then(function () You have set
$scope.sonvinrpm = response.data.procompanysonVin;
But while setting data in the table you have set data model as search.zone, search.location, search.date etc.
Firstly you need to correct the key for data access.
Secondly the data which you are getting from the http request is an object which contains array.
So you need to use ng-repeat (or any other iterating logic) to traverse the data for displaying in the table.
Thirdly, sonvinrpm is an object, So you need to do null or undefined check
if ($scope.sonvinrpm == '') {
$scope.errormessage = 'Data Not Found... Please Select Correct Date Range';
}
should be replaced with
if (!$scope.sonvinrpm) {
$scope.errormessage = 'Data Not Found... Please Select Correct Date Range';
}

Selectpicker doesn't show inside a table column

I have a table of movies and I am using ng-repeat to display the rows. But each column shows the movie variable (like name, director, actor, year..) and one of then is the genre but the movie can have multiple genres. So, I am using a select to do this.
The problem is, my select just don't show up in the screen! I don't know if this is a angular problem or I am doing something wrong..
Here is my table:
<div class="container" style="margin-top: 30px; min-width: 90%" ng-controller="adminController">
<table class="table table-hover">
<thead>
<tr>
<th>
<h2>Filme</h2>
</th>
<th>
<h2>Ano</h2>
</th>
<th>
<h2>Diretor</h2>
</th>
<th>
<h2>Ator/Atriz</h2>
</th>
<th>
<h2>Pontuação</h2>
</th>
<th>
<h2>Generos</h2>
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" ng-model="novoFilme.nome" placeholder="Nome do filme"/></td>
<td><input class="form-control" ng-model="novoFilme.ano" placeholder="Ano do filme"/></td>
<td><input class="form-control" ng-model="novoFilme.diretor" placeholder="Diretor do filme"/></td>
<td><input class="form-control" ng-model="novoFilme.ator" placeholder="Ator/atriz do filme"/></td>
<td><input class="form-control" ng-model="novoFilme.pontuacao" placeholder="Pontuação do filme"/></td>
<td>
<select class="selectpicker" title="Nenhum selecionado" ng-model="novoFilme.generos" ng-options="genero.value as genero.nome for genero in generos" multiple>
</select>
</td>
<td style="text-align: right"><button class="btn btn-primary" ng-click="addFilme()">Adicionar Filme</button></td>
</tr>
<tr ng-repeat="filme in filmes">
<td><input class="form-control" ng-model="filme.nome"/></td>
<td><input class="form-control" ng-model="filme.ano"/></td>
<td><input class="form-control" ng-model="filme.diretor"/></td>
<td><input class="form-control" ng-model="filme.ator"/></td>
<td><input class="form-control" ng-model="filme.pontuacao"/></td>
<td>
<select class="selectpicker" title="Nenhum selecionado" ng-options="genero.value as genero.nome for genero in generos" multiple>
</select>
</td>
<td style="text-align: right"><button class="btn btn-danger" ng-click="remove(filme._id)">Remover</button></td>
</tr>
</tbody>
</table>
</div>
Here is my controller:
app.controller('adminController', function ($scope, $http) {
$scope.generos = [
{
nome: "Comédia",
value: "Comédia"
},
{
nome: "Comédia Romântica",
value: "Comédia Romântica"
},
{
nome: "Drama",
value: "Drama"
},
{
nome: "Ação",
value: "Ação"
},
{
nome: "Policial",
value: "Policial"
},
{
nome: "Suspense",
value: "Suspense"
},
{
nome: "Terror",
value: "Terror"
}
];
var atualizar = function () {
$http.get('/filmes').success(function (response) {
$scope.filmes = response;
$scope.novoFilme = "";
});
};
atualizar();
$scope.addFilme = function () {
$http.post('/filmes', $scope.novoFilme).success(function (response) {
atualizar();
});
};
$scope.remove = function (id) {
$http.delete('/filmes/' + id).success(function (response) {
atualizar();
});
};
$scope.save = function () {
for (i = 0; i < $scope.filmes.length; i++) {
$http.put('/filmes/' + $scope.filmes[i]._id, $scope.filmes[i]).success(function (response) {
atualizar();
});
}
};
});
Anyone knows how to fix it or any ideas how to do this in a different way?
Edit:
Here is the screen shot:
http://imgur.com/a/bXgBK

Well, ngOptions requires ngModel directive, so you have to use it in your <select> tag.
If you look at your console (pressing F12) you'll see this error:
Controller 'ngModel', required by directive 'ngOptions', can't be
found!
So, Instead of:
<select class="selectpicker" title="Nenhum selecionado"
ng-options="genero.value as genero.nome for genero in generos" multiple>
Use:
<select ng-model="genero" class="selectpicker" title="Nenhum selecionado"
ng-options="genero.value as genero.nome for genero in generos" multiple>
Tip: Always look at your console (F12) to see the errors when something went wrong.

I found that the problem is just the select class, in this case class="selectpicker", I don't know why this is causing issue, but if you remove this class will work fine.
Just to know, this class is a class from Silvio Moreto bootstrap select that you can find in the link below.
https://silviomoreto.github.io/bootstrap-select/