I am wondering if anyone could help me I am trying to put DropDownList inside a java script function which creates new rows in a table. I am wondering is this possible. I need to do this because I am using BeginCollectionItem to collect the values of the children of a master record.
Update: The Purpose of this is to collect the children of the orders with BeginCollectionItem and using JavaScript to calculate the calculations and create new table rows so that they can be captured by BeginCollectionItem to be added to the order.
Image
JavaScript (Its in a separate File called Invoicescript.js)
function generateTableRow() {
var emptyColumn = document.createElement('tr');
emptyColumn.innerHTML = '<td><a class="cut">-</a><span contenteditable></span></td>' +
'<td><span contenteditable></span></td>' +
'<td><span data-prefix>$</span><span contenteditable>0.00</span></td>' +
'<td><span contenteditable>0</span></td>' +
'<td><span contenteditable>0</span></td>' +
'<td><span contenteditable>0</span></td>' +
'<td><span contenteditable>0</span></td>' +
'<td><span contenteditable>0</span></td>' +
'<td><span data-prefix>$</span><span>0.00</span></td>';
return emptyColumn;
}
function onContentLoad() {
updateInvoice();
var
input = document.querySelector('input'),
image = document.querySelector('img');
function onClick(e) {
var element = e.target.querySelector('[contenteditable]'), row;
element && e.target != document.documentElement && e.target != document.body && element.focus();
if (e.target.matchesSelector('.add')) {
document.querySelector('table.inventory tbody').appendChild(generateTableRow());
}
else if (e.target.className == 'cut') {
row = e.target.ancestorQuerySelector('tr');
row.parentNode.removeChild(row);
}
updateInvoice();
}
function onEnterCancel(e) {
e.preventDefault();
image.classList.add('hover');
}
function onLeaveCancel(e) {
e.preventDefault();
image.classList.remove('hover');
}
function onFileInput(e) {
image.classList.remove('hover');
var
reader = new FileReader(),
files = e.dataTransfer ? e.dataTransfer.files : e.target.files,
i = 0;
reader.onload = onFileLoad;
while (files[i]) reader.readAsDataURL(files[i++]);
}
function onFileLoad(e) {
var data = e.target.result;
image.src = data;
}
if (window.addEventListener) {
document.addEventListener('click', onClick);
document.addEventListener('mousewheel', updateNumber);
document.addEventListener('keydown', updateNumber);
document.addEventListener('keydown', updateInvoice);
document.addEventListener('keyup', updateInvoice);
input.addEventListener('focus', onEnterCancel);
input.addEventListener('mouseover', onEnterCancel);
input.addEventListener('dragover', onEnterCancel);
input.addEventListener('dragenter', onEnterCancel);
input.addEventListener('blur', onLeaveCancel);
input.addEventListener('dragleave', onLeaveCancel);
input.addEventListener('mouseout', onLeaveCancel);
input.addEventListener('drop', onFileInput);
input.addEventListener('change', onFileInput);
}
}
window.addEventListener && document.addEventListener('DOMContentLoaded', onContentLoad);
Partial View
@using HtmlHelpers.BeginCollectionItem
@{
Layout = "";
}
@using (Html.BeginCollectionItem("OrderLines"))
{
<tbody>
<tr>
<td>
<a class="cut">-</a><span contenteditable>
@Html.DropDownList("StockCode", new SelectList(ViewBag.StockCodeList, "Value", "Text"),
new
{
@class = "form-control selectpicker",
@Value = @Model.Description,
onchange = "this.form.submit();",
data_show_subtext = "true",
data_live_search = "true"
})
</span>
</td>
<td><span contenteditable>Test</span></td>
<td><span data-prefix>$</span><span contenteditable>150.00</span></td>
<td><span contenteditable>4</span></td>
<td><span contenteditable>0</span></td>
<td><span contenteditable>0.00</span></td>
<td><span contenteditable>0.00</span></td>
<td><span contenteditable>0</span></td>
<td><span data-prefix>$</span><span>0.00</span></td>
</tr>
</tbody>
}
Main View
@model Accounts.Models.OrderView
@using HtmlHelpers.BeginCollectionItem
<link href="~/Content/Invoicestyle.css" rel="stylesheet" />
<header>
<h1>Invoice</h1>
</header>
<article>
<h2>Recipient</h2>
<address >
<p>Some Company<br>c/o Some Guy</p>
<p>Jonathan Neal</p>
<p>101 E. Chapman Ave<br>Orange, CA 92866</p>
<p>(800) 555-1234</p>
</address>
<table class="meta">
<tr>
<th><span >Invoice #</span></th>
<td><span >101138</span></td>
</tr>
<tr>
<th><span >Date</span></th>
<td><span >January 1, 2012</span></td>
</tr>
<tr>
<th><span >Amount Due</span></th>
<td><span id="prefix" >£</span><span>600.00</span></td>
</tr>
</table>
<table class="inventory">
<thead>
<tr>
<th width="180"><span>Code</span></th>
<th width="265"><span>Description</span></th>
<th><span>Price</span></th>
<th><span>Quantity</span></th>
<th><span>Discount %</span></th>
<th><span>Discount £</span></th>
<th><span>Net £</span></th>
<th><span>Tax %</span></th>
<th><span>VAT £</span></th>
</tr>
</thead>
@{
if (Model.OrderLines == null)
{
Model.OrderLines = new List<Accounts.Models.OrderLines>();
Accounts.Models.OrderLines Line = new Accounts.Models.OrderLines();
Line.CustomerID = Model.CustomerID;
Model.OrderLines.Add(Line);
}
foreach (var item in Model.OrderLines)
{
Html.RenderPartial("orderline", item);
}
}
</table>
<a class="add" onclick="NewRow()">+</a>
<table class="balance">
<tr>
<th><span >Net Items</span></th>
<td><span data-prefix>£</span><span>600.00</span></td>
</tr>
<tr>
<th><span >Net Discount</span></th>
<td><span data-prefix>£</span><span>000.00</span></td>
</tr>
<tr>
<th><span >Net Tax</span></th>
<td><span data-prefix>£</span><span>000.00</span></td>
</tr>
<tr>
<th><span >Amount Paid</span></th>
<td><span data-prefix>£</span><span >0.00</span></td>
</tr>
<tr>
<th><span >Balance Due</span></th>
<td><span data-prefix>£</span><span>600.00</span></td>
</tr>
</table>
</article>
<aside>
<h1><span >Additional Notes</span></h1>
<div >
<p>A finance charge of 1.5% will be made on unpaid balances after 30 days.</p>
</div>
</aside>
<script src="@Url.Content("~/Content/Invoicescript.js")"></script>
