How to get the id of a clone element
Question
I have cloned a element and changed their id but unable to fetch the id's of the clone element in the Jquery Can anyone please help??
The Html View source code is as follows
<table id="dataTable" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>UserName</th>
<th>Password</th>
<th>Service line</th>
<th>Track</th>
<th>subtrack</th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="TemplateRow" style="border:1px solid black">
<td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[0].UserName" type="text" value="Required"></td>
<td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[0].Password" type="text" value="Required"></td>
<td>
<select class="wrapper-dropdown Service_Line" id="z0__Service_Line" name="[0].Service_Line">
<option value="">--Select--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
<td>
<select class="wrapper-dropdown Track" id="z0__Track" name="[0].Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td>
<select class="wrapper-dropdown Sub_Track" id="z0__Sub_Track" name="[0].Sub_Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td></td>
</tr>
<tr id="TemplateRow" style="border:1px solid black">
<td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
<td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
<td>
<select class="[1].Service_Line" id="z0__Service_Line" name="[1].Service_Line">
<option value="">--Select--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
<td>
<select class="[1].Track" id="z0__Track" name="[1].Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td>
<select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td></td>
</tr>
<tr id="TemplateRow" style="border:1px solid black">
<td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
<td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
<td>
<select class="[1].Service_Line" id="z0__Service_Line" name="[1].Service_Line">
<option value="">--Select--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
<td>
<select class="[1].Track" id="z0__Track" name="[1].Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td>
<select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td></td>
</tr>
<tr id="TemplateRow" style="border:1px solid black">
<td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
<td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
<td>
<select class="[1].Service_Line" id="z0__Service_Line" name="[1].Service_Line">
<option value="">--Select--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
<td>
<select class="[1].Track" id="z0__Track" name="[1].Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td>
<select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td></td>
</tr>
<tr id="TemplateRow" style="border:1px solid black">
<td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
<td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
<td>
<select class="[1].Service_Line" id="z0__Service_Line" name="[1].Service_Line">
<option value="">--Select--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
<td>
<select class="[1].Track" id="z0__Track" name="[1].Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td>
<select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td></td>
</tr>
<tr id="TemplateRow" style="border:1px solid black">
<td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
<td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
<td>
<select class="[1].Service_Line" id="z0__Service_Line" name="[1].Service_Line">
<option value="">--Select--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
<td>
<select class="[1].Track" id="z0__Track" name="[1].Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td>
<select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
<option value="">--Select--</option>
<option> </option>
</select>
</td>
<td></td>
</tr>
</tbody>
</table>
In the above code i have cloned the rows by incrementing their id's using jquery code below
$(document).ready(function () {
/* 1. Initialise our variable to keep count of the rows added */
var rowcount = 1;
//Add new row
$("#addNew").click(function (e) {
e.preventDefault();
var $tableBody = $("#dataTable");
var $trLast = $tableBody.find("tr:last");
// 2. Create the new id with the row count
//var newId = "TemplateRow-" + rowcount;
// 3. clone the row with our new id
var $trNew = $trLast.clone(true);
// 4. rename each input and give an id
$.each($trNew.find(':input'), function (i, val) {
oldName = $(this).attr('name');
inputParts = oldName.split(".");
// set the name and id with the base name and rowcount
$(this).attr('name', '[' + rowcount + '].' + inputParts[1]);
$(this).attr('class', '[' + rowcount + '].' + inputParts[1]);
$(this).removeClass("input-validation-error");
});
$trLast.after($trNew);
$("#[" + rowcount + "].Service_Line").change(function () {
debugger;
$.get("/Users/GetTrackList", { Service_Line_ID: $("#[" + rowcount + "].Service_Line").val() }, function (data) {
$("#[" + rowcount + "].Track").empty();
$.each(data, function (index, row) {
$("#[" + rowcount + "].Track").append("<option value='" + row.Track_ID + "'>" + row.Track_Options + "</option>")
});
});
})
rowcount++;
});
});
But here in this line $("#[" + rowcount + "].Service_Line").change(function () { I'm unable to fetch the id of the cloned rows from the webpage Can anyone please help me? Thanks in advance
The service_line id of the rows when cloned goes on increasing as [1].service_line, [2].service_line , [3].service_line, [4].service_line, so on......... i need to fetch this id's using jquery here in this function
$("#[" + rowcount + "].Service_Line").change(function () {
debugger;
$.get("/Users/GetTrackList", { Service_Line_ID: $("#[" + rowcount + "].Service_Line").val() }, function (data) {
$("#[" + rowcount + "].Track").empty();
$.each(data, function (index, row) {
$("#[" + rowcount + "].Track").append("<option value='" + row.Track_ID + "'>" + row.Track_Options + "</option>")
});
});
})
2 answers
solution1
0 2020-08-27 17:10:30
You aren't setting the id like you think you are, you're setting the className and name attributes, so $("#[" + rowcount + "].Service_Line") is not going to return anything:
Your Script :
// set the name and id with the base name and rowcount
$(this).attr('name', '[' + rowcount + '].' + inputParts[1]);
$(this).attr('class', '[' + rowcount + '].' + inputParts[1]);
You can select the element by name attribute like so:
$("select[name='[" + rowcount + "].Service_Line']").change(function() {); //etc.
solution2
0 ACCPTED 2020-08-27 17:37:47
$("select[name='[" + rowcount + "].Service_Line']").change(function () {
//get the row count of this row using the keyword this, to
//get the select which fired the event, then use regex
//to capture the number from the name attribute:
const thisrow = $(this).attr('name').match(/\[(\d+)\]/)[1];
$.get("/Users/GetTrackList", { Service_Line_ID: $("select[name='[" + thisrow + "].Service_Line']").val() }, function (data) {
$("select[name='[" + thisrow + "].Track']").empty();
$.each(data, function (index, row) {
$("select[name='[" + thisrow + "].Track']").append("<option value='" + row.Track_ID + "'>" + row.Track_Options + "</option>")
});
debugger;
});
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to clone element with new id?
How to clone an element then increase the id by one
clone element and remove id
Jquery: How to get parent div of an element and clone it?
jquery clone element and increment id
How to clone element with jQuery containing id, name and javascript?
How to access an underlying element's ID inside of a javascript clone?
How to clone and change id?
How to clone an element?
How to get id of an element in jQuery?
Related Tags