#javascript #jquery #ajax #asp.net-mvc #entity-framework
#javascript #jquery #ajax #asp.net-mvc #entity-framework
Вопрос:
Я клонировал элемент и изменил его идентификатор, но не смог получить идентификатор элемента-клона в Jquery, Может кто-нибудь, пожалуйста, помочь??
Исходный код представления Html выглядит следующим образом
<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>
В приведенном выше коде я клонировал строки, увеличивая их идентификаторы
используя приведенный ниже код jquery
$(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 ;
});
});
Но вот в этой строке $(«# [» rowcount «].Service_Line»).change(function () { Я не могу получить идентификатор клонированных строк с веб-страницы Кто-нибудь может мне помочь? Заранее спасибо
Идентификатор service_line строк при клонировании продолжает увеличиваться как [1].service_line, [2].service_line, [3].service_line, [4].service_line и так далее ……… мне нужно получить этот идентификатор с помощью jquery здесь, в этой функции
$("#[" 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>")
});
});
})
Комментарии:
1. Попытка использовать динамически увеличиваемые идентификаторы или классы доставляет гораздо больше хлопот, чем того стоит. Используйте известный объект ссылки на элемент строки и
find(CommonClassNameSelector)
Ответ №1:
Вы не устанавливаете id так, как вы думаете, вы устанавливаете className и name атрибуты, так что $("#[" rowcount "].Service_Line") это ничего не вернет:
Ваш скрипт:
// set the name and id with the base name and rowcount
$(this).attr('name', '[' rowcount '].' inputParts[1]);
$(this).attr('class', '[' rowcount '].' inputParts[1]);
Вы можете выбрать элемент по name атрибуту следующим образом:
$("select[name='[" rowcount "].Service_Line']").change(function() {); //etc.
Ответ №2:
$("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;
});
})
Комментарии:
1. @Ryan Wilson пожалуйста, взгляните
2. @charlietfl пожалуйста, взгляните
3. вы хотите сказать, что ваш
$.getничего не возвращает?4. @RyanWilson да
5. Затем установите точку останова и проверьте это значение:
$("select[name='[" rowcount "].Service_Line']").val()перед выполнением$.get