Dynamic id does not work after removing row from table - javascript

I have a table with feeSetting id.It contain dynamic data , I can add and remove remove rows to table. I generated ids dynamically that work fine until user remove a rows and add again new row it override the unique id of last row. I want table to generate unique id with dynamic add and remove functionality . My code for adding row is as follow.
<tablen id="feeSetting ">
<tbody>
</tbody>
</table>
<script>
function AddRow() {
debugger;
var index = 0;
if ($("#feeSetting tbody tr").length > 0) {
index = $("#feeSetting tbody tr").length;
}
$("#feeSetting tbody").append("<tr class='gradeX'>"
+ "<td class='col-md-3'><input type='text' value='' class='form-control validate[required,custom[number]] text-input txtFromDay' id='eFromDay'/></td>"
+ "<td class='col-md-3'><input type='text' class='form-control validate[required,custom[number],min[1]] text-input txtValue' value='' id='eValue-" + index + "'/></td>"
+ "<td class='col-md-4'>"
+ "<div id='loadTypes-" + index + "' class='typeValidation'></div></td>"
+ "<td class='col-md-2'><input type='button' class='btn btn-danger btn-sm' value=' Remove '/></td>"
+ "</tr>");
renderPartialInDiv('#Url.Action("GetValidationTypeDropDown", "FeeFineSetting")?strDDName=eValidationTypeList-' + index + '&intDDID=0&intValidationID=1', '#loadTypes-' + index);
$('#eValidationTypeList-'+index).select2();
};
</script>

Try using one global variable which will increment its value on addition of each new row, see below code
<tablen id="feeSetting ">
<tbody>
</tbody>
</table>
<script>
//keep this variable outside function and use it as global variable.
var index = 0;
function AddRow() {
debugger;
index++;
$("#feeSetting tbody").append("<tr class='gradeX'>"
+ "<td class='col-md-3'><input type='text' value='' class='form-control validate[required,custom[number]] text-input txtFromDay' id='eFromDay'/></td>"
+ "<td class='col-md-3'><input type='text' class='form-control validate[required,custom[number],min[1]] text-input txtValue' value='' id='eValue-" + index + "'/></td>"
+ "<td class='col-md-4'>"
+ "<div id='loadTypes-" + index + "' class='typeValidation'></div></td>"
+ "<td class='col-md-2'><input type='button' class='btn btn-danger btn-sm' value=' Remove '/></td>"
+ "</tr>");
renderPartialInDiv('#Url.Action("GetValidationTypeDropDown", "FeeFineSetting")?strDDName=eValidationTypeList-' + index + '&intDDID=0&intValidationID=1', '#loadTypes-' + index);
$('#eValidationTypeList-'+index).select2();
};
</script>

Related

How to display checkbox value (checked or unchecked )

I am working on a project and the project was created with ASP.Net mvc 5.
I get the data from the database and I just want to display the data on the user interface. My problem is, I have all the data I want in the browser console, but the checkboxes are not shown checked. How can I do this?
"<input type='checkbox' value='" +item.IsActive+"'/>"
Here is my code:
function success(data) {
var rows;
if (data != null) {
$.each(data, function (i, item) {
rows += "<tr>"
+ "<td>" +
"<label class='checkbox-container' id ='checkbox-container'>" +
item.Name+
"<input type='checkbox' value='" + item.IsActive+"'/>" +
"<span class='checkmark'>"+"</span>"+
"</label >"+
"</td>"
});
$('#myTable tbody').append(rows);
}
else {
alert("Something went wrong");
}
}
Maybe some js logic would help?
$.each(data, function (i, item) {
var checkbox_input = "<input type='checkbox' value='" + item.IsActive+"'/>";
if(item.IsActive){
var checkbox_input = "<input type='checkbox' value='" + item.IsActive+"' checked />";
}
rows += "<tr>"
+ "<td>" +
"<label class='checkbox-container' id ='checkbox-container'>" +
item.Name+
checkbox_input +
"<span class='checkmark'>"+"</span>"+
"</label >"+
"</td>"
});
Or Shorthand with template literal js
$.each(data, function (i, item) {
rows += "<tr>"
+ "<td>" +
"<label class='checkbox-container' id ='checkbox-container'>" +
item.Name+
`<input type='checkbox' value='${item.IsActive}' ${item.IsActive ? 'checked' : ''} />` +
"<span class='checkmark'>"+"</span>"+
"</label >"+
"</td>"
});
If you want a checkbox to show checked, it should have the checked attribute. In this case it would be something like:
<input type='checkbox' checked/>
Since you have a variable that tells you wether the checkbox is checked or not, you could try using:
"<input type='checkbox'" + item.isActive ? "checked" : "" + "/>"
This will render the checkbox as checked when item.isActive is true.

Dynamically pass input text in a html table to Javascript function

