Селектор jquery с префиксами
Это мой HTML-код:
<div id="editorRows">
<div class="editorRow">
<input type="hidden" value="01c4ed6d-1234-4951-b048-d86208636479" autocomplete="off" name="comds.index">
Grupa:
<select id="comds_01c4ed6d-1234-4951-b048-d86208636479__Grupa" name="comds[01c4ed6d-1234-4951-b048-d86208636479].Grupa">
Produsul:
<select id="comds_01c4ed6d-1234-4951-b048-d86208636479__Produs" name="comds[01c4ed6d-1234-4951-b048-d86208636479].Produs">
Cantitate:
<input id="comds_01c4ed6d-1234-4951-b048-d86208636479__Cantitate" type="text" value="0" name="comds[01c4ed6d-1234-4951-b048-d86208636479].Cantitate" data-val-required="The Cantitate field is required." data-val-number="The field Cantitate must be a number." data-val="true">
Pret:
<input id="comds_01c4ed6d-1234-4951-b048-d86208636479__Pret" type="text" value="17.23" size="4" name="comds[01c4ed6d-1234-4951-b048-d86208636479].Pret" data-val-required="The Pret field is required." data-val-number="The field Pret must be a number." data-val="true">
TVA:
<input id="comds_01c4ed6d-1234-4951-b048-d86208636479__TVA" type="text" value="0.24" name="comds[01c4ed6d-1234-4951-b048-d86208636479].TVA" data-val-required="The TVA field is required." data-val-number="The field TVA must be a number." data-val="true">
Total:
<input id="comds_01c4ed6d-1234-4951-b048-d86208636479__Total" type="text" value="0" name="comds[01c4ed6d-1234-4951-b048-d86208636479].Total" data-val-required="The Total field is required." data-val-number="The field Total must be a number." data-val="true">
<a class="deleteRow" href="#">Sterge</a>
</div>
<div class="editorRow">
<input type="hidden" value="97b4ac65-73f8-4339-a707-bad53763fb2e" autocomplete="off" name="comds.index">
Grupa:
<select id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__Grupa" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].Grupa">
Produsul:
<select id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__Produs" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].Produs">
Cantitate:
<input id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__Cantitate" type="text" value="0" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].Cantitate">
Pret:
<input id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__Pret" type="text" value="17.23" size="4" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].Pret">
TVA:
<input id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__TVA" type="text" value="0.24" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].TVA">
Total:
<input id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__Total" type="text" value="0" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].Total">
<a class="deleteRow" href="#">Sterge</a>
</div>
<div class="editorRow">.....
</div>
Итак, я отображаю частичное представление, чтобы отобразить больше элементов, и у меня есть действие, чтобы создать больше. Я пытаюсь вызвать функцию Json, когда я изменяю значение в первом DropDownList для повторного заполнения второго. Это мой сценарий: ОБНОВЛЕНИЕ
<script type="text/javascript">
$(document).ready(function () {
$('name$=.Grupa').change(function () {
var url = '<%= Url.Content("~/") %>' + "Comenzi/ForProduse";
var ddlsource = $(this);
var ddltarget = $(this).siblings('[name$=.Produs]:first');
$.getJSON(url, { id: $(ddlsource).val() }, function (data) {
$(ddltarget).empty();
$.each(data, function (index, optionData) {
$(ddltarget).append("<option value='" + optionData.Value + "'>" + optionData.Text + "</option>");
});
});
});
});
</script>
Мой Json Action от контроллера не вызывается. Что я должен изменить в скрипте, чтобы работать? Спасибо!
2 ответа
Не уверен, что это единственная проблема, но я думаю, что селекторы, которые вы создаете, не то, что вы хотите сделать.
.editRow.Grupa
будет сопоставлять элемент с классом editRow и классом.Grupa
я думаю, что эта строка:
var ddlsource = '.editRow.Grupa';
должно быть просто должно быть $(this);
и ваш var ddlsource = '.editRow.Grupa';
должно быть что-то вроде var target = $(this).siblings('[name$=.Produs]:first');
а затем любой из них: $(ddltarget) должен быть целью вместо этого.
что-то вроде этого:
$(document).ready(function () {
$('[name$=.Grupa]').change(function () { //targets things with the name ending in .Grupa
var url = '<%= Url.Content("~/") %>' + "Comenzi/ForProduse";
var source =$(this); //this will be which ever one is changed
var target = $(this).siblings('[name$=.Produs]:first'); //this SHOULD find the first select with a name ending in .Produs that is the sibling (same level in the dom to the changed select)
$.getJSON(url, { id: source.val() }, function (data) {
target.empty();
$.each(data, function (index, optionData) {
target.append("<option value='" + optionData.Value + "'>" + optionData.Text + "</option>");
});
});
});
});
Я не проверял это, но это общее представление о том, что вам нужно идти. обратите внимание, что селекторы, которые я использую, довольно неэффективны, если вы можете изменить сгенерированный код так, чтобы ваши блоки выбора имели известный класс, это было бы намного более аккуратным кодом и более эффективным
Если только я не пропустил это $('.editRow.Grupa') не отображается ничего в вашем HTML. Это говорит о том, чтобы найти все элементы с классом editRow а также Grupa, У вас нет элементов с классом Grupa,
Посмотрите этот список селекторов для правильных способов выбора элементов:
http://api.jquery.com/category/selectors/
Ваш селектор будет закрыт, если вы измените его на $('.editRow .Grupa') и добавьте класс в ваш выбор группы, который Grupa,
Что это говорит, получить все элементы, которые находятся внутри элемента с классом editRow и иметь класс Grupa, Ваш селектор говорит, что вы хотите, чтобы все элементы, которые имеют оба класса editRow а также Grupa,