Start with: I am very new to Front End dev (it got added to my java backend work:)). I have a modal that opens on a page with a table with two rows - each with 2 inputs and a select box. If you click a button....it should add another row with the same elements. They use to do it this way: have a table footer that was hidden with the elements in (starting with row: <tr>), then when you click the button it calls the table body and .append the footer. Then call the attr on the three elements and change the id and name. For some reason if the footer is unhidden...the dropdown works, but the copied version doesn't. We investigated the names, the values, etc. The values are in the rendered html...the dropdown just doesn't open.
So now what I am trying to do...which I feel might be cleaner. Is create a variable with the html...and append that everytime the button is clicked. But the select element has a tag that was written...so I don't know if this is the problem, but everytime I try and add it to the mix....There are errors about unexpected token(<). If I take the one line that starts <dfm:catombobox> away - it works... Anyone have ideas to help me add the "catombobox" which is the select with the tag? PS: If I take the quotes away and just copy that line to the original table...it works??
var newRow = '<tr>'+
'<td nowrap="nowrap"><strong>R</strong> <input class="amount input-small" style="margin-top: 8px;margin-bottom: 0;" type="text"/></td>'+
'<td nowrap="nowrap" style="padding-top: 7px;">'+
'<dfm:catombobox cssClass="input-medium" id="CategoryId_Test" name="CategoryName_Test" showEmptyCategory="true" showGroups="true" value=""/>'+
'</td>'+
'<td><input class="input-medium" style="margin-top: 8px;margin-bottom: 0;" type="text"/></td>'+
'<td><a class="remove" href="#"><i class="icon-remove"></i></a></td>'+
'</tr>';
$("#mytable tbody").append(newRow);
try using select instead of dfm:catombobox
check here its working fine
adding new rows to table
var newRow = '<tr>' +
'<td nowrap="nowrap"><strong>R</strong> <input class="amount input-small" style="margin-top: 8px;margin-bottom: 0;" type="text"/></td>' +
'<td nowrap="nowrap" style="padding-top: 7px;">' +
'<dfm:catombobox cssClass="input-medium" id="CategoryId_Test" name="CategoryName_Test" showEmptyCategory="true" showGroups="true" value=""/>' +
'</td>' +
'<td><input class="input-medium" style="margin-top: 8px;margin-bottom: 0;" type="text"/></td>' +
'<td><a class="remove" href="#"><i class="icon-remove"></i></a></td>' +
'</tr>';
$("#btn").on('click',function(){
$("#mytable tbody").append(newRow);
})
Related
I am working on an old IE application, where we are adding the row dynamically in the table
JS function for adding new row
function doAddVendor(vendorCode,vendorName){
var vendorTable = document.getElementById('vendorTable');
var idx = $('#vendorTable').children('TBODY').children().length-1;
var html = '';
html += '<tr tag="trVendor" class="TableLeftWhite" id="trVendor'+idx+'">';
html += '<td><input type="text" readOnly="true" tag="txtVendorCode" value="'+vendorCode+'" name="txtVendorCode'+idx+'" id="txtVendorCode'+idx+'" class="FormTextBoxReq" style="width:78%"/><input type="button" id="btn_port" name="btn_port" value=". . ." style="text-align :right;" onclick="openVendorHelp(\'txtVendorCode'+idx+'|txtVendorName'+idx+'\',\'retVendorChoosed\');" class="FormBtnClrHelp" /> </td>';
html += '<td><span id="txtVendorNameDesc'+idx+'">'+vendorName+'</span><input type="hidden" name="txtVendorName'+idx+'" id="txtVendorName'+idx+'" value="'+vendorName+'"/></td>';
html += '<td align="center"><input type="checkbox" name="chkVendorCode'+idx+'" value="'+idx+'" tag="chkCheckVendorDelete"/></td>';
html += '</tr>';
debugger;
//Below line works well in IE but on chrome its empty the previous added row
$('#vendorTable').children('TBODY').html($('#vendorTable').children('TBODY').html()+html);
$('#vendorListSize').val($('#vendorTable').children('TBODY').children().length-1);
}
HTMl CODE
<div style="height: 300px;">
<table border="0" cellpadding="0" cellspacing="1" width="100%"
id="vendorTable">
<tr>
<td width="15%" class="TableCenterSub">Vendor Code</td>
<td width="75%" class="TableCenterSub">Vendor Name</td>
<td width="10%" class="TableCenterSub">Select</td>
</tr>
</table>
</div>
first I add new row as below and fill it with some data
now when I try to add new row in chrome, its empty the previous row as below image
When I am adding the row and put any value for first time its added properly but when I tried to add new row,it empty the previous row in chrome while in IE its still populating properly.
One solution I found that I can put the check if the request is coming from IE or chrome based on that I can add the row in different way but this type of code has reutrn multiple time for multiple screens, I am looking for fix in this code so it can work smoothly without changing a lot in the files.
Any help to fix in particular code, will be much appriciate
I'm using a function which I've adapted to clone table rows when a certain button is clicked (see this fiddle), and assign the new row an incremented ID (i.e. table-rows-1 to table-rows-2). After creating a new row, I want a function I'm making to find an input in a td in this row and change its name from input-text-1 to input-text-2. I'm not very confident with Javascript, and am having trouble accessing the input element within the row. Heres an example:
<table>
<tbody>
<tr class="modal-rows" id="table-rows-1">
<td>
<input type="text" class="input-text" name="input-text-1">
</td>
</tr>
<tr class="modal-rows" id="table-rows-2"> <<< DUPLICATED ROW WITH INCREMENT ID
<td>
<input type="text" class="input-text" name="input-text-1">
</td>
</tr>
</tbody>
</table>
How can I access the inner inputs of this table in order to change their name? Heres what I've tried:
var rowNum = document.getElementsByClassName("modal-rows").length
$('#table-rows-' + rowNum + ' .input-text').attr('name', 'input-text-' + rowNum);
$('#table-rows-' + rowNum).find('.input-text').attr('name', 'input-text-' + rowNum);
$('#table-rows-' + rowNum).children('.input-text').attr('name', 'input-text-' + rowNum);
Can anyone let me know where I'm going wrong?
You can use below code inside your duplicate function:
clone.children[0].setAttribute('name', 'input-text'+ ++i)
Apologies if the title doesn't describe the following problem correctly.
Essentially I have the following in my cshtml file:
<tbody>
#for (int i = 0; i < Model.ProgrammeScores.Count; i++)
{
<tr>
<td>
<input type="hidden" asp-for="#Model.ProgrammeScores[i].Id" />
<input type="text" asp-for="#Model.ProgrammeScores[i].FileDate" name="#Model.ProgrammeScores[i].FileDate" class="datepicker form-control" aria-describedby="calendar-addon" />
</td>
<td>
<select asp-for="#Model.ProgrammeScores[i].ScoreId" name="#Model.ProgrammeScores[i].ScoreIds" asp-items="#Model.Scores" id="ScoreIds" class="select-picker create-select"></select>
</td>
<td>
<textarea class="form-control" rows="2" asp-for="#Model.ProgrammeScores[i].Comments"></textarea>
</td>
<td>
</td>
</tr>
}
</tbody>
#Model.Scores is a IList<SelectListItem>
Then, I have a button which adds a new row to the table with empty values, which I want to be editable and therefore allow me to add a new Score to the Programme inline in the actual table.
The Javascript function that adds a row to the table is as follows (I am aware that I am incorrectly trying to use Razor code here - This is where I need help)
function addScorecard() {
var rowCount = parseInt($('#numOfScores').val());
var scoreTable = $('#programme-score-table');
var row = $([
'<tr>',
'<td>',
'<input type="hidden" asp-for="#Model.ProgrammeScores[' + rowCount + '].Id" />',
'<input type="text" asp-for="#Model.ProgrammeScores[' + rowCount + '].FileDate" name="#Model.ProgrammeScores[' + rowCount + '].FileDate" class="datepicker form-control" aria-describedby="calendar-addon" />',
'</td>',
'<td>',
'<select asp-for="#Model.ProgrammeScores[' + rowCount + '].ScoreId" name="#Model.ProgrammeScores[' + rowCount + '].ScoreIds" asp-items="#Model.Scores" id="ScoreIds" class="select-picker create-select"></select>',
'</td> ',
'<td>',
'<textarea class="form-control" rows="2" asp-for="#Model.ProgrammeScores[' + rowCount + '].Comments"></textarea>',
'</td> ',
'<td>',
'</td>',
'</tr>'
].join("\n"));
scoreTable.append(row);
}
So, my overall question is - what is the correct way to implement this functionality so that whenever I add a new row to the table, the cells are correctly linked to their fields on the Model, for example the Select is correctly mapped to #Model.ProgrammeScores[i].ScoreId, and also the asp-items which come from #Model.Scores are correctly set as the options in the select dropdown list.
I have already began attempting to pass #Model.Scores from the cshtml through to the js using <script> var scores = '#Html.Raw(Json.Serialize(Model.Scores))'; </script> but I was still not able to get asp-items working for the dropdown.
Many thanks!
I have a button -
<a onclick="function edit_row()"></a>
When I click the button it invokes the function edit_row and opens a new row in a table which I can edit.
The problem is that every time I click the button, it opens a new row. I want to stop that. I want it to just open one row which holds the row id.
Script code:
function edit_row(process_id, row_id, item_id, quantity, price, total) {
$(".edit_row").remove();
$(".add_row").remove();
var row = '<tr class="bg-success"> <
td > <?php echo $lang['e_edit_items'];?>: < /td> <
td > '+ item_id +' < /td>';
row += '<td><?php echo $lang['
quantity '];?></td>';
row += '<td><input type="text" class="form-control" id="quant1" value="' + quantity + '"></td><td><?php echo $lang['
The - price '];?></td>';
row += '<td><input type="text" id="price1" class="form-control" value="' + price + '"></td>';
row += '<td><a class="btn btn-success btn-block"onclick="save_edit(' + process_id + ',' + row_id + ',' + item_id + ',' + quantity + ',' + total + ')"><?php echo $lang['
Save_edit '];?></a></td></tr>';
$("#" + row_id).after(row);
return false;
}
You can remove click event handler of clickable element like this example.
$("#button1").click(function(){
$("table").append("<tr><td>New-1</td><td>New-2</td><td>New-3</td></tr>");
$(this).unbind("click");
});
table, tr, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Add row
<table>
<tr>
<td>Column-1</td>
<td>Column-2</td>
<td>Column-3</td>
</tr>
<tr>
<td>Column-1</td>
<td>Column-2</td>
<td>Column-3</td>
</tr>
</table>
But there is many way to do this work. For example you can add disabled attribute to clickable element, if it is button, You can add data-* attribute or class to element or use variable to do this. See example of other way in jsfiddle
I have a html table that I'm running at the server level. However, I'm having trouble accessing the data that it is being populated with.
I'm populating the table using javascript but I need to access the data using vb.net.
I'm using jquery to get the information to the page by using the .html method.
Here is my javascript,
function ShowProj(strId, qno,ar) {
$('#hiddenQno').val(qno);
$('#qnoLbl').val(qno);
var output = '';
output = "<tr><th>Product</th>";
output += "<th>Bond</th>";
output += "<th>Cut</th>";
output += "<th>Pack</th>";
output += "<th>Delivery date</th></tr>";
for (i = 0; i < ar.length; i++) {
output += "<tr>";
output += "<td style='width: 40%;'>" + ar[i][0] + "</td>";
output += "<td style='width: 10%; text-align: center;'><input type='checkbox' " + (ar[i][1] == 1 ? 'checked' : '') + " /></td>";
output += "<td style='width: 10%; text-align: center;'><input type='checkbox' " + (ar[i][2] == 1 ? 'checked' : '') + " /></td>";
output += "<td style='width: 10%; text-align: center;'><input type='checkbox' " + (ar[i][3] == 1 ? 'checked' : '') + " /></td>";
output += "<td style='width: 30%;'><input type='text' value='" + ar[i][4] + "'/><input type='hidden' value='" + ar[i][5] + "' /></td>";
output += "</tr>"
}
$('#projGrid').html(output);
}
I am passing the information from vb.net using an `ArrayList.
Here is my html,
<div class="modalPopup" id="projPopup" style="width: 40%;">
<table style="width:100%;">
<tr>
<td colspan="2">
<table id="projGrid" runat="server" style="width: 100%;border: 1px solid black; font-size: 16;">
</table>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<asp:Button ID="projOk" runat="server" Text="Update" /></td>
<td>
<asp:Button ID="projCncl" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</div>
And here is my vb.net.
For Each row As HtmlTableRow In projGrid.Rows
'Dim chkBond As HtmlInputCheckBox = row.Cells(1).Controls(0)
Dim str As String
str = row.Cells(0).InnerText
Next
dynamic rows created in JS will not be available on server after postback as it is not in the viewstate
to workaround this you may do the following
you can add hidden input field to the page like
<input type="hidden" id="hiddenTableData" name="hiddenTableData" value="" />
then in your script add the data you need to the hidden input field,
$('#hiddenTableData').val(JSON.stringify(ar));
then on server on page post back, get the value of the form hidden field
String tableData= Request.Form["hiddenTableData"];
parse the hidden field value, populate your table and process it
if you are using JavaScript Method or service to fill any controls then you will not get data at code page. but you can pass that array to code page and then can get easily data as you want .
For this you should create a class same as array(in web page you are using) and a web-method
which accepts this(array) class type.
I have tried the same example in my end, and faced the same issue that , generated TR are not accessible in code behind. This is because, they are added using dynamic JS, and those are not put into VIEWSTATE, as you now, ASP control value are available in code behind on POSTBACK only if those are in VIEWSTATE. In this case it was not, so does the debugger says that projGrid.Rows.Count = 0. To make it work, you need to put changed/dynamic JS added TR into VIEWSTATE, but again those are encoded format, i afraid, how to do that.
But if you put any static TR inside table, then definitely those are accessible, I have verified that in debugger, it says projectGrid.Rows.Count = 1, if there is only one static TR inside table. And again because, that static TR is in VIEWSTATE only.
So to conclude, in my opinion, it is better to handle in JS side, if you are going to save those value to DB , then make AJAX call and save, and pass data in JSON format. Or use a hidden field, and save those data in JSON format, and after post, get those in code behind, read JSON format data, and operate.