I am generating html table like below:
var tablebody = "";
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "mCatchmentMapping.aspx/BindDatatable",
data: "{}",
dataType: "json",
success: function (data) {
var struct = "<div class='message_list'><div class='module_content'>";
for (var i = 0; i < data.d.length; i++) {
tablebody = tablebody + "<div class='message'><table id='tblhtml' width='100%'><tr><td width='25%'>" + data.d[i].Name + "</td>";
tablebody = tablebody + "<td><input type='hidden' style='color: green;' id='txtCode' name='Code' size='5' type='number' value=" + data.d[i].Code + "></td>";
tablebody = tablebody + "<td width='15%' class='nr' align='left' style='color:green'><input type='text' class='nr' style='color: green;' id='txtCatchment' name='txtCatchment' size='5' type='number' value=" + data.d[i].Catchment + "></td>";
tablebody = tablebody + "<td width='15%' align='left' style='color:green'><input type='text' style='color: green;' id='txtSalesMonth1' name='SalesMonth1' size='5' type='number' value=" + data.d[i].salesMonth1 + "></td>";
tablebody = tablebody + "<td width='15%' align='left' style='color:green'><input type='text' style='color: green;' id='txtSalesMonth2' name='SalesMonth2' size='5' type='number' value=" + data.d[i].salesMonth2 + "></td>";
tablebody = tablebody + "<td width='15%' align='left' style='color:green'><input type='text' style='color: green;' id='txtSalesMonth3' name='SalesMonth3' size='5' type='number' value=" + data.d[i].salesMonth3 + "></td>";
tablebody = tablebody + "<td width='15%' align='left' style='color:green'><input type='submit' class='use-address' id='btnSave' name='Save' onclick='saveData( " + data.d[i].Code + "," + $('#txtCatchment').val() + "," + $('#txtSalesMonth1').val() + "," + $('#txtSalesMonth2').val() + "," + $('#txtSalesMonth3').val() + ")'; value='Save'/></td></tr></table></div>";
}
tablebody = tablebody + "</div></div>"
tablebody = struct + tablebody;
$("#tbDetails").append(tablebody);
},
error: function (result) {
alert("Error");
}
});
Each row which has a save button at the last td. If I click "Save" button, the corresponding rows input text value should be passed as parameters to the JavaScript function "saveData".
This is my javascript function:
function saveData(code, catchment, month1, month2, month3) {
alert("storename :" + code);
alert("catchment :" + catchment);
alert("month1 :" + month1);
alert("month2 :" + month2);
alert("month3 :" + month3);
}
when I click save, I am getting undefined value for "catchment", "month1", "month2" and "month3".
How to pass the input text value to the javascript function?
You are creating text boxes dynamically so they will not be available while creation but will be available on run time, so you have to pass them like this
tablebody = tablebody + "<td width='15%' align='left' style='color:green'><input type='submit' class='use-address' id='btnSave' name='Save' onclick='saveData( " + data.d[i].Code + ",$(\"#txtCatchment\").val(), $(\"#txtSalesMonth1\").val(),$(\"#txtSalesMonth2\").val(), $(\"#txtSalesMonth3\").val())'; value='Save'/></td></tr></table></div>";
Here is the similar example
https://jsfiddle.net/h553jzmb/
Instead using $('#txtCatchment').val use the data.d[i].Catchment and so on. Because #txtCatchment won't be unique after your loop
Modify you last line with save function with the below code.
tablebody = tablebody + "<td width='15%' align='left' style='color:green'><input type='submit' class='use-address' id='btnSave' name='Save' onclick='saveData( " + data.d[i].Code + "," + data.d[i].Catchment + "," + data.d[i].salesMonth1 + "," + data.d[i].salesMonth2 + "," + data.d[i].salesMonth3 + ")'; value='Save'/></td></tr></table></div>";
Working live example
https://jsbin.com/jayaki/edit?html,js,output
Hope this helps. Thanks !

Dynamically creating a form

