I have a table with two column "user type" and "user Name" User type having a drop down selection So that i can select predefined user type and place a name in User name. There is a Add button on each click i am adding one another row.
I am doing one validation here So that user can't selected repeated "User type".
for example from row 1 is i select "value 1" from drop down. then from row 2 i should not be able to select same value. Anyway this validation works fine.
but there is one scenario if I add a duplicate row, then remove it right away, I am still unable to save because the validation error is still there.
here my jsp-
<div ng-class="{'col-sm-9'}" class="col-md-10">
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<th>user type</th>
<th>user Name</th>
<th></th>
</thead>
<tbody>
<tr ng-repeat="object in edituserConfig track by $index" ng-form="jobfileForm">
<td><select class="form-control" ng-model="object.key" required ng-change="reValidateJob()" name="jobFileKey" ng-init="object.form = jobfileForm">
<option style="display:none" value=""></option>
<option value="value1">value1t</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
<option value="value4">value4</option>
<option value="value5">value5</option>
</select></td>
<td><input type="text" class="form-control" name="jobFileName" ng-model="object.value" required/></td>
<td >
<button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="edituserConfig.splice($index,1)" ng-form="jobfileForm" title="Delete">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-primary btn-sm" ng-click="edituserConfig.push({'key':'','value':''})" title="Add Value">
<span class="glyphicon glyphicon-plus"></span> Add Value
</button>
</td>
</tr>
</tbody>
</table>
</div>
My controller-
$scope.reValidateJob = function(){
angular.forEach($scope.edituserConfig, function(fieldMapO) {
var count = 0;
angular.forEach($scope.edituserConfig, function(fieldMapI) {
if(fieldMapO.key == fieldMapI.key){
count ++;
}
});
if(count >1){
fieldMapO.form.jobFileKey.$setValidity("duplicate",false);
}else{
fieldMapO.form.jobFileKey.$setValidity("duplicate",true);
}
});
};
Please advise me on delete button do i need to vaidate all the row again? any good solution?
Well, I think following should work. If not, I'd request you to create a js-fiddle or plunker.
add reValidateJob to ng-click of the add button like below
<button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="edituserConfig.splice($index,1); reValidateJob();" ng-form="jobfileForm" title="Delete">
<span class="glyphicon glyphicon-remove"></span>
</button>
Hope this helps!
Related
I am trying to get id of a selected row in a table.
The rows are generated based on number of objects in foodList (JSP page).
JSP Code
<tbody>
<c:forEach items="${foodList}" var="det">
<tr class="clickable-row">
<td class="pt-0 pb-0"><button id="${det.b_No}" style="font-size:8px" class="btn btn-danger delete btn-sm pt-1 pb-1 mb-0" data-title="Delete"></button></td>
<td><input type="text" class="form-control" value="${det.wt}" /></td>
</c:forEach>
</tr>
</c:forEach>
</tbody>
JavaScript Code
$('#table_id').on('click', '.clickable-row', function(event) {
alert($(this).find(".pt-0").html());
alert($(this).find(".pt-0").attr("id"));
});
First alert is displaying the text as follows which is as expected,
<button id="1015" style="font-size:8px" class="btn btn-danger delete btn-sm pt-1 pb-1 mb-0" data-title="Delete"></button>
But for the second alert I am expecting the id (1015) but showing as "undefined".
the id is in button element so use :
alert($(this).find(".pt-0").find("button").attr("id"));
or simply direct access
alert($(this).find(".pt-0 button").attr("id"));
See below snippet :
$('#table').on('click', '.clickable-row', function(event) {
alert($(this).find(".pt-0").html());
alert($(this).find(".pt-0 button").attr("id"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr class="clickable-row">
<td class="pt-0 pb-0"><button id="1508" style="font-size:8px" class="btn btn-danger delete btn-sm pt-1 pb-1 mb-0" data-title="Delete">del</button></td>
</tr>
</table>
I'm currently using Meteor/Blaze framework to build a table. The row in the table will change according to the selected supplier. I have added class={{_id}} to the field and q.{{_id}} , lot.{{_id}} , and exp.{{_id}} to the quantity, lot , and expire date INPUT.
I'm trying to write a Submit Events to get these value and pass it to the Mongo Database. Please suggest a good way to loop through these rows to get the value.
Website Image
Part of the code
receiveForm template
<template name="receiveForm">
...
<select data-placeholder="Select an option" class="sel2js form-control select select-primary" id="supplier_sel" name="supplier">
{{#each suppliers}}
{{> sel_supplier}}
{{/each}}
</select>
</div>
<!-- Receive Lot Table -->
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Product Name</th>
<th>Current Quantity</th>
<th>Unit of Measurement</th>
<th>Receive Quantity</th>
<th>Lot No</th>
<th>Exp Date (DD/MM/YYYY)</th>
</tr>
</thead>
<tbody>
{{#each items}}
{{> receiveRow2}}
{{/each}}
</tbody>
</table>
<div class="text-center">
<button type="submit" class="btn btn-embossed btn-primary btn-wide" id="submitNewReceive" value="Submit">Submit</button>
<button type="reset" class="btn btn-embossed btn-warning btn-wide" value="Reset">Reset</button>
</div>
</form>
receiveRow2 template
<template name="receiveRow2">
<tr id="{{_id}}">
<td class="pn">{{name}}</td>
<td class="pq">{{totalQuantity}}</td>
<td>{{uomid.name}} ({{uomid.unit}} {{uomid.unitname}}/{{uomid.name}})</td>
<td><input type="text" class="form-control" name="q.{{_id}}" placeholder="Quantity" /></td>
<td><input type="text" class="form-control" name="lot.{{_id}}" placeholder="Lot No XX/YYYY" /></td>
<td>
<div class="input-group datetimepicker text-primary">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input class="set-due-date form-control" name="exp.{{_id}}" type="text" placeholder="วัน/เดือน/ปี"/>
<hr />
</div>
</td>
</tr>
</template>
JS
Template.receiveForm.events({
'submit form': function(event, template){
var supplierSelected = Template.instance().supplierSelected;
items = Products.find({suppliers: supplierSelected.get()});
event.preventDefault();
docdate = event.target.docdate.value;
supplier = event.target.supplier_sel.value;
console.log("---event---");
console.log(docdate)
console.log(supplier)
items.forEach(function(item){
????
})
}
})
In line 4 its missing a var before items, and also in line 6, 7.
After that I think you can loop on them.(But they will come from the DB).
BUT if you want to get the input values, why would you ask for a data in MongoDB?
Also I would prefer to get DB values as a promise.
var items = Promise.resolve(Products.find({suppliers: supplierSelected.get()});
and get back the items in this way:
items.then(function(item){console.log(item)})
hi guys i have a question, i need remove a td of table, the td has a id and i try with remove(), but doesnt work this is my code in js
$('.btnEliminarLicencia').off('click');
$('.btnEliminarLicencia').on('click', function () {
$(this).parent().parent().remove();
var rlim=$('.btnEliminarRemoto').parent().parent().remove('#idLicenciaClienteR');
alert (rlim);
});
and i have two tables, in the first with the btnEliminarLicencia click remove the tr of table and in the second table delete also the td what is the first td of table , this is the code, i need delete the first table and a specific td
first table
<table class="table table-bordered tabla_licencia">
<thead>
<tr>
<th>Sucursal</th>
<th>Codigo (ID cliente)</th>
<th>Licencia</th>
<th>Caducidad</th>
<th>Estado</th>
<th style="width: 15%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="318">13123</td>
<td id="id_Cliente">18865082</td>
<td>482947</td>
<td>2016-11-04</td>
<td>
<input type="checkbox" class="form-control" checked="" disabled="">
</td>
<td>
<button type="button" class="btn btn-info btnEditLicencia" style="float:right;">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-danger btnEliminarLicencia" style="float:left;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
</tbody>
second table
<table class="table table-bordered tabla_remoto">
<thead>
<tr>
<th>Licencia</th>
<th>Descripcion</th>
<th>Usuario</th>
<th>Clave</th>
<th style="width: 15%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td id="idLicenciaClienteR">18865082</td>
<td>Caja</td>
<td>883792</td>
<td>nim3</td>
<td>
<button type="button" class="btn btn-info btnEditRemoto" style="float:right;">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-danger btnEliminarRemoto" style="float:left;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
</tbody>
in this case delete <td id='idLicenciaClienteR'>189992887</td>
as might do it, thanks
This might help you,
$('.btnEliminarLicencia').on('click', function () {
$('td#idLicenciaClienteR').remove();
});
Since id is unique in a page, you can dirctly use the id, no need to find with .parents().
Try something like this:
$('table td#id_Cliente').remove();
you can also define the class by putting .yourClass behind table
I've created a simple table using Bootstrap and PHP which looks like this:
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Select</th>
</thead>
<tbody>
<tr id="RFIT1000">
<td>Penny Lane</td>
<td>10/03/2015</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
<button type="button" class="btn btn-danger btn-sm">No</button>
</td>
</tr>
<tr id="RFIT1001">
<td>Fred Kruger</td>
<td>18/01/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
<button type="button" class="btn btn-danger btn-sm">No</button>
</td>
</tr>
<tr id="RFIT1002">
<td>Bob Hope</td>
<td>09/08/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
<button type="button" class="btn btn-danger btn-sm">No</button>
</td>
</tr>
</tbody>
</table>
This is part of a form that will be submitted and I need to track which rows were selected Yes and which rows were selected No. I would also like to add a .success class to the table row when Yes is clicked (and remove a .danger class if previously present), and when No is clicked add a . danger class to the table row (and remove a . success class if previously present).
If the user clicks Yes I would like to track the id value for the Row in a variable/array somehow and the same for the No selections. If the user changes a selection it should also remove the value from the original variable/array - e.g. if they first clicked No and then they click Yes it should add the value to the 'Yes' variable/array list and remove it from the 'No" variable/array list.
I'm still learning HTML, Javascript and CSS as I'm going so not sure what the best approach here is and how to implement a system that tracks selections and makes those available as POST values to include in the form submission?
Try using this
var store={};
//store all values of succes fauilure in an object coresponding to the id
$("[id^=RFIT]").each(function(e,i){store[i.id]=$(i).hasClass('success')?'success':'danger'});
//on click update the closest tr class and store
$('button').click(function(){
if($(this).hasClass('btn-success')){
result='success';
}else{
result='danger';
}
$(this).closest('tr').attr('class',result);
store[ $(this).closest('tr').attr('id')]=result;
});
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Select</th>
</thead>
<tbody>
<tr id="RFIT1000">
<td>Penny Lane</td>
<td>10/03/2015</td>
<td colspan="2">
<label><input name="row1" id="row1Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row1" id="row1N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
<tr id="RFIT1001">
<td>Fred Kruger</td>
<td>18/01/2016</td>
<td colspan="2">
<label><input name="row2" id="row2Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row2" id="row2N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
<tr id="RFIT1002">
<td>Bob Hope</td>
<td>09/08/2016</td>
<td colspan="2">
<label><input name="row3" id="row3Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row3" id="row3N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
</tbody>
</table>
You can use radio button to get user response also you can provide id to those radio button to catch event in java script using that you can change classes of row at run time.
Hope it will help you, still if any doubt ask me I will provide java script code too.
I have used same name to radio buttons in one row as to read input in PHP and different id to handle different event in java script.
I have some HTML like so
<table class="table table-bordered table-hover" id="actionTable">
<thead>
<tr >
<th class="text-center">Action</th>
<th class="text-center">Responsibility</th>
<th class="text-center">Completion Date</th>
</tr>
</thead>
<tbody>
<tr id='actionRow'>
<td>
<input type="text" name='actionInput' placeholder='Action' class="form-control"/>
</td>
<td>
<select class="responsibility" name="responsibilityInput" id="responsibilityInput">
<option value="OptionOne">Option One</option>
<option value="OptionTwo">Option Two</option>
<option value="OptionThree">Option Three</option>
<option value="OptionFour">Option Four</option>
</select>
</td>
<td>
<input type="text" name='dateInput' placeholder='Completion Date' class="form-control"/>
</td>
</tr>
</tbody>
</table>
<a id="add_row" class="btn btn-default pull-right">Add Row</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
When the Add Row button is clicked, I need it to clone actionRow. I have this working to some point. This is my JSFiddle
As you can see, a row is successfully cloned. However, on cloned rows, the Select box no longer works. This is because I need to destroy the cloned select before I clone it. This answer here explains this problem better
Stack Overflow Answer
How could I apply this in my situation though? I am cloning the whole row, not a single select input? How can I clone the select seperately but still have it where I need it to be?
Any help appreciated.
Thanks