I am trying to dynamically add a new product each time an option from a drop down menu is chosen. However I believe my id field is preventing me from creating new data on my added rows. I can only change the first row. How to adjust my script to create ne id values on each function call. I tried using the Date.Now field.....but no luck.
This is how the form looks
Drop down menu
Added two more products but cant get the values of the Description, Price, etc
#page
#using Newtonsoft.Json
#model DotComFinal.Pages.Quotations.CreateModel
#{
ViewData["Title"] = "Create";
}
<h1>Create Quotation</h1>
<hr />
<div>
Customer Info
<form method="post d-flex">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Quotation.Customer.FirstName" class="control-label"></label>
<input asp-for="Quotation.Customer.FirstName" class="form-control w-50" asp-items="ViewBag.CustomerID"></input>
</div>
<div class="form-group">
<label asp-for="Quotation.Customer.LastName" class="control-label"></label>
<input asp-for="Quotation.Customer.LastName" class="form-control w-50" asp-items="ViewBag.CustomerID"></input>
</div>
<div class="form-group ">
<label asp-for="Quotation.Customer.Email" class="control-label"></label>
<input asp-for="Quotation.Customer.Email" class="form-control w-50" asp-items="ViewBag.CustomerID"></input>
</div>
<div class="form-group w-100">
<label asp-for="Quotation.QuotDate" class="control-label"></label>
<input asp-for="Quotation.QuotDate" class="form-control w-50" />
<span asp-validation-for="Quotation.QuotDate" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Quotation.ValidUntil" class="control-label"></label>
<input asp-for="Quotation.ValidUntil" class="form-control w-50" />
<span asp-validation-for="Quotation.ValidUntil" class="text-danger"></span>
</div>
<div class=" w-50">
<label class="control-label">Select a Product</label>
<table id="product-select" class=" table table-striped table-sm w-100">
<thead>
<tr>
<th>
<label asp-for="Product[0].Name"></label>
</th>
<th>
<label asp-for="Product[0].Description"></label>
</th>
<th>
<label asp-for="Product[0].Quantity"></label>
</th>
<th>
<label asp-for="Product[0].UnitPrice"></label>
</th>
<th>
<label asp-for="Product[0].Discount"></label>
</th>
<th>
<label asp-for="Product[0].Vat"> </label>
</th>
<th>
<label asp-for="Product[0].NetTotal"></label>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="btn btn-success " id="productOptions" onchange="changeDropDownValue()">
#* <option value="">Product</option>*#
#foreach (var product in Model.Product)
{
<option value="#product.ID">#product.Name</option>
}
</select>
</td>
<td>
<input asp-for="Product[0].Description" id="test" disabled />
<span asp-validation-for="Product[0].Description" class="text-danger"></span>
</td>
<td>
<input asp-for="Product[0].Quantity" />
<span asp-validation-for="Product[0].Quantity" class="text-danger"></span>
</td>
<td>
<input asp-for="Product[0].UnitPrice" disabled />
<span asp-validation-for="Product[0].UnitPrice" class="text-danger"></span>
</td>
<td>
<input asp-for="Product[0].Discount" />
<span asp-validation-for="Product[0].Discount" class="text-danger"></span>
</td>
<td>
<input asp-for="Product[0].Vat" disabled />
<span asp-validation-for="Product[0].Vat" class="text-danger"></span>
</td>
<td>
<input asp-for="Product[0].NetTotal" disabled />
<span asp-validation-for="Product[0].NetTotal" class="text-danger"></span>
</td>
<ttd>
</ttd>
</tr>
</tbody>
</table>
#* <button onclick="AddItem(this)" id="btnadd" type="button" class=" btn btn-sm btn-outline-success m-auto visible">Add Product</button>
<button id="btnremove" type="button" class="m-2 btn btn-sm btn-danger invisible">Delete</button>*#
</div>
<button onclick="AddItem(this)" id="btnadd" type="button" class=" btn btn-sm btn-outline-success w-100 visible">Add Product</button>
<button onclick="DeleteItem(this)" id="btnremove" type="button" class="m-2 btn btn-sm btn-danger visible">Delete</button>
<div>
<input type="submit" value="Create Quotation" class="btn btn-primary mt-3" />
<a asp-page="Index">Back to List</a>
</div>
<div>
</div>
<div class="d-flex gap-lg-5 ">
<div class="form-group">
<label asp-for="Quotation.StaffID" class="control-label"></label>
#* <select asp-for="Quotation.StaffID" class="form-control" asp-items="#Model.CompanyStaffNameSL"><option value="">-- Select Major --</option></select>
*# </div>
<div class="form-group">
<label asp-for="Quotation.FinalTotal" class="control-label"></label>
<input asp-for="Quotation.FinalTotal" class="form-control" />
<span asp-validation-for="Quotation.FinalTotal" class="text-danger"></span>
</div>
</div>
</form>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");};
}
<script type="text/javascript">
function AddItem(btn){
var product = document.getElementById("product-select");
var rows = product.getElementsByTagName("tr");
var rowOuterHtml = rows[rows.length-1].outerHTML;
var newRow = product.insertRow();
newRow.innerHTML=rowOuterHtml;
function DeleteItem(btn){
var product = document.getElementById("product-select");
var rows = product.getElementsByTagName("tr");
$(btn).closet("tr").remove;
}
}
</script>
<script>
alert("test")
function changeDropDownValue() {
var selectedProductId = document.getElementById("productOptions").value;
var Products = #Html.Raw(JsonConvert.DeserializeObject(JsonConvert.SerializeObject(#Model.Product)));
// Find the product with the matching ID in the Model.Product array
var selectedProduct = Products.find(product => product.ID == selectedProductId);
var newId = "product-" + Date.now();
// Update the input fields with the values of the selected product
document.getElementById("test").value = selectedProduct.Description;
document.getElementsByName("Product[0].Quantity")[0].value = selectedProduct.Quantity;
document.getElementsByName("Product[0].UnitPrice")[0].value = selectedProduct.UnitPrice;
document.getElementsByName("Product[0].Discount")[0].value = selectedProduct.Discount;
document.getElementsByName("Product[0].Vat")[0].value = selectedProduct.Vat;
document.getElementsByName("Product[0].NetTotal")[0].value = selectedProduct.NetTotal;
}
</script>
Firstly,id should be unique,so you need to change the ids when inserting a new row.Then when selcted option is changed,you need to tell the js which row you are changing,so you need to tell the index,here is a demo:
html of select(pass the select element to js,and add the current index into id):
<select class="btn btn-success " id="productOptions_0" onchange="changeDropDownValue(this)">
#* <option value="">Product</option>*#
#foreach (var product in Model.Product)
{
<option value="#product.ID">#product.Name</option>
}
</select>
description input(remove the id so that it will be unique when adding new rows):
js:
function AddItem(btn){
var product = document.getElementById("product-select");
var rows = product.getElementsByTagName("tr");
var rowOuterHtml = rows[1].outerHTML;
var index=rows.length-1;//index of the new row
var newRow = product.insertRow();
newRow.innerHTML=rowOuterHtml.replaceAll("[0","["+index).replaceAll("_0","_"+index);//set ids and names of the new row with index
}
function DeleteItem(btn){
var product = document.getElementById("product-select");
var rows = product.getElementsByTagName("tr");
$(btn).closet("tr").remove;
}
function changeDropDownValue() {
var selectedProductId = document.getElementById("productOptions").value;
var Products = #Html.Raw(JsonConvert.DeserializeObject(JsonConvert.SerializeObject(#Model.Product)));
// Find the product with the matching ID in the Model.Product array
var selectedProduct = Products.find(product => product.ID == selectedProductId);
var index=$(test).attr("id").split("_")[1];//find the index with id
// Update the input fields with the values of the selected product
document.getElementsByName("Product[" + index + "].Description")[0].value = selectedProduct.Description;
document.getElementsByName("Product[" + index + "].Quantity")[0].value = selectedProduct.Quantity;
document.getElementsByName("Product[" + index + "].UnitPrice")[0].value = selectedProduct.UnitPrice;
document.getElementsByName("Product[" + index + "].Discount")[0].value = selectedProduct.Discount;
document.getElementsByName("Product[" + index + "].Vat")[0].value = selectedProduct.Vat;
document.getElementsByName("Product[" + index + "].NetTotal")[0].value = selectedProduct.NetTotal;
}
$('#btnAddPhysicians').click(function () {
var rowCount;
rowCount = $('#gvPhysicians tr').length;
if ($('#txtDoctorName').val() != '' && $('#gvPhysicians').length > 1) {
$('#gvPhysicians').after('<tr><td>' + rowCount + '</td>' +
'<td>' + $('#txtDoctorName').val() + '</td>' +
'<td>' + $('#txtSpecialty').val() + '</td>');
$('#divContainer').find('input:text').each(function () {
$('input:text[id=' + $(this).attr('id') + ']').val('');
}
);
}
else alert('Invalid!');
});
now I write this function in jquery but its always executing else statement "Invalid"
code for html textboxes and gridview is below
<div class="form-group">
<div class="tab-custom-content">
<label for="menu_name">Please list ALL active treating physicians (i.e. pulmonologist, oncologist, internist, cardiologist, etc)</label>
</div>
<div class=" row">
<div class="col-sm-4">
<label for="menu_name">Doctor’s Name</label>
<input type="text" class="form-control" id="txtDoctorName" name="txtDoctorName">
</div>
<div class="col-sm-4">
<label for="menu_name">Specialty</label>
<input type="text" class="form-control" id="txtSpecialty" name="txtSpecialty">
</div>
<div class="col-sm-4">
<br />
<button type="submit" id="btnAddPhysicians" class="btn btn-outline-primary">ADD</button>
</div>
</div>
<div class=" row">
<section class="content">
<div class="card">
<div class="card-header">
</div>
<!-- /.card-header -->
<div class="card-body">
<div id="gvPhysicians" class="jsgrid" style="position: relative; height: 100%; width: 200%;">
<div class="jsgrid-grid-header jsgrid-header-scrollbar">
<table class="jsgrid-table">
<tr class="jsgrid-header-row">
<th class="jsgrid-header-cell jsgrid-header-sortable" style="width: 400px;">Doctor's Name</th>
<th class="jsgrid-header-cell jsgrid-align-right jsgrid-header-sortable" style="width: 250px;">Specialty</th>
</tr>
</table>
</div>
<!-- /.card-body -->
<!-- /.card -->
</div>
</div>
</div>
</section>
</div>
<div class=" row">
<button type="submit" id="btnNext1" class="btn btn-outline-primary">Next</button>
</div>
</div>
I want to show txtDoctorName value and txtSpecialty to gridview column on click of btnAddPhysicians.I am doind this in MVC 5 and using jquery for this.
I just added Length >== 1 because it returned Length = 1 each time.
I have the dynamic data table, its all working perfectly but im facing small problem that is, First row is working properly and it is stable, the Second row "NARRATION" column, is only the problem.
That means Second row narration column having input popup text editor, thats fine its working, now i click ADD NEW button another row will come and click narrate column its again show the popup text editor.. i dont want like that..
I want change the input modal text editor to normal input box. thats appear on dynamically added rows when i click add new button.
Want 1st two rows is should want popup text editor, and dynamic added rows only wants to be input boxes..
Full Code FIDDLE
/* TABLE JS */
$(document).ready(function() {
$("#add_row").on("click", function() {
// Dynamic Rows Code
// Get max row id and set new id
var newid = 0;
$.each($("#tab_logic tr"), function() {
if (parseInt($(this).data("id")) > newid) {
newid = parseInt($(this).data("id"));
}
});
newid++;
var tr = $("<tr></tr>", {
id: "addr" + newid,
"data-id": newid
});
// loop through each td and create new elements with name of newid
$.each($("#tab_logic tbody tr:nth(1) td"), function() {
var td;
var cur_td = $(this);
var children = cur_td.children();
// add new td and element if it has a nane
if ($(this).data("name") !== undefined) {
td = $("<td></td>", {
"data-name": $(cur_td).data("name")
});
var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
c.attr("name", $(cur_td).data("name") + newid);
c.appendTo($(td));
td.appendTo($(tr));
} else {
td = $("<td></td>", {
'text': $('#tab_logic tr').length
}).appendTo($(tr));
}
});
// add the new row
$(tr).appendTo($('#tab_logic'));
$(tr).find("td button.row-remove").on("click", function() {
$(this).closest("tr").remove();
});
});
// Sortable Code
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
return $helper;
};
$(".table-sortable tbody").sortable({
helper: fixHelperModified
}).disableSelection();
$(".table-sortable thead").disableSelection();
$("#add_row").trigger("click");
});
/* POPUP JS */
$('.cashmodal_btn').on('click', function() {
let val = $('.myInput').val();
$('#pay_narrat').val(val);
});
$('.cashmodal_btn').on('click', function() {
let val = $('.acnarrate').val();
$('#acc_narrat').val(val);
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- table -->
<a id="add_row" class="btn btn-primary float-right adRow">Add New</a>
<div class="col-md-12 table-responsive">
<table class="table table-bordered table-hover table-sortable" id="tab_logic">
<thead style="background-color: #680779;
color: #fff;">
<tr>
<th class="text-center">
Account Code
</th>
<th class="text-center">
A/c Name*
</th>
<th class="text-center">
Narration*
</th>
<th class="text-center">
Debit*
</th>
<th class="text-center">
Credit
</th>
<th class="text-center" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;">
Action
</th>
</tr>
</thead>
<tbody>
<tr id="fst_row">
<td>
<input type="number" id="payacc_code" placeholder='Enter A/c code' class="form-control" />
</td>
<td>
<select class="form-control" id="payacc">
<option value="">Select TDS A/c name</option>
<option value="1">JOE</option>
<option value="2">JOE 2</option>
<option value="3">JOE 3</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="pay_narrat" placeholder="Enter your here" data-toggle="modal" data-target="#narratModal" />
</td>
<td>
<input type="number" id="paydeb" value="100" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly />
</td>
<td>
<input type="number" id="paycredit" placeholder='Credit Amount' class="form-control" readonly />
</td>
<td>
<button class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn' style="cursor: not-allowed" disabled><span aria-hidden="true">×</span></button>
</td>
</tr>
<tr id='addr0' class="hidden">
<td data-name="cashCode">
<input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" />
</td>
<td data-name="sel">
<select class="form-control" name="cashacc_sel" id="cashacc_sel">
<option value="">Select A/c name</option>
<option value="1">Plumz</option>
<option value="2">Plumz 2</option>
<option value="3">Plumz 3</option>
</select>
</td>
<td data-name="narrate">
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter your here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td data-name="dbt">
<input type="number" id="cashdeb" name='cashdeb' placeholder='Debit Amount' data-action="sumDebit" class="form-control" />
</td>
<td data-name="crdit">
<input type="number" id="cashcredit" name='cashcredit' placeholder='Credit Amount' class="form-control" readonly />
</td>
<td data-name="del">
<button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn'><span aria-hidden="true">×</span></button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- narration text popup modal -->
<div class="modal fade" id="narratModal" tabindex="-1" role="dialog" aria-labelledby="narratModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title modal_head" id="narratModalLabel">Narration</h4>
</div>
<div class="modal-body">
<label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>
<input class="myInput form-control form-control-sm" style="height: 7em;" placeholder="Enter Here" />
<span class="modal_valid">0/200 Characterts entered</span>
</div>
<div class="modal-footer narr_footer">
<button type="button" class="btn btn-primary cashmodal_btn" id="narrat_ok" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="accnarratModal" tabindex="-1" role="dialog" aria-labelledby="accnarratModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title modal_head" id="accnarratModalLabel">Narration</h4>
</div>
<div class="modal-body">
<label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>
<textarea class="acnarrate form-control form-control-sm" style="height: 7em;" placeholder="Enter Here"></textarea>
<span class="modal_valid">0/200 Characterts entered</span>
</div>
<div class="modal-footer narr_footer">
<button type="button" class="btn btn-primary cashmodal_btn" id="accnarrat_ok" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
Full code FIDDLE
I dont know my question is understandable or not..
I got your problem. Check this code:
Update JS:
/* TABLE JS */
$(document).ready(function() {
$("#add_row").on("click", function() {
// Dynamic Rows Code
// Get max row id and set new id
var newid = 0;
$.each($("#tab_logic tr"), function() {
if (parseInt($(this).data("id")) > newid) {
newid = parseInt($(this).data("id"));
}
});
newid++;
var tr = $("<tr></tr>", {
id: "addr" + newid,
"data-id": newid
});
// loop through each td and create new elements with name of newid
$.each($("#tab_logic tbody tr:nth(1) td"), function() {
var td;
var cur_td = $(this);
var children = cur_td.children();
// add new td and element if it has a nane
if ($(this).data("name") !== undefined) {
td = $("<td></td>", {
"data-name": $(cur_td).data("name")
});
var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
c.attr("name", $(cur_td).data("name") + newid);
c.appendTo($(td));
td.appendTo($(tr));
} else {
td = $("<td></td>", {
'text': $('#tab_logic tr').length
}).appendTo($(tr));
}
});
// add the new row
$(tr).appendTo($('#tab_logic'));
$(tr).find("td button.row-remove").on("click", function() {
$(this).closest("tr").remove();
});
});
// Sortable Code
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
return $helper;
};
$(".table-sortable tbody").sortable({
helper: fixHelperModified
}).disableSelection();
$(".table-sortable thead").disableSelection();
$("#add_row").trigger("click");
});
/* POPUP JS */
$('.cashmodal_btn').on('click', function() {
let val = $('.myInput').val();
$('#pay_narrat').val(val);
});
$('.cashmodal_btn').on('click', function() {
let val = $('.acnarrate').val();
$(".acnarrate").val("");
$('.active').val(val);
$(".active").removeClass("active");
})
$(document).on('click',"input#acc_narrat", function() {
$(".active").removeClass("active");
$(".acnarrate").val( $(this).val() );
$(this).addClass("active");
})
Hi I understand your problem I updated your fiddle .
you just need to remove data-toggle & data-target property from newly created row. because you are cloning so each function with elements are cloning.
$("#"+trId +" #acc_narrat").removeAttr("data-target")
$("#"+trId +" #acc_narrat").removeAttr("data-toggle")
Here is working example
You are cloning row and changing ids but you need to remove data-target="#narratModal" from the input box so that modal will not be shown.
Just find the input box and remove data-target="#narratModal" attribute, see below code
/* TABLE JS */
$(document).ready(function() {
$("#add_row").on("click", function() {
// Dynamic Rows Code
// Get max row id and set new id
var newid = 0;
$.each($("#tab_logic tr"), function() {
if (parseInt($(this).data("id")) > newid) {
newid = parseInt($(this).data("id"));
}
});
newid++;
var tr = $("<tr></tr>", {
id: "addr" + newid,
"data-id": newid
});
// loop through each td and create new elements with name of newid
$.each($("#tab_logic tbody tr:nth(1) td"), function() {
var td;
var cur_td = $(this);
var children = cur_td.children();
// add new td and element if it has a nane
if ($(this).data("name") !== undefined) {
td = $("<td></td>", {
"data-name": $(cur_td).data("name")
});
var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
c.attr("name", $(cur_td).data("name") + newid);
c.appendTo($(td));
td.appendTo($(tr));
} else {
td = $("<td></td>", {
'text': $('#tab_logic tr').length
}).appendTo($(tr));
}
});
// add the new row
$(tr).appendTo($('#tab_logic'));
$(tr).find("td button.row-remove").on("click", function() {
$(this).closest("tr").remove();
});
// remove data-target so that popup will not be shown
$(tr).find('input[name^=narrat]').removeAttr('data-target');
});
// Sortable Code
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
return $helper;
};
$(".table-sortable tbody").sortable({
helper: fixHelperModified
}).disableSelection();
$(".table-sortable thead").disableSelection();
$("#add_row").trigger("click");
});
/* POPUP JS */
$('.cashmodal_btn').on('click', function() {
let val = $('.myInput').val();
$('#pay_narrat').val(val);
});
$('.cashmodal_btn').on('click', function() {
let val = $('.acnarrate').val();
$('#acc_narrat').val(val);
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- table -->
<a id="add_row" class="btn btn-primary float-right adRow">Add New</a>
<div class="col-md-12 table-responsive">
<table class="table table-bordered table-hover table-sortable" id="tab_logic">
<thead style="background-color: #680779;
color: #fff;">
<tr>
<th class="text-center">
Account Code
</th>
<th class="text-center">
A/c Name*
</th>
<th class="text-center">
Narration*
</th>
<th class="text-center">
Debit*
</th>
<th class="text-center">
Credit
</th>
<th class="text-center" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;">
Action
</th>
</tr>
</thead>
<tbody>
<tr id="fst_row">
<td>
<input type="number" id="payacc_code" placeholder='Enter A/c code' class="form-control" />
</td>
<td>
<select class="form-control" id="payacc">
<option value="">Select TDS A/c name</option>
<option value="1">JOE</option>
<option value="2">JOE 2</option>
<option value="3">JOE 3</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="pay_narrat" placeholder="Enter your here" data-toggle="modal" data-target="#narratModal" />
</td>
<td>
<input type="number" id="paydeb" value="100" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly />
</td>
<td>
<input type="number" id="paycredit" placeholder='Credit Amount' class="form-control" readonly />
</td>
<td>
<button class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn' style="cursor: not-allowed" disabled><span aria-hidden="true">×</span></button>
</td>
</tr>
<tr id='addr0' class="hidden">
<td data-name="cashCode">
<input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" />
</td>
<td data-name="sel">
<select class="form-control" name="cashacc_sel" id="cashacc_sel">
<option value="">Select A/c name</option>
<option value="1">Plumz</option>
<option value="2">Plumz 2</option>
<option value="3">Plumz 3</option>
</select>
</td>
<td data-name="narrate">
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter your here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td data-name="dbt">
<input type="number" id="cashdeb" name='cashdeb' placeholder='Debit Amount' data-action="sumDebit" class="form-control" />
</td>
<td data-name="crdit">
<input type="number" id="cashcredit" name='cashcredit' placeholder='Credit Amount' class="form-control" readonly />
</td>
<td data-name="del">
<button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn'><span aria-hidden="true">×</span></button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- narration text popup modal -->
<div class="modal fade" id="narratModal" tabindex="-1" role="dialog" aria-labelledby="narratModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title modal_head" id="narratModalLabel">Narration</h4>
</div>
<div class="modal-body">
<label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>
<input class="myInput form-control form-control-sm" style="height: 7em;" placeholder="Enter Here" />
<span class="modal_valid">0/200 Characterts entered</span>
</div>
<div class="modal-footer narr_footer">
<button type="button" class="btn btn-primary cashmodal_btn" id="narrat_ok" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="accnarratModal" tabindex="-1" role="dialog" aria-labelledby="accnarratModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title modal_head" id="accnarratModalLabel">Narration</h4>
</div>
<div class="modal-body">
<label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>
<textarea class="acnarrate form-control form-control-sm" style="height: 7em;" placeholder="Enter Here"></textarea>
<span class="modal_valid">0/200 Characterts entered</span>
</div>
<div class="modal-footer narr_footer">
<button type="button" class="btn btn-primary cashmodal_btn" id="accnarrat_ok" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
You just have to properly clone your tds and remove the data-target property from the input field.
Here is the update I made to your element loop.
// loop through each td and create new elements with name of newid
$.each($("#tab_logic tbody tr:nth(1) td"), function() {
var td;
var cur_td = $(this).clone(); // <-- clone the td
var children = cur_td.children();
$(cur_td).find('#acc_narrat').removeAttr('data-toggle'); // <--- remove the attribute
// add new td and element if it has a nane
if ($(this).data("name") !== undefined) {
td = $("<td></td>", {
"data-name": $(cur_td).data("name")
});
var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
c.attr("name", $(cur_td).data("name") + newid);
c.appendTo($(td));
td.appendTo($(tr));
} else {
td = $("<td></td>", {
'text': $('#tab_logic tr').length
}).appendTo($(tr));
}
});
In short, You have to clone var cur_td = $(this).clone(); the columns in order to loose the reference to your existing element.
And remove the relation to the modal from the element. $(cur_td).find('#acc_narrat').removeAttr('data-toggle');
I've updated your fiddle here.
Remove attribute data-toggle from TD before appending to $('#tab_logic')
/* TABLE JS */
$(document).ready(function() {
$("#add_row").on("click", function() {
// Dynamic Rows Code
// Get max row id and set new id
var newid = 0;
$.each($("#tab_logic tr"), function() {
if (parseInt($(this).data("id")) > newid) {
newid = parseInt($(this).data("id"));
}
});
newid++;
var tr = $("<tr></tr>", {
id: "addr" + newid,
"data-id": newid
});
// loop through each td and create new elements with name of newid
$.each($("#tab_logic tbody tr:nth(1) td"), function() {
var td;
var cur_td = $(this);
var children = cur_td.children();
// add new td and element if it has a nane
if ($(this).data("name") !== undefined) {
td = $("<td></td>", {
"data-name": $(cur_td).data("name")
});
var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
c.attr("name", $(cur_td).data("name") + newid);
c.appendTo($(td));
td.appendTo($(tr));
} else {
td = $("<td></td>", {
'text': $('#tab_logic tr').length
}).appendTo($(tr));
}
});
$(tr).find('#acc_narrat').removeAttr('data-toggle');
// add the new row
$(tr).appendTo($('#tab_logic'));
$(tr).find("td button.row-remove").on("click", function() {
$(this).closest("tr").remove();
});
});
// Sortable Code
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
return $helper;
};
$(".table-sortable tbody").sortable({
helper: fixHelperModified
}).disableSelection();
$(".table-sortable thead").disableSelection();
$("#add_row").trigger("click");
});
/* POPUP JS */
$('.cashmodal_btn').on('click', function() {
let val = $('.myInput').val();
$('#pay_narrat').val(val);
});
$('.cashmodal_btn').on('click', function() {
let val = $('.acnarrate').val();
$('#acc_narrat').val(val);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- table -->
<a id="add_row" class="btn btn-primary float-right adRow">Add New</a>
<div class="col-md-12 table-responsive">
<table class="table table-bordered table-hover table-sortable" id="tab_logic">
<thead style="background-color: #680779;
color: #fff;">
<tr>
<th class="text-center">
Account Code
</th>
<th class="text-center">
A/c Name*
</th>
<th class="text-center">
Narration*
</th>
<th class="text-center">
Debit*
</th>
<th class="text-center">
Credit
</th>
<th class="text-center" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;">
Action
</th>
</tr>
</thead>
<tbody>
<tr id="fst_row">
<td>
<input type="number" id="payacc_code" placeholder='Enter A/c code' class="form-control" />
</td>
<td>
<select class="form-control" id="payacc">
<option value="">Select TDS A/c name</option>
<option value="1">JOE</option>
<option value="2">JOE 2</option>
<option value="3">JOE 3</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="pay_narrat" placeholder="Enter your here" data-toggle="modal" data-target="#narratModal" />
</td>
<td>
<input type="number" id="paydeb" value="100" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly />
</td>
<td>
<input type="number" id="paycredit" placeholder='Credit Amount' class="form-control" readonly />
</td>
<td>
<button class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn' style="cursor: not-allowed" disabled><span aria-hidden="true">×</span></button>
</td>
</tr>
<tr id='addr0' class="hidden">
<td data-name="cashCode">
<input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" />
</td>
<td data-name="sel">
<select class="form-control" name="cashacc_sel" id="cashacc_sel">
<option value="">Select A/c name</option>
<option value="1">Plumz</option>
<option value="2">Plumz 2</option>
<option value="3">Plumz 3</option>
</select>
</td>
<td data-name="narrate">
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter your here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td data-name="dbt">
<input type="number" id="cashdeb" name='cashdeb' placeholder='Debit Amount' data-action="sumDebit" class="form-control" />
</td>
<td data-name="crdit">
<input type="number" id="cashcredit" name='cashcredit' placeholder='Credit Amount' class="form-control" readonly />
</td>
<td data-name="del">
<button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove removeBtn'><span aria-hidden="true">×</span></button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- narration text popup modal -->
<div class="modal fade" id="narratModal" tabindex="-1" role="dialog" aria-labelledby="narratModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title modal_head" id="narratModalLabel">Narration</h4>
</div>
<div class="modal-body">
<label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>
<input class="myInput form-control form-control-sm" style="height: 7em;" placeholder="Enter Here" />
<span class="modal_valid">0/200 Characterts entered</span>
</div>
<div class="modal-footer narr_footer">
<button type="button" class="btn btn-primary cashmodal_btn" id="narrat_ok" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="accnarratModal" tabindex="-1" role="dialog" aria-labelledby="accnarratModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title modal_head" id="accnarratModalLabel">Narration</h4>
</div>
<div class="modal-body">
<label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>
<textarea class="acnarrate form-control form-control-sm" style="height: 7em;" placeholder="Enter Here"></textarea>
<span class="modal_valid">0/200 Characterts entered</span>
</div>
<div class="modal-footer narr_footer">
<button type="button" class="btn btn-primary cashmodal_btn" id="accnarrat_ok" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
I am having trouble filling a form with table data.The form is in a modal dialogue and I want the dialogue to popup with inputs filled when the user clicks on the glyphicon, glyphicon-pencil.
I have looked at Fill form using table data, How to fill input fields in form with data from row in html table I want to edit, jQuery dynamic fill in form fields with table data, and Automatic fill a table with data using JavaScript and JSON, and none of their solutions worked for me, so please help.
here is the modal and form code:
<div class="modal fade" id="New-Employee-Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Employee</h4>
</div>
<div class="modal-body">
<div id="data">
<form id="person">
<div class="form-group">
<label class="control-label">First Name:</label>
<input class="form-control" id="FirstName" name="FirstName" type="text">
</div>
<div class="form-group">
<label class="control-label">Last Name:</label>
<input class="form-control" id="LastName" name="LastName" type="text">
</div>
<div class="form-group">
<label class="control-label">Net Id:</label>
<input class="form-control" id="NetId" name="Netid" type="text">
</div>
<div class="form-group">
<label class="control-label">Phone #:</label>
<input class="form-control" id="PhoneNumber" name="PhoneNumber" type="tel" required />
</div>
<div class="form-group">
<label class="control-label">Email:</label>
<input class="form-control" id="Email" name="Email" type="text">
</div>
<div class="form-group">
<label class="control-label">Role</label>
<input class="form-control" id="Role" name="Role" type="text">
</div>
<div class="form-group">
<label class="control-label">Active:</label>
<br />
<input name="Active" type="radio" value='<span class="glyphicon glyphicon-ok-circle">' /> Active
<br />
<input name="Active" type="radio" value='<span class="glyphicon glyphicon-ban-circle">' /> Not Active
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="ResetForm()">Reset</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="AddData()">Save</button>
</div>
</div>
</div>
</div>
Here is the part of the table:
<div id="tab">
<table class="table table-striped" id="list">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Net ID</th>
<th>Phone #</th>
<th>Email</th>
<th>Active</th>
<th>Role</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joel</td>
<td>lewis</td>
<td>lewisj</td>
<td>333-555-3667</td>
<td>lewisj#gmail.com</td>
<td>
<a id="icon-toggle" class="btn-default">
<span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
</a>
</td>
<td>Developer</td>
<td>
<span class="glyphicon glyphicon-pencil" data-target="#New-Employee-Modal" onclick="UpdateForm()" aria-hidden="true"></span>
<a id="icon-toggle-delete" class="removebutton">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
</td>
</tr>
and here is the javascript:
function AddData() {
var rows = "";
var FirstName = document.getElementById("FirstName").value;
var LastName = document.getElementById("LastName").value;
var NetId = document.getElementById("NetId").value;
var PhoneNumber = document.getElementById("PhoneNumber").value.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
var Email = document.getElementById("Email").value;
var Active = document.querySelector('input[name="Active"]:checked');
Active = Active ? Active.value : '';
var Role = document.getElementById("Role").value;
rows += "<td>" + FirstName + "</td><td>" + LastName + "</td><td>" + NetId + "</td><td>" + PhoneNumber + "</td><td>" + Email + "</td><td>" + Active + "</td><td>" + Role + '</td><td> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <a id="icon-toggle-delete2" class="removebutton"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </a></td>';
var tbody = document.querySelector("#list tbody");
var tr = document.createElement("tr");
tr.innerHTML = rows;
tbody.appendChild(tr)
}
function UpdateForm() {
$('span.glyphicon glyphicon-pencil').click(function() {
//! Don't know what do here
});
}
function ResetForm() {
document.getElementById("person").reset();
}
here is the jsfiddle http://jsfiddle.net/neu4gh37/2/
You can use such an example of code. Note, you don't need call UpdateForm() with onclick event, you added this event by jQuery for the selector 'span.glyphicon-pencil' (I fixed it a little)
$('span.glyphicon-pencil').click(function () {
var formFields = [];
var $target = $(event.target);
var $row = $target.closest('tr');
$row.find('td').each(function (index, el) {
var fieldValue = $(el).html();
switch (index) {
case 0:
formFields['FirstName'] = fieldValue;
break;
case 1:
formFields['LastName'] = fieldValue;
break;
default:
break;
}
});
fillForm(formFields);
});
function fillForm(data) {
var $form = $('#person');
$form.find('input').each(function () {
var $input = $(this);
switch ($input.attr("name")) {
case 'FirstName':
$input.val(data['FirstName']);
break;
case 'LastName':
$input.val(data['LastName']);
break;
default:
break;
}
});
}
I am going to implement a searchbox wherein user will input the string on the searchbox and will be filtered when button is clicked/submitted/pressed enter.
I am retrieving so much data from my database and it makes my app loads very slow. So I need to make the search not retrieve all the data (causes logged of computer).
Ok .. So here's my view
<div data-ng-app="PRApp">
<div data-ng-controller="PRCtrl" class="ng-scope">
<div class="row">
<div class="row">
<form data-ng-submit="changeDate()">
<div class="col-xs-4">
<h4><b>Search by Date :</b></h4>
<div class="col-xs-10">
<div class="input-group">
<span class="input-group-addon">
<span data-ng-click="show=!show" class="glyphicon glyphicon-calendar"></span>
</span>
<input data-show="{{show}}" type="text" name="filter_fromDate" datepicker data-ng-model="filter_fromDate"
class="form-control" placeholder="mm/dd/yyyy" data-ng-minlength="10" />
</div>
</div>
<br />
<br />
<div class="col-xs-10">
<div class="input-group">
<span class="input-group-addon">
<span data-ng-click="show=!show" class="glyphicon glyphicon-calendar"></span>
</span>
<input data-show="{{show}}" type="text" name="filter_toDate" datepicker data-ng-model="filter_toDate"
class="form-control" placeholder="mm/dd/yyyy" data-ng-minlength="10" />
</div>
</div>
<br />
<br />
<div class="col-xs-10">
<input type="submit" class="btn btn-primary btn-sm" value="GO" />
</div>
</div>
</form>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
<div class="col-xs-10">
<h4><b>Search :</b></h4>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" name="search" data-ng-model="filter" class="form-control" placeholder="Search here (e.g. 151234 or Pille)" />
</div>
<br />
</div>
<div class="btn-group" role="group">
<button data-ng-click="exportData()" class ="btn btn-warning"><i class ="glyphicon glyphicon-export"></i>Export to Excel </button>
</div>
</div>
</div>
</div>
<h2 data-ng-show="models == null ">Loading ...</h2>
<br />
<div id="exportable">
<table data-ng-show="models != null" class="table table-striped table-bordered table-hover"
id="PRTable">
<tr class="titlerow">
<th>
<a href="#" data-ng-click="sorting='RequestDate'; reverse = !reverse">PR Date <span
data-ng-show="sorting == 'RequestDate'"></span>
</a>
</th>
<th>
<a href="#" data-ng-click="sorting='RequestID '; reverse = !reverse">PR # <span data-ng-show="sorting == 'RequestID '">
</span>
</a>
</th>
<th>
<a href="#" data-ng-click="sorting='PARNumber '; reverse = !reverse">PAR # <span
data-ng-show="sorting == 'PARNumber '"></span>
</a>
</th>
<th>
<a href="#" data-ng-click="sorting='ProgramName '; reverse = !reverse">Program <span
data-ng-show="sorting == 'ProgramName '"></span>
</a>
</th>
<th>
<a href="#" data-ng-click="sorting='FullName '; reverse = !reverse">Requestor <span
data-ng-show="sorting == 'FullName '"></span>
</a>
</th>
<th>
<a href="#" data-ng-click="sorting='PONo'; reverse = !reverse">PO #
</a>
</th>
<th>
<a href="#" data-ng-click="sorting='StatusID '; reverse = !reverse">PRStatus<span
data-ng-show="sorting == 'StatusID '"></span>
</a>
</th>
<th>
<a href="#" data-ng-click="sorting='Amount '; reverse = !reverse">Total Amount<span
data-ng-show="sorting == 'Amount '"></span>
</a>
</th>
<th>
<a href="#" data-ng-click="sorting='Amount '; reverse = !reverse">Last Action<span
data-ng-show="sorting == 'Amount '"></span>
</a>
</th>
</tr>
<tr data-ng-repeat="model in models | orderBy: sorting:reverse | filter : filter ">
<td>{{jsonDatetotext(model.RequestDate) | date:'MM/dd/yyyy'}}</td>
<td>
<a href="#" data-toggle="modal" data-target="#basicModalContent" data-ng-click="getSelectedPR(model)">
{{model.RequestID}}
</a>
</td>
<td>{{model.PARNumber }}</td>
<td>{{model.ProgramName }}</td>
<td>{{model.FullName }}</td>
<td>{{model.PONo}}</td>
<td>{{StatusList[model.StatusID] | uppercase}}</td>
<td class="totalAmount"><span class="pull-right">{{model.TotalAmount | number:2}}</span>
</td>
<td>{{model.LastBy | lowercase}}</td>
</tr>
<tr>
<td colspan="9" ><h3><b>Total Amount : </b><span class="pull-right">{{models | sumbykey : 'TotalAmount' | number:2}}</span></h3> </td>
</tr>
</table>
</div>
<!-- /.Modal Na ni -->
<div class="modal fade" id="basicModalContent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body" id="exportablePRItems">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>PR #
</th>
<th>Item Description
</th>
<th>Supplier
</th>
<th>Account
</th>
<th>Currency
</th>
<th>Amount
</th>
<th>(USD) Amount
</th>
</tr>
</thead>
<tbody data-ng-repeat="selectedPR in selectedModal.ItemList">
<tr>
<td>{{selectedPR.RequestID}}</td>
<td>{{selectedPR.PartDesc}}</td>
<td>{{selectedPR.SupplierID }}</td>
<td>{{selectedPR.AccountType}}</td>
<td>{{selectedPR.CurrName }}</td>
<td data-ng-model="amount" class="amount">{{selectedPR.Amount | number:2}}</td>
<td>{{selectedPR.AmountUSD}}</td>
</tr>
</tbody>
<tr>
<td><span class="pull-right"><i class="glyphicon glyphicon-plus-sign"></i></span></td>
<td colspan="6"><b>Total Amount : </b>{{selectedModal.ItemList | sumbykey : 'Amount' | number:2}} </td>
</tr>
</table>
</div>
<footer>
<br />
<button data-ng-click="exportDataItems()" class ="btn btn-warning"><i class ="glyphicon glyphicon-export"></i>Export Item </button></footer>
</div>
<div class="modal-footer">
<button id="btnModalCancel" type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
</div>
</div>
<!-- /.modal-content -->
<!-- /.modal-dialog -->
</div>
</div>
</div>
</div>
.
And here is my angular:
<script type="text/javascript">
var PRApp = angular.module('PRApp', []);
PRApp.controller('PRCtrl', ['$scope', '$http', function (scope, http) {
http.get('GetList').success(function (data) {
scope.models = data;
scope.selectedModal = null;
});
scope.getStatus = http.get('GetStatusList').success(function (status) {
scope.StatusList = status
});
scope.getSelectedPR = function (PR) {
scope.selectedModal = PR;
};
//scope.totalPrice = function () {
// var total = 0;
// var amounts = this.closest('td').find('.totalAmount').text();
// angular.forEach($scope.models.data, function (item) {
// total += $(amounts).parseInt;
// })
// return total;
//}
// scope.searchHere = 'Search here ... '
scope.isEmpty = function (items) {
return angular.isArray(items) && items.length === 0;
};
function GetbyDate(fr, t) {
var from = new Date(t)
};
scope.changeDate = function () {
scope.models = null;
http.get('GetReportList?from=' + scope.filter_fromDate + '&to=' + scope.filter_toDate).success(
function (data) {
scope.models = data;
});
}
scope.jsonDatetotext = function (jsondate) {
// jsondate format: /Date(#############)/
// substr(6) will remove '/Date('
// parseInt will convert remaing string '#############' to int and ignores ')/'
return new Date(parseInt(jsondate.substr(6)));
};
scope.exportData = function () {
var date = new Date();
var d = date.getFullYear() + '-' + date.getMonth() + 1 + '-' + date.getDate();
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "Report_" + d + ".xls");
};
scope.exportDataItems = function () {
var date = new Date();
var d = date.getFullYear() + '-' + date.getMonth() + 1 + '-' + date.getDate();
var blob = new Blob([document.getElementById('exportablePRItems').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "Items_"+ d +".xls");
};
}]);
PRApp.directive('datepicker', function () {
return {
require: 'ngModel',
link: function (scope, el, attr, ngModel) {
attr.$observe("show", function (val) {
if (val == 'true') {
$(el).datepicker("show");
}
else {
$(el).datepicker("hide");
}
});
$(el).datepicker({
minDate: '-5Y',
maxDate: 0,
dateFormat: 'MM d, yy',
onSelect: function (dateText) {
scope.$apply(function () {
ngModel.$setViewValue(dateText);
});
}
});
}
};
});
PRApp.filter('sumbykey', function () {
return function (data, key) {
if (typeof (data) === 'undefined' || typeof (key) === 'undefined') {
return 0;
}
var sum = 0.00;
for (var i = data.length - 1; i >= 0; i--) {
sum += parseFloat(data[i][key]);
}
return sum;
};
});
</script>
You can use server side paging. See the example here