On my page, I show a table of entries. At the end of the table is a "modify" button. When the button is clicked the row turns into a form for directly modifying the contents.
This code:
element.innerHTML = "<tr class='alt_col'>";
element.innerHTML += "<form action='/RIDT/includes/modify_codeplug.inc.php' method='POST' name='modify_form'>";
element.innerHTML += "<td><input type='text' name='fileName' value='" + fileName + "'></td>";
element.innerHTML += "<td><input type='text' name='location' value='" + loc + "'></td>";
element.innerHTML += "<td><input type='text' name='build' value='" + build + "'></td>";
element.innerHTML += "<td><input type='text' name='version' value='" + version + "'></td>";
element.innerHTML += "<td><select name='type' id ='selectType'>" + descOptions + "</select></td>";
element.innerHTML += "<td><input type='hidden' name='id' value='" + id + "'/><input type='submit' value='Submit'/></td>";
element.innerHTML += "</form>";
element.innerHTML += "</tr>";
var options = document.getElementById("selectType").options;
for (i = 0; i < options.length; i++)
{
if (options[i].text == desc)
{
options[i].selected=true;
}
}
Results in the form being created like this:
<form action="/RIDT/includes/modify_codeplug.inc.php" method="POST" name="modify_form"></form>
With all of the forms input elements coming after the closing element. Why is the form being closed early?
Thanks for the help everyone. I will research all the suggestions provided more deeply later. In the interest of saving time I did it a different way. Instead of submitting a form, the submit button calls another javascript function that picks out the input data from the DOM, then builds and submits a hidden form to my php script. It's not pretty, but it got the job done.
I didn't test this, but jQuery has the same problem if you try to insert an unclosed element into the DOM. The closing tag is added for you.
Try this instead:
//track the html as a single string var
var html = "<tr class='alt_col'>";
html += "<form action='/RIDT/includes/modify_codeplug.inc.php' method='POST' name='modify_form'>";
html += "<td><input type='text' name='fileName' value='" + fileName + "'></td>";
html += "<td><input type='text' name='location' value='" + loc + "'></td>";
html += "<td><input type='text' name='build' value='" + build + "'></td>";
html += "<td><input type='text' name='version' value='" + version + "'></td>";
html += "<td><select name='type' id ='selectType'>" + descOptions + "</select></td>";
html += "<td><input type='hidden' name='id' value='" + id + "'/><input type='submit' value='Submit'/></td>";
html += "</form>";
html += "</tr>";
// set the html string once
element.innerHTML = html;

adding text-box in column (script)

I have this code
(in script):
var response = [{
"A":"a2",
"B":"b2",
"C":"c2"
},
{
"A":"a3",
"B":"b3",
"C":"c3"
},
{
"A":"a4",
"B":"b4",
"C":"c4"
}];
$.each(response, function(i, item) {
$('<tr>').html(
//"<tr>" +
"<td>" + response[i].A + "</td><td>" + response[i].B + "</td><td>" + response[i].C + "</td>" + "</tr>").appendTo('#MyTable tbody');
});
and I want to change one of column (just for exp it's will be "A") to be "edited" by text-box.
I am tring this:
... `"<td><input type="text">" + response[i].A + "</td><td>" + response[i].B + "</td><td>" + response[i].C + "</td>" + "</tr>").appendTo('#MyTable tbody');`...
but it's not working.
any help please!
If i understood correctly,
Instead of creating <tr>, later adding contents to it using html() and finally appending to do the <table>, you can directly add everything altogether to the <table> using append() method.
$.each(response, function(i, item) {
$('#MyTable tbody').append("<tr>"
+"<td><input type='text' value='"+ response[i].A +"'/> </td><td><input type='text' value='"+ response[i].B +"'/></td><td><input type='text' value='"+ response[i].C +"'/></td>"
+ "</tr>");
});
Try saying This
var firstcell = "<td><input type="text" value="VALUE"</td>";
firstcell = firstcell.replace('VALUE', response[i].A);
Use this for first cell in each Row. After that append this in whole row.

JavaScript/Jquery - Retrieving data in a row

I'm pretty new to JavaScript, so suppose I have the following function that I use to append a new row into a table. Could someone please give some suggestions how I would be able to get the value of the textarea boxes or check whether each checkbox is checked on the last row that I add to the table? I'm trying to use getElementByName() but a bit unsure on how to get the data on the specific row I want. The table is part of a jsp page. Thanks lots!!!
function generateNewRow(id){
var tr = "<tr>";
tr += "<td><input name='id' type='hidden' value='" + id + "' />";
tr += "<textarea name='a' style='width: 98%; height:40px'></textarea></td>";
tr += "<td>";
tr += "<input type='checkbox' name='b' value='" + id + "'/>B";
tr += "<input type='checkbox' name='c' value='" + id + "'/>C";
tr += "<input type='checkbox' name='d' value='" + id + "'/>D";
tr += "<input type='checkbox' name='e' value='" + id + "'/>E<br/>";
tr += "<input type='checkbox' name='f' value='" + id + "'/>F;
tr += "</td>";
tr += "<td><textarea name='g' style='width: 98%; height:40px'></textarea></td>";
tr += "</tr>";
$("#ProblemsGrid tbody").append(tr);
}
If you want to get the last row of the table you can use a selector like so:
$("#ProblemnsGris tbody tr:last");
For textarea and input values I would use find along with each:
$("#ProblemsGrid tr:last").find('input:checkbox').each(function(index, element){
var value = $(element).is(':checked');
alert(value);
});
$("#ProblemsGrid tr:last").find('textarea').each(function(index, element){
var value = $(element).val();
alert(value);
});
http://jsfiddle.net/Dqryf/

Categories