I need to add a delete (minus) button after adding a new row using plus button. I am providing my code below.
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<thead>
<tr>
<th>Day</th>
<th>Category</th>
<th>Sub Subcategory</th>
<th>Comments Or special promotion</th>
<th>Add More</th>
</tr>
</thead>
<tbody id="detailsstockid">
<tr ng-repeat="d in days">
<td>{{d.day_name}}</td>
<td>
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<select class="form-control" id="answer_{{$index}}_category" name="answer_{{$index}}_category" ng-model="answer.catagory" ng-options="cat.name for cat in listOfCatagory track by cat.value">
<option value="">Select Category</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<select class="form-control" id="answer_{{$index}}_subcategory" name="answer_{{$index}}_subcategory" ng-model="answer.subcatagory" ng-options="sub.name for sub in listOfSubCatagory[$parent.$index] track by sub.value">
<option value="">Select Subcategory</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<input type="text" id="answer_{{$index}}_comment" name="answer_{{$index}}_comment" placeholder="Add Comment" ng-model="answers.comment" class="form-control oditek-form">
</td>
</tr>
</tbody>
</table>
</td>
<td>
<input type="submit" name="plus" id="plus" value="+" style="width:20px; text-align:center;" ng-click="addNewRow(d.answers)">
</td>
</tr>
</tbody>
</table>
controller file is given below.
$scope.days=[];
$http({
method:'GET',
url:"php/customerInfo.php?action=day",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
//console.log('day',response.data);
angular.forEach(response.data,function(obj){
obj.answers = [];
$scope.addNewRow(obj.answers);
$scope.days.push(obj);
})
},function errorCallback(response) {
})
$scope.addNewRow = function(answers) {
answers.push({
category: null,
subcategory: null,
comment: null
});
};
Here I have one plus button when user is clicking on it a new row is adding. I need when a new row will add one delete (minus) button will create for previous one and plus button will remain with new one. When user will click on minus button the corresponding row will be deleted.
In your HTML file:
<button ng-click="removeRow($index)">
In your angular controller code:
$scope.removeRow = function(id) {
angular.forEach(answers, function(currentAnswer, index) {
if (currentAnswer.id === id) {
answers.splice(index, 1);
}
});
}
Note that answers needs to be accessible for this to work.
add html for remove button beside plus button like below:
<button type="button" ng-click="removeNewRow($index)" ng-show="$first && !$last">
and add a function in controller:
$scope.removeNewRow= function(index) {
$scope.d.answers.splice(index, 1);
}
Related
I have an ajax function that gets an array of data from the backend and when I try to append those data in the blade it only shows 1 row instead of an array of rows.
Issues
Only 1 row append by ajax
Select option will be empty when results return while I don't have any code to clear my select option.
Code
$(function() {
// get cities
$('#province').on('change', function(e) {
e.preventDefault();
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
});
var hospitalId = $(this).val();
$.ajax({
url: '{{ url('hospitals') }}/'+encodeURI(hospitalId),
dataType: "json",
type: 'GET',
success: function(data) {
console.log('dd: ', data.data);
if(data.data != null) {
$('.resError').hide();
$('.result').show();
// data to append
$.each(data.data, function(key, value) {
$('#code').html(value.code);
$('#name').html(value.name);
$('#type').html(value.type);
$('#class').html(value.class);
$('#beds').html(value.beds);
$('#owner').html(value.owner);
$('#province').html(value.province);
$('#city').html(value.city);
$('#address').html(value.address);
});
} else {
$('.resError').show();
$('.result').hide();
$('.resError').html('something went wrong, try again!');
}
},
error:function(err) {
$('.resError').show();
$('.resError').html('You need to select province!');
$('.result').hide();
$('#code').html('');
$('#name').html('');
$('#type').html('');
$('#class').html('');
$('#beds').html('');
$('#owner').html('');
$('#province').html('');
$('#city').html('');
$('#address').html('');
}
});
});
});
results
Update
<p>Results</p>
<div class="resError clearfix mt-4" style="display:none;"></div>
<div class="result clearfix mt-4" style="display:none;">
<table class="mb-3 table table-bordered table-hover">
<tbody>
<tr>
<th width="50">Code</th>
<td id="code"></td>
</tr>
<tr>
<th width="50">Name</th>
<td id="name"></td>
</tr>
<tr>
<th width="50">Type</th>
<td id="type"></td>
</tr>
<tr>
<th width="50">Class</th>
<td id="class"></td>
</tr>
<tr>
<th width="50">Beds</th>
<td id="beds"></td>
</tr>
<tr>
<th width="50">Owner</th>
<td id="owner"></td>
</tr>
<tr>
<th width="50">Province</th>
<td id="province"></td>
</tr>
<tr>
<th width="50">City</th>
<td id="city"></td>
</tr>
<tr>
<th width="50">Address</th>
<td id="address"></td>
</tr>
</tbody>
</table>
</div>
in blade
<p>Results</p>
<div class="resError clearfix mt-4" style="display:none;"></div>
<div class="result clearfix mt-4" style="display:none;">
<table class="mb-3 table table-bordered table-hover">
<tbody id="body">
</tbody>
</table>
</div>
in javascript
$.each(data.data, function(key, value) {
var element = `
<tr>
<th width="50">Code</th>
<td id="code">${value.code}</td>
</tr>
<tr>
<th width="50">Name</th>
<td id="name">${value.name}</td>
</tr>
<tr>
<th width="50">Type</th>
<td id="type">${value.type}</td>
</tr>
<tr>
<th width="50">Class</th>
<td id="class">${value.class}</td>
</tr>
<tr>
<th width="50">Beds</th>
<td id="beds">${value.beds}</td>
</tr>
<tr>
<th width="50">Owner</th>
<td id="owner">${value.owner}</td>
</tr>
<tr>
<th width="50">Province</th>
<td id="province">${value.province}</td>
</tr>
<tr>
<th width="50">City</th>
<td id="city">${value.city}</td>
</tr>
<tr>
<th width="50">Address</th>
<td id="address">${value.address}</td>
</tr>
`;
$('#body')append(element);
});
In your below code, you are appending value by the fieldId, that's why it is only appending only the last row(each iteration, the value is being updated in background) values are being set.
$('#code').html(value.code);
$('#name').html(value.name);
$('#type').html(value.type);
$('#class').html(value.class);
$('#beds').html(value.beds);
$('#owner').html(value.owner);
$('#province').html(value.province);
$('#city').html(value.city);
$('#address').html(value.address);
So, to achieve your purpose, you have to append these as a complete row and insert into the table, not just appending fieldwise value but rowwise and insert that row into the table. I hope you get my point.
The problem is that you are always changing the same elements of the same table. I think you will need to append one table per row:
$.each(data.data, function(key, value) {
$(".result").append('<table class="mb-3 table table-bordered table-hover">...</table>')
});
However, you may want to use Handlebars or some other templating library to avoid creating a long string with the table.
I have a problem with adding a button that will generate a PDF file for a specific table row. I can do this for whole table but not for a specific row.
My "Execute" view (create PDF file for entire table):
<div id="Grid">
<table class="table table-hover table-bordered" id="ExeTable">
<thead>
<tr>
<th class="text-center">Order nr</th>
<th class="text-center">Mat nr</th>
<th class="text-center">SAP nr</th>
<th class="text-center">Batch nr</th>
<th class="text-center">Tank</th>
</tr>
</thead>
<tbody id="myTable">
#foreach (var item in Model.ib)
{
<tr>
<td class="text-center">#item.OrderNr</td>
<td class="text-center">#item.MatNr</td>
<td class="text-center">#item.SapNr</td>
<td class="text-center">#item.BatchNr</td>
<td class="text-center">#item.TankName</td>
</tr>
}
</tbody>
</table>
</div>
#using (Html.BeginForm("Export", "Order", FormMethod.Post))
{
<input type="hidden" name="GridHtml" />
<input type="submit" id="btnSubmit" value="Export" />
}
<script>
$(function (print) {
$("#btnSubmit").click(function () {
$("input[name='GridHtml']").val($("#Grid").html());
});
});
</script>
But I want to have a new column in the table where there will be a button to generate a PDF for a specific row. I tried something but without success.
// I tried this
<table class="table table-hover table-bordered" id="ExeTable">
<thead>
<tr>
<th>Create PDF</th>
<th class="text-center">Order nr</th>
<th class="text-center">Mat nr</th>
<th class="text-center">SAP nr</th>
<th class="text-center">Batch nr</th>
<th class="text-center">Tank</th>
</tr>
</thead>
<tbody id="myTable">
#foreach (var item in Model.ib)
{
<tr>
<td class="text-center">
#using (Html.BeginForm("Export", "Order", FormMethod.Post))
{
<input type="hidden" name="GridHtml" />
<input type="submit" id="btnSubmit" value="Export" />
}
</td>
<td class="text-center">#item.OrderNr</td>
<td class="text-center">#item.MatNr</td>
<td class="text-center">#item.SapNr</td>
<td class="text-center">#item.BatchNr</td>
<td class="text-center">#item.TankName</td>
</tr>
}
</tbody>
</table>
My method that generete PDF file in "Order" controller:
[HttpPost]
[ValidateInput(false)]
public FileResult Export(string GridHtml)
{
using (MemoryStream stream = new System.IO.MemoryStream())
{
StringReader sr = new StringReader(GridHtml);
Document pdfDoc = new Document(PageSize.A4);
PdfWriter writer = PdfWriter.GetInstance(pdfDoc, stream);
pdfDoc.Open();
XMLWorkerHelper.GetInstance().ParseXHtml(writer, pdfDoc, sr);
pdfDoc.Close();
return File(stream.ToArray(), "application/pdf", "Grid.pdf");
}
}
Your initial example pulls the inner contents of the Grid element. There does not appear to be a surrounding identifiable element from which to pull the contents for a row. A simple fix would be to add an id to each row, change the button id to a class to add the eventlistener, and add a data- attribute to hold info on which row was clicked:
#foreach (var item in Model.ib)
{
<tr id="#item.OrdrNr">
<td class="text-center">
#using (Html.BeginForm("Export", "Order", FormMethod.Post))
{
<input type="hidden" name="GridHtml" />
<input type="submit" class="btnSubmit" data-row="##item.OrdeNr" value="Export" />
}
</td>
<td class="text-center">#item.OrderNr</td>
<td class="text-center">#item.MatNr</td>
<td class="text-center">#item.SapNr</td>
<td class="text-center">#item.BatchNr</td>
<td class="text-center">#item.TankName</td>
</tr>
}
And the JavaScript:
$(".btnSubmit").click(function (event) {
var target = $(event.currentTarget).data('row');
$("input[name='GridHtml']").val($(target).html());
});
What this will send to your Controller is just the contents of the clicked row:
<td class="text-center">
#using (Html.BeginForm("Export", "Order", FormMethod.Post))
{
<input type="hidden" name="GridHtml" />
<input type="submit" class="btnSubmit" data-row="##item.OrdeNr" value="Export" />
}
</td>
<td class="text-center">#item.OrderNr</td>
<td class="text-center">#item.MatNr</td>
<td class="text-center">#item.SapNr</td>
<td class="text-center">#item.BatchNr</td>
<td class="text-center">#item.TankName</td>
In the controller, you can remove the button, wrap that in the rest of your table tags, and then convert to PDF.
I have a list of users from a web api which i've supplied the user with a search box to filter to make searching easy.
On the top side of the table too i've provided the total number of users returned by the api.
What i have to do is when the user starts typing and results are being filtered, the total number of displayed should also be updated
<div class="col-sm-9">
<table width="100%" border="0" cellspacing="2" cellpadding="2" class="table">
<tr>
<td width="6%"><strong>Filter By</strong></td>
<td width="94%"> <select ng-model="queryBy">
<option value="$"></option>
<option value="Customer_Name">Name</option>
<option value="Address">Adddress</option>
<option value="Region">Region</option>
<option value="District">District</option>
</select> </td>
</tr>
<tr>
<td><strong>Search</strong></td>
<td> <div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search Customers" ng-model="query[queryBy]"/>
</div></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<img src="img/loader.gif" width="100" height="13" border="0" />
</div>
<table class="table table-striped table-hover">
<tr>
<td> </td>
<td> </td>
<td>Total Customers: {{users_list.length}}</td>
</tr>
<tr class="success">
<td><strong><a style="color: black; text-decoration: none" href="#/home" ng-click="clikme('Customer_Name')">Customer Name</a></strong></td>
<td><strong>Phone Number</strong></td>
<td><strong>Address</strong></td>
</tr>
<tr ng-repeat="item in users_list | filter: query ">
<td>{{item.Customer_Name}}</td>
<td>{{item.Phone_Number}}</td>
<td>{{item.Address}}</td>
</tr>
</table>
</div>
JS
.controller('app_users_ctrl',function($scope,$http,$location){
$scope.query = {};
$scope.queryBy = '$';
$http.post('http://websource.com/calls/app_users.php').success(function(data){
$scope.users_list=data
//console.log(JSON.stringify(data));
$scope.loading=false;
})
$scope.clikme= function(field){
$scope.myvar= order ? '-' + field : '+' + field;
order=!order;
}
})
Yo need to use lenght for the filtered result so try this.
change {{users_list.length}} for {{ (users_list | filter: query).length }}
I am trying to get row data from a table so I can use it in a modal. Below is my code for Views.
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link href="#Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#acctInfo").DataTable();
$(".td_0").hide();
});
</script>
<!-- Page Title
============================================= -->
<section id="page-title">
<div class="container clearfix">
<h1>View Accounts</h1>
</div>
</section><!-- #page-title end -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<table class="table table-striped table-condensed table-hover" id="acctInfo">
<thead>
<tr>
<th class="td_0">Account Id</th>
<th>Employee Id</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Business Name</th>
<th>Account Type</th>
<th></th>
#*<th></th>*#
</tr>
</thead>
<tbody>
#foreach (var i in Model.AccountsViews)
{
<tr id="rowx">
<td > #Html.DisplayFor(m => i.AcctId)</td>
<td > #Html.DisplayFor(m => i.EmployeeId)</td>
<td > #Html.DisplayFor(m => i.FirstName)</td>
<td > #Html.DisplayFor(m => i.MiddleName)</td>
<td > #Html.DisplayFor(m => i.LastName)</td>
<td > #Html.DisplayFor(m => i.BusinessName)</td>
<td > #Html.DisplayFor(m => i.AccountType)</td>
#*<td>Edit</td>
<td>Delete</td>*#
<td>
<input type="button" value="Edit" class="btn btn-success form-control" onclick="OpenSelected()" />
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</section>
<div id="divEdit" style="display: none;">
<input type="hidden" id="hidId"/>
<table>
<tr>
<td>Employee Id</td>
<td><input type="text" id="txtEmployeeId" class="form-control"/></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" id="txtFirstName" class="form-control"/></td>
</tr>
<tr>
<td>Middle Name</td>
<td><input type="text" id="txtMiddleName" class="form-control"/></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="txtLastName" class="form-control"/></td>
</tr>
<tr>
<td>Business Name</td>
<td><input type="text" id="txtBusinessName" class="form-control"/></td>
</tr>
#*<tr>
<td>Account Type</td>
<td>
#Html.DropDownListFor(o => )
</td>
</tr>*#
</table>
</div>
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
With that code, I am able to invoke the alert method with the following code:
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
but it has no value of the cell that I need. It only has "localhost/1234 Says: " the alert has no value. I need your help. Thank you.
Give a try to following code... .closset would give you the selected row and than you find columns value on the base of indexes.
<script>
$('.btn-success').click(function () {
var a = $(this).closest("tr").find('td:eq(0)').text();
var b = $(this).closest("tr").find('td:eq(1)').text();
alert(a);
});
</script>
Try using :eq() selector at this context
You should use .text() instead to retrieve its text content,
var t = $('#table');
var val1 = $(t).find('tr:eq(2) td:eq(4)').text();
alert(val1);
Or do,
alert($('#table tr:eq(2) td:eq(4)').text());
DEMO
I have a problem in JavaScript to repeat a same tr after,when i click the td elements.
My html code bellow:
<table id="tabl2" class="table time-table table-bordered table-striped budrow">
<thead>
<tr>
<th class="cal-head">Rates</th>
<th class="cal-head">Start date</th>
<th class="cal-head">End date</th>
</tr>
</thead>
<tr>
<td>
<input type="number" readonly placeholder="Rates">
</td>
<td>
<input type="text" readonly id="start" placeholder="Start date">
</td>
<td>
<input type="text" class="datepicker" name="enddate" placeholder="End date">
</td>
</tr>
I tried with this js but failed:
$('.budrow').click(function(){
$(this).find('tr').append('<tr> <td></td> <td></td> <td></td> </tr>');
});
Please help me.
Try to use:
var $table = $('#tabl2');
$table.click(function(e){
var $tr = $(e.target).closest('tr');
if (($tr.parent().prop("tagName") != 'THEAD') && $tr.is(":last-child"))
$tr.after($tr.clone());
});
JSFiddle.
Bind the click event to the clicked element, select the current row using closest() and then append the new row using after() function:
$('.btn').on('click', function() {
var that = $(this);
var newRow = '<tr><td colspan="3">This is a new row</td></tr>';
that.closest('tr').after(newRow);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<button class="btn">click</button>
</td>
<td>
<button class="btn">click</button>
</td>
<td>
<button class="btn">click</button>
</td>
</tr>
</tbody>
</table>
You can clone and add the new row, also it will be better to use a add button separately
<button class="budrow">Add</button>
<table id="tabl2" class="table time-table table-bordered table-striped budrow">
<thead>
<tr>
<th class="cal-head">Rates</th>
<th class="cal-head">Start date</th>
<th class="cal-head">End date</th>
</tr>
</thead>
<tr>
<td>
<input type="number" readonly placeholder="Rates" />
</td>
<td>
<input type="text" readonly id="start" placeholder="Start date" />
</td>
<td>
<input type="text" class="datepicker" name="enddate" placeholder="End date" />
</td>
</tr>
</table>
then
jQuery(function ($) {
var $tr = $('#tabl2 tbody tr').eq(0);
$('button.budrow').click(function () {
var $clone = $tr.clone();
$('#tabl2').append($clone);
$clone.find('.datepicker').removeClass('hasDatepicker').datepicker();
});
$('.datepicker').datepicker();
});
Demo: Fiddle
$('.budrow tbody input').click(function(e){
makeClone(e);
});
function makeClone(e){
var newClone = $(e.target).closest("tr").clone();
$("#tabl2 tbody").append(newClone);
$(newClone).click(function(ev){
makeClone(ev);
})